Cara Membuat Widget Postingan Terbaru (Recent Post) Menarik di Sidebar ala Mastimon

Cara Membuat Widget Postingan Terbaru (Recent Post) Menarik di Sidebar ala Mastimon

Cara Membuat Widget Postingan Terbaru - Fahrinheit, Pada kesempatan kali ini fahrinheit akan berbagi tips blogging agar tampilan blogmu terlihat menarik. Artikel kali ini merujuk salah satu blog personal terbesar di Indonesia yakni blog mastimon. Menurut saya pribadi, mastimon merupakan salah satu blog terbaik yang dikelola sendiri di Indonesia dan menjadi salah satu alasan fahrinheit ngeblog sampai sekarang. Dengan tampilan yang sederhana namun tetap menarik dan menghadirkan artikel-artikel yang berkualitas menjadikan blog ini sering muncul di halaman page one google dan banyak dikunjungi.

Nah ada salah satu tampilan menarik pada blog mastimon, yakni widget postingan terbaru yang terlihat menarik dan menyesuaikan tema yang bisa anda lihat pada blog fahrinheit ini sendiri. Tampilan tersebut sangat berbeda dari fitur-fitur yang biasanya disediakan oleh blogger sendiri sehingga langsung fahrinheit terapkan juga di blog ini. Seperti yang dapat anda lihat pada gambar di atas, widget tersebut menyesuaikan dengan tema yang diterapkan pada blog sehingga tidak merusak tampilan blog anda justru malah membuat menarik tampilan blog anda.

Baca Juga : Cara Membuat Hasil Pencarian Blog Dialihkan Ke Pencarian Google ala Kompi Ajaib

Seperti yang kita ketahui, fitur blogger sendiri memang menyediakan featured post yang membuat kita dapat menampilkan post sesuai label ataupun post terbaru yang dipublikasikan. Namun untuk tampilannya sendiri kurang menarik dan kita tidak dapat mengatur berapa jumlah artikel yang ditampilkan. Sedangkan pada widget postingan terbaru (recent post) ala mastimon ini sendiri kita dapat mengatur berapa jumlah artikel yang ingin ditampilkan dan untuk penerapannya pun sangat sederhana karena hanya menggunakan widget blogger sehingga anda tidak perlu repot-repot mengeditnya melalui HTML template. Nah penasaran bagaimana cara mengaplikasikannya pada blog anda? Langsung saja ikuti langkah-langkah berikut ini:

1. Masuk ke akun blogger anda.

2. Setelah masuk ke akun blogger selanjutnya pilih menu tata letak / layout

3. Masuk ke tata letak sidebar selanjutnya klik tambahkan gadget / widget

4. Pilih gadget HTML / Javascript

5. Masukkan kode script di bawah ini :
<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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 = 5;
var startfeed = 0;
var urlblog = "https://www.fahrinheit.com";
var charac = 0;
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:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/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>

Note : Untuk mengedit kode script silahkan ubah tulisan yang berwarna merah di atas,
1. var numfeed, untuk mengatur berapa jumlah postingan terbaru yang akan ditampilkan di sidebar
2. var startfeed, untuk mengatur artikel yang dimunculkan dari postingan artikel keberapa
3. var urlblog, masukkan link blog anda
4. var charac, untuk mengatur jumlah karakter isi karakter yang akan ditampilkan, jika anda ingin hanya judul yang ditampilkan maka pilih 0

Nah itulah tadi cara membuat widget postingan terbaru di sidebar ala mastimon. Sangat mudah sekali bukan? Anda tidak perlu repot-repot mengaturnya melalui HTML template karena hanya dengan menggunakan widget. Selain itu tampilan dari widget tersebut juga menyesuaikan dengan template anda sehingga akan terlihat menarik. Demikian artikel kali ini, nantikan terus tips blogging lainnya dari fahrinheit. Semoga bermanfaat.
Fahrinheit
Fahrinheit

"Blogger Paruh Waktu, Pemimpi Pengangguran Sukses."

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments