banner

Trang được xây dựng với nội dung giải trí dành cho tuổi thơ, giúp các bé hiểu biết thêm về ngôn ngữ, lịch sử, sự vật đời sống... thông qua các câu truyện Cổ tích, Truyền thuyết dân gian, nghệ thuật vẽ tranh, hài hước... từng bước xây dựng nền tảng trí tuệ cho bé. Trang cũng dành một phần nội dung cho bậc làm cha mẹ như: Đặt tên cho con - Tưởng dễ mà khó, sứ khỏe, nấu ăn, bài thuốc hay... Chúc các bé cùng phụ huynh thư giãn vui khỏe! Bé nào muốn có tranh, video, vui cười... muốn đăng lên trang này, nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt nội dung trước khi được đăng nhé!
Bài ngẫu nhiên
Bé nào có tranh đẹp, video hay, vui cười,... muốn đăng trên trang này thì nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt trước khi được đăng.
20 tháng 5, 2013
Trang chủ > THỦ THUẬT > Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot

Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot





Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot - BY: HTTP://NAMKNA.BLOGSPOT.COM/

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/script.js"></script>
- Bạn hãy Download 3 file Js trên về và Upload lên host riêng để dùng lâu dài và ổn định nha. Nếu chưa có host thì xem bài này hoặc Bài này
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.main-slider{width:414px;  /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px;  /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload
 div{ height:100%;width:100%; background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XvlghIbPc5ru1enj8IK8tWsa4cNPMB6hxo3UCod3bed5XRvEWRJQz-kn4N_7HL6TwDJajFUebGr66KWJUuaT6HeFbCkKFkUQCDFGt-D4Tbm-MCEn1C3OhD62LPTR4JsiHXsmcGuud3uM/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden;
 background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XvlghIbPc5ru1enj8IK8tWsa4cNPMB6hxo3UCod3bed5XRvEWRJQz-kn4N_7HL6TwDJajFUebGr66KWJUuaT6HeFbCkKFkUQCDFGt-D4Tbm-MCEn1C3OhD62LPTR4JsiHXsmcGuud3uM/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; 
overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px;  /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner
 li{ cursor:hand;  cursor:pointer; list-style:none; padding:0; 
margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner
  
li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVGkhIQbs0D1s-EcTaHsY3yEX473XsqC3X3DcWsKkinvV7vA6elCve9_jgTQlAM-AaD1APvAodWAJ_A_5cnXkvZzPtlQnydICgJ6dCYZ9oBBWo_5O0vdKf990KJXBn2xofd19qydwFDeIl/s1600/arrow-bg-namkna-ngoctra.png)
 no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
 li.active 
div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgM_vpDe5WOaDFvorffTU3cUkRmDoaF1b7zHREbrFBcak-jLrKrJIZ0it6sQtohiyeaUtp07MwPgja2zFhu2wO-aK1rJi15gt0_KalM0QvKoG7behDUsOCE8Qb7MiAcKS3pKJxSyNOHVaf/s1600/grad-bg-namkna-ngoctra.gif);
color:#FFF;}
ul.navigator-wrap-inner  li >  div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px;  /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px;   /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTvCY9RNtLUr6z26oWUd6-ya1BPPrupfAzC5bIoBoEWuAoviuFTzXEiFsvtITvmdODbJi3Nn50LaeJT-XXIB5SX1l4W69wpWnbN5WGlEO68-xZlzw9PeoRWeWWosUv7WWfd8dV-ItKlOd/s1600/next-namkna-ngoctra.png)
 no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8LI5bSNHdT86u8WmVUWTocrVxG3KpPK75_atWhFKfOc6_hA6aTmQcAHoBwmc7dlMHAoZtu9crxrdgIq6UGBS4t5vCtRl_fidLjMujXv_1lLQiSGCWX1z99z8uaYuaMF6WrZ4LOTxIVPNt/s1600/previous-namkna-ngoctra.png)
 no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block;  width:100%; height:100%;}
.action-start span  {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1Jm6msNrCHW5qo8J25Iy9dy1dhQVtUolEXnx8TM75hrJnM-1y3d_ANdSbqyrMmixlEMyRSsshY6tVT2CatNRkpxkhshnZgTdxGVfVW017nFGrRO2EatkS1_3tP_zoCOW2-p6oWPkHlq-/s1600/play-namkna-blogspot-ngoctra.png)
 no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNb32xZ_xv7OQmQ_4mwVZX-VpWQAmt1e6YrIcttqUHPXFAUjy9EolwdEc4J4DD0qXw61tQTI6Os9cL552ShxsQnnoGAJo0bB3c08UwNOyjjDI4ti85dcztEHPF1Qb2aIhRsdaQGPF0Dv5w/s1600/pause-namkna-ngotra.png)
 no-repeat center center;
}
6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',  // tên hiệu ứng
duration:1200,
auto:true,
mainWidth:414,  //độ rộng của phần trình diễn bên trái
mainHeight:300, //chiều cao của phần trình diễn bên trái
navigatorHeight : 100,   //chiều cao của list bài viết bên phải
navigatorWidth : 310, //độ rộng của list bài viết bên phải
maxItemDisplay:3,
buttons:buttons});  
});
summaryposts = 30; //số ký tự của nội dung phần mô tả
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://namkna.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews.js" type="text/javascript">
</script></div>
- Ở trên mình chọn kiểu hiệu ứng là (easeOutBounce), bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo, easeInOutQuad.
- Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Advanced blogger";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới
http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews.js
thành file JS sau
http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews_label.js
Bạn nhớ sửa tên nhãn (Advanced blogger) lại cho đúng với tên nhãn mà bạn muốn hiển thị cho blog của bạn.
06:02
Người đăng: vào lúc 06:02
  • Nhận xét bằng Blogger
  • Nhận xét bằng Facebook
Item Reviewed: Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot Rating: 5 Reviewed By: PHÙNG BẢO KIÊN