[Blogspot] Tạo Featured Content Slider tự động cập nhật bằng jQuery và BlogList

• 

  Khóa học Liên thông,Văn bằng 2

  Học trực tuyến.Chủ động thời gian, địa điểm.Viện ĐH Mở HN cấp bằng.Chi tiết
• 

  Bạn đã tốt nghiệp TC ,Cao Đẳng

  Vừa học, vừa làm với hình thức học trực tuyến. Tiết kiệm thời gian.Chi tiết

Một trong các ứng dụng jQuery thường được hay sử dụng cho trang web là làm Featured Content Slider.
Với những platform như Wordpress, Joomla... thì việc hiển thị nội dung cho Featured Content Slider là tự động nhưng với Blogger thì ta phải làm thủ công bằng tay bằng việc chỉnh sửa nội dung hiển thị trong template.

Sau một thời gian nghiên cứu và tìm hiểu tiện ích BlogList mà Blogger cung cấp thì mình đã tìm ra được giải pháp làm Featured Content Slider tự động cập nhật nội dung (automatic update) cho Blogger. Ý tưởng là sẽ dùng BlogList lấy nội dung bài viết và dùng jQuery chỉnh sửa mã HTML để phù hợp với việc hiển thị Featured Content Slider.

Demo xem tại đây : http://itdl-demo.blogspot.com/#featured-content-slider

Dưới đây là các bước thực hiện:

Bước 1

Chèn đoạn CSS sau trước]]></b:skin>

/* START
--------------------------------------------------------------------
Automatic Content Sliders for Blogger using BlogBlist and jQuery
By http://itdl.blogspot.com

http://itdl.blogspot.com/2012/02/automatic-content-slider-using-bloglist.html
--------------------------------------------------------------------
Featured Content Slider
*/
#featured{background:#fff;float:left;width:630px;height:292px;padding:10px;margin-bottom:10px;position:relative;border-bottom:2px solid #cfcfcf;overflow:hidden}
#featured ul.ui-tabs-nav{position:absolute;top:10px;left:425px;list-style:none;padding:0;margin:0;width:215px;height:292px;overflow:auto;overflow-x:hidden;z-index:100;border:none}
#featured ul.ui-tabs-nav li{padding:0 0 0 15px}
#featured ul.ui-tabs-nav li img{float:left;margin:0 5px 0 0;background:#fff;padding:3px;width:70px !important;height:57px !important}
#featured ul.ui-tabs-nav li span{position:relative;left:0;top:3px;line-height:1.6em}
#featured li.ui-tabs-nav-item a{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZ8wRN_rgTA7t-3htI21R52V2AdQO1lrFAeLR8blCiuXi2w0qdALvUia-Ryv8BC4RP2ChMFPbud_muE5_4NJKS92uI3EhOVH6500LgkhFfoFE2PNihpZmLO3nCX8N1jzbQAC-EffICKo/s1600/panel-bg.jpg) no-repeat;color:#fff;display:block;padding:5px;height:63px;text-decoration:none;line-height:1.2em;outline:none;border:none;overflow:hidden;}
#featured li.ui-tabs-nav-item a:hover{color:#cfcfcf}
#featured li.ui-tabs-selected{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYbI6aesQj-JSOZ3XogDlKIN8tJewhYqJpbaEHgfXb-jLmrtRZvomYFhUFQjVPbhlMkctAl5GDF91qrw-P0sE3GQ_yN0PRIN6-LOUB4YfW-LPnRVsu858XP94jfsY_b8U0UWQQQ0Cdgas/s1600/arrow.png) center left no-repeat;z-index:200}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#0a0a0a;color:#fff;border:none}
#featured .ui-tabs-panel{width:430px;height:292px;position:relative;padding:0;margin:0;z-index:50}
#featured .ui-tabs-panel img{width:430px !important;height:292px !important;z-index:50}
#featured .ui-tabs-panel .info{position:absolute;padding:5px 10px;bottom:0;left:0;overflow:hidden;height:83px;width:410px;background:#111;opacity:0.85;f