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

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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 != &quot;&quot;'>
          <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 == &quot;true&quot;'>
                    <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 == &quot;true&quot;'>
                    <h3 class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <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 == &quot;true&quot;'> 
                    <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <p class='item-snippet'>
                      <data:item.itemSnippet/>
                    </p>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <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 &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' 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 !




© itdl.blogspot.com
 

Web Design Technology blogs [ itdl ] Auto Backlink

HomeBlog ArchiveServicesLink2MeContactSubmit your PostPost RSS

Copyright © 2012 [ itdl ] Just for Share. Designed by Ngoc Luong - Freelancer

Best view in Chrome 11+, Firefox 5+ with resolution 1024 x 768 pixel. Powered by Blogger.