Widget ini berfungsi untuk menampilkan daftar artikel terbaru secara otomatis sehingga pengunjung blog mengetahui konten apa saja yang baru dipublikasikan di blog kamu. Sesuai judul, widget ini menggunakan tampilan gelap atau dark style (ada fersi lightnya juga sih tinggal cari diblog ini) yang bisa membuat bagian daftar artikel terlihat lebih elegan dan modern. Selain itu, widget ini juga dilengkapi navigasi sehingga pengunjung dapat berpindah ke daftar postingan berikutnya.
Penggunaan navigasi juga membuat pengunjung lebih mudah menemukan artikel yang dicari, tampilan widget menjadi lebih rapi karena jumlah artikel yang ditampilkan dalam satu halaman dapat dibatasi sesuka hati. Jadi, sidebar blog tidak akan terlihat penuh oleh daftar postingan yang terlalu banyak.
 |
| Recent Post Widget Blogger (Dark Style) |
Cara Membuatnya di Blogger
Ini Sebenarnya sudah pernah admin bagikan di blog admin sebelumnya, tapi karena blog adimi yang sebelumnya domainnya tidak diperpanjang sehingga telah terhapus, maka admin mempostingnya kembali disini. Nah bagi kamu yang tertarik ingin menggunakan widget ini berikut adalah cara memasangnya ke blogger.
1. Di Blog kamu 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript
 |
| Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript |
4. Masukan kode di bawah ini ke dalam kotak yang tersedia.
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://www.haisob.com";
var charac = 40;
var urlprevious, urlnext;
function haisobfeed(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/AVvXsEiVwEk-yGsMn02APkWmOm7LQbz4nRkDMoG8CLuX-7Q7fkstJYIrXC1QpEDEJsMZ9bh0F1r0GZSdgpQi6MK4l0_2NwDKdmA4XEjAmBUsg9w0d-8hw4k7z6Au8QW13uuy22bGSUXcaR7Y44ne/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>"+haisobfeed(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","haisoblabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("haisoblabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style>
#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
#recentpostsae{margin:0}
.recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#aaa;}
.recentpostel:hover{background-color:#111;}
.recentpostel p{font-size:12px;text-align:left;color:#aaa;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/AVvXsEjYLPFsx-x4BiYl5tBN0fa97F8vsdc6UObJI-d1sz8PCs4lPKZ6-d3G1t1vH6s2W3-ABaB1CbjUCIAdo9M3QP2gb_bWXFpnA0O4sE9iMVdVO0K97eU2O__iOfPPzzE-rSRvgWJRTITc5Zm9/s1600/loader.gif) 50% 50% no-repeat #2c3e50;height:470px;border:1px solid #111}
#recentpostnavfeed{border:2px solid #000;color:#bbb;background:#333;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#111;}
#recentpostnavfeed a{color:#bbb!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>
5. Edit kode berwarna di atas, misalnya: jumlah postingan, url blog.
6. Save widget.
Dengan menggunakan widget ini, tampilan blog kamu bisa menjadi lebih keren tentu saja. Pengunjung juga akan lebih mudah menemukan artikel-artikel terbaru tanpa harus memenuhi sidebar dengan terlalu banyak daftar postingan. Adanya tombol navigasi membuat widget ini terasa lebih praktis karena pengunjung bisa melihat postingan berikutnya dengan mudah. Yah intinya sih, blog jadi makin keren.
Kalau mengerti kode css tampilannya yang menggunakan gaya gelap bisa kamu ubah sesuka hati, warna, ukuran, jumlah postingan, hingga desain tombol navigasi dapat dimodifikasi agar menyatu dengan template yang kamu gunakan.
Kalau mengerti kode css tampilannya yang menggunakan gaya gelap bisa kamu ubah sesuka hati, warna, ukuran, jumlah postingan, hingga desain tombol navigasi dapat dimodifikasi agar menyatu dengan template yang kamu gunakan.
0 Komentar untuk "Cara Membuat Widget Recent Post dengan Navigasi Dark Style Keren di Blogger"