Tạo Bài Đăng Phổ Biến Với Thanh Điều Hướng Cho Blogspot

Lần này Anh Nhím Blog sẽ hướng dẫn các bạn tạo Bài Đăng Phổ Biến Với Thanh Điều Hướng Cho Blogspot. Nghe lạ đúng không bởi Widget bài đăng phổ biến thì có lẽ đã quá quen thuộc nhưng tự nhiên thêm cái thanh điều hướng thì thật là lạ.

Mục lục:

• Mục Đích
• Thực Hiện
• Lời Kết

Mục Đích

• Với giao diện cực kỳ đẹp, cực kỳ trang nhã, hiện đại với các hiệu ứng, hình ảnh to, phông chữ to.
• Tạo sự ấn tượng khó thể phai nhòa đối với đọc giả
• Có thanh điều hướng giúp hiện thị nhiều bài đăng hơn
• .......

Thực Hiện

1. Các bạn đăng Nhập BLOGGER >> Bố cục >> Thêm tiện ích >> HTML/Javascript

2. Sau đó chèn toàn bộ code sau vào trong

HTML<style scoped='' type='text/css'>
/* Recent Post With Navigation */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.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/AVvXsEh-Nv03LJTa_vyowyimQ0BoKaokMqsx6krNjUXYBr0YHDc1SPRlGs6ILQcph-WokJCImZhybYs8V1nbTM0N3o4DZbeyB97IoZh9rQhlF3-STiriulYK7hRU3gdErnuSbXpmei3Ce7z-YY2I/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 6;
    var startfeed = 0;
    var urlblog = "www.vnitworld.tk";
    var charac = 50;
    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 showrecentpostsae(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/AVvXsEh7GdQpqoUpqhOYsWyuDY5bNKrBoUd-rph9tl64-1EhYK84f27epjF0NmkCMbz1uSFbAj9Q8CsN25XdzZtsLjJ9rJ0byRiA4v4OX66WnQuC-Rp5S6jF6kiOtMS-DXd__0db6au05q30ItpH/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("recentpostsae").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=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").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>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

Chú ý: các bạn thay link màu đỏ www.vnitworld.tk thành link của bạn và thay số 6 thành số bài viết bạn muốn hiện thị. Thay số 50 thành số hiên thị ký tự của mô tả bài viết (ở đây là 50 ký tự)

Các bạn có thể vào đây để xác định có bao nhiêu ký tự cho bài viết 

3. Nhấn Lưu >> Lưu Sắp xếp
4. Xem kết quả
5. Demo

Demo
click to view

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Bài Đăng Phổ Biến Với Thanh Điều Hướng Cho Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.