![[ itdl ] Just for Share](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDY1jWmM1YsGLOfJvYREgeT-oVrCJYPGWCNh7EAxJt6CuRoC1HweDpBzDmERSPp1bDWHo0xu5VGA4d2DEAZziOfdxkNmzq7Rf8ZMRe5Txqk8oeuDl1f4zSQ4qOulplJCpugPVVzHMLOB15/s1600/itdl-logo.png){kind=logo}
Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !
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.blogspot.com/#featured-content-slider hoặc 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/AVvXsEjGBAjVd3ASIVEMJdD2Os-atXtkAelV4_RyllpCNBcJ_i-w9TpQvMYEcbcwiDV5vXCSTswHt-q8elmHehL1QWj8ev4I6CslvtVaEXd-XgcWyCD5pJA6xQFIxb36G1fomhipzYy46AjqAX8/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/AVvXsEiUWdKJiaQsUTV-6UNFgOQRL8MOglkbyjSkN-KIlsFtQ-6g2gB6qMBgDCNAa5Vv603TsXeAfIzF_q7C3Lftm0cyMDdod_rlTjzyEpLXnXwMi8Dq_kn2PKhULip4XEVN_OmmO61bQ3CMO-0/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;filter:alpha(opacity=85);.width:100%; z-index:50}
#featured .info h3{height:25px;font-size:18px;padding:0;margin:0;font-weight:bold;overflow:hidden}
#featured .info p{margin:0;padding:0;line-height:1.4em;color:#fff}
#featured .info a{text-decoration:none;color:#4999cc}
#featured .info a:hover{text-decoration:underline}
#featured .ui-tabs-hide{display:none}Bước 2:
Tìm đến nơi cần hiển thị nội dung của Featured Content Slider trong template và chèn đoạn code này vào
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:section preferred='yes' id='bloglist_featured'>
<b:widget id='BlogList2' locked='false' title='' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='featured'>
<b:loop values='data:items' var='item'>
<div class='ui-tabs-panel item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<img class='item-thumbnail' alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</b:if>
</b:if>
<div class='info'>
<b:if cond='data:showItemTitle == "true"'>
<h3 class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</h3>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>
<p class='item-snippet'>
<data:item.itemSnippet/>
</p>
</b:if>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
<div style='clear: both;'/>
</div>
</b:loop>
</div>
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type='text/javascript'>
//<![CDATA[
// *********************************************************************
// @name Automatic Content Sliders for Blogger using BlogBlist and jQuery
// @author Luong Bao Ngoc - baongock32@gmail.com
// @description http://itdl.blogspot.com
// *********************************************************************
var default_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnBHvFHSk25ysRL93Wlku46I3zNj-iQkeRUjw1f62w4u4yPkOffjYwVcu3NyYwuUanxZxM7iHxm6vA2qvdcDO3ZEdzUIi4cD85Oa5sQ-jk1tscqp3JyJ6Jq0X6sR25yDG0LV0LLuPnPnj/";
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1=0;e="";$(\'#o\').8(\'u.4-t\').w(x(){2=$(7).8(\'g.4-j\').5(\'9\');6=$(7).8(\'y.4-3 a\');3=6.r();k=6.5(\'f\');6.5({s:\'\',f:k+\'#v.E.G\'});H(2==I){$(7).l("<g c=\'4-j\' F=\'0\' 9=\'"+h+"\'/>");2=h}1++;e+="<p c=\'m-n-d-4\' 1=\'d-b-"+(1)+"\'><a f=\'#b-"+(1)+"\' 3=\'"+(3)+"\'><g z=\'2\' A=\'B\' 9=\'"+(2)+"\' C=\'D\'/><q>"+(3)+"</q></a></p>";$(7).5(\'1\',\'b-\'+(1))});$(\'#o\').l("<i c=\'m-n-d\'>"+e+"</i>");',45,45,'|id|thumb|title|item|attr|atag|this|find|src||fragment|class|nav|html|href|img|default_img|ul|thumbnail|link|prepend|ui|tabs|featured|li|span|text|target|content|div|itdl|each|function|h3|alt|height|60|width|80|blogspot|border|com|if|null'.split('|'),0,{}));
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
//]]></script>
</b:if></b:if>Bạn thay dòng màu đỏ bằng URL của ảnh làm mặc định khi bài viết không có ảnh hiển thị (thumbnail) rồi lưu template lại và upload lên Blogger
Bước 3:
Bạn vào Thiết kế >> Phần tử trang (Design >> Page Elements) và mở widget BlogList vừa chèn để chỉnh lại nội dung:
Bạn nhấn tiếp Thêm vào danh sách (Add to List) để chèn các bài viết dùng để hiển thị Featured Content Slider
Bạn điền vào mục Thêm bằng URL (Add a URL) nội dung như sau
http://itdl.w3solution.net/feeds/posts/default/-/FEATURED?start-index=1
Với itdl.w3solution.net là địa chỉ blog của bạn
FEATURED nhãn của các bài viết sẽ hiển thị trên Featured Content Slider
Nhấn Thêm (Add) rồi tiếp tục nhấn Thêm vào danh sách (Add to List) lần lượt chèn các URL sau vào
http://itdl.w3solution.net/feeds/posts/default/-/FEATURED?start-index=2 http://itdl.w3solution.net/feeds/posts/default/-/FEATURED?start-index=3 http://itdl.w3solution.net/feeds/posts/default/-/FEATURED?start-index=4
cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích Featured Content Slider thì dừng lại (vd ở đây là 4 bài), rồi nhấn Lưu (SAVE) để lưu tiện ích.
Bây giờ hãy thử vào blog của bạn và xem kết quả nhé ! Sẽ rất tuyệt vời đó ^^
Để thay đổi nội dung hiển thị cho Featured Content Slider, sau khi đăng bài bạn phải chọn nhãn cho bài viết là FEATURED và xóa bài viết cũ đi là được.
Chúc các bạn thành công !
Chúc các bạn thành công !
© itdl.blogspot.com
![[ itdl ] Auto Backlink](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAs_vtlOVH8TSP4pUMfza_QiVaqm04RIzduhpIn9Ta3iHTFd3tN-PNKJ6_hQAr9H1Cm2chIR6SmEVGI6VD29aDWQczuRc1JYC2q1i4q0LrAn6-ndaL8pOJJZWMWBSuLYprHBbrgDahEOq/s1600/backlink.gif){kind=small}