Featured Posts Widget

Hôm nay mình sẽ giới thiệu với các bạn tiện ích Featured Posts chuyển động xoay vòng sử dụng với Css và jQuery. Với tiện ích này chắc chắn rằng các bài đăng của bạn sẽ thu hút các độc giả hơn đấy. Hãy cùng thực hiện nào.

DEMO

Các bước thực hiện như sau :
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Bấm CTR+F tìm đoạn mã sau :

<b:section class='main' id='main' showaddelement='no'>

Bạn thay no thành yes sẽ thành :

<b:section class='main' id='main' showaddelement='yes'>

Bước 3: Tạo 1 tiện ích HTML mới đặt trước Bài đăng trên Blog như hình sau :




Vào chỉnh sửa Tiện ích HTML/JavaScript vừa tạo dán đoạn code sau đây vào :

<style scoped="" type="text/css">#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{width:630px;height:250px}#slides li{width:49.9%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-24miAg53eQo/Uaq2dwSNZyI/AAAAAAAAaz8/IavWv66LN14/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}#buttons{margin:5px 0 0}#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}@media only screen and (max-width:600px){#slides ul{height:600px}#slides li:nth-child(1){width:100%;height:49.8%}#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}}</style><div id="featuredpost"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate() {$('#nextx').click();}//]]></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://chinhtrucblog.blogspot.com",//URL Blog của bạnMaxPost:8,//Số bài trình chiếuidcontaint:"#featuredpost",ImageSize:300,interval:5000,//Tốc độ dịch chuyểnautoplay:true,//Tự độngtagName:false});});//]]></script>

Thay thế http://chinhtrucblog.blogspot.com thành địa chỉ blog của bạn
Nếu Blog bạn đã có Jquery rồi thì xóa đoạn code này đi để tránh xung đột

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Bước 4: Cũng trong Tiện ích HTML/JavaScript vừa tạo bạn làm theo hình sau để xác định ID HTML của tiện ích sẽ có dạng như sau HTMLxx.Trong bài viết này thì ID của mình là HTML1.


Xác định ID của bạn sau đó vào Mẫu > Chỉnh sửa HTML(mỏ rộng tiện ích) > Tìm kiếm HTML1 (ID Của bạn HTMLxx)

-Thêm <b:if cond='data:blog.url == data:blog.homepageUrl'> vào sau
<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'>
-Và </b:if> vào sau <b:include name='quickedit'/>

Sau khi thêm vào sẽ có dạng như sau :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'><data:content/> </div>
<b:include name='quickedit'/>
</b:if>
</b:includable> </b:widget>

1. - Trong đó những dòng tô đậm màu vàng là những code được thêm vào. - HTML1 là ID tiện ích mà bạn đã tìm

- Như vậy là thủ thuật đã xong. Lưu templete lại.

Mkr

Chúc các bạn thành công.