Recent Post với Thanh Điều Hướng chuyển bài cho Blogger

Recent Post Widget with Navigation for Blogger

Hôm nay Iris Tips sẽ chia sẻ cho các bạn tiện ích Bài viết gần đây với Thanh Điều Hướng chuyển bài cực "cool" dành cho Blogger. Các bạn theo dõi bài viết dưới để thêm widget vào website của mình nhé.

• DEMO

CSS

Đầu tiên bạn vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

/* Recent Post Navigation Iris Tips */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostiris{margin:0}
.recentpostel{display:block;margin:8px 0;height:auto;min-height:79px;border-bottom:1px dashed #eee;}
.recentpostel:last-child{border-bottom:0;}
.recentpostel img{background:#fff;float:left;height:67px;margin-right:10px;width:67px}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#333}
.recentpostel h6 a:hover{color:#fc4f3f}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VHZiNV2ylmoMcZ3ljIY9Z7N3p2AQyeK81aM3QD6l0ETFtOb2vAeB81ZaeeGRmRabBFX8lBe3gmKWKYhoGUKSPsDtTGVpRUOpt3mIuDk1tbWUAVwDSMIANBgkE5OfMwYZdxeS_uExVUve/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;}
#recentpostnavfeed{color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#333!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}

Javascript

Tiếp tục tìm đến thẻ </body> và dán đoạn script bên dưới vào trước nó.

<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://iris-tips.blogspot.com/";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostiris(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddaFNJltvfPJ0majjoJOGeKPNQ2NNe1U-8_97g4X8kZs2JYiRGTfzfEkqklWF2eO9V-73mLFNwLvaa7UI8y2pctSJWlCxYohvdSc-hsfahEOTOLAG0mRtL1Uj85P2rDUx8NhpJmi0jvrr/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostiris").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostiris",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostiris").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

HTML

Cuối cùng trở lại thanh Bố cục >> thêm tiện ích HTML/Javascript và dán vào đoạn code sau

<div id="recentpostiris"></div>
<div id="recentpostnavfeed"></div>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by arlinadesign/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm