Cara Mudah Membuat Widget Postingan Terbaru Seperti Blog Mastimon.com

Cara Mudah Membuat Widget Postingan Terbaru Seperti Blog Mastimon.com

Cara Mudah Membuat Widget Postingan Terbaru Seperti Blog Mastimon.com

Saat ini, mungkin para blogger sudah sangat banyak mengenal blog mastimon. Walau blog gado-gado, tapi hasil pendapatannya segunung. Dengan jumlah pengunjung fantastis, blog gado-gado sekalipun akan sukses meraup pendapatan yang bejibun.

Untuk tampilan blog juga sudah keren, sampai blog bacanulis juga terpincut untuk memakainya. Dari tampilan depan, bila kita mengunjungi blog tersebut tampilan dari widget postingan terbaru cukup keren bila dilihat. Anda mungkin bisa langsung cek tampilannya di blog ini.

Padahal dulu, saat tampilan blog bacanulis masih jadul, sering sekali gonta-ganti tampilan widget postingan terbaru. Supaya tampilan bagus dan pengunjung pun beta. Namun, dari sekian banyak tutorial yang bisa di cari melalui mbah google, semua hasil kurang memuaskan hati. 

So, saatnya merubah tampilan widget postingan terbaru yang mirip dengan blog mastimon.com. Mana tau, para sobat sekalian berniat untuk memasangnya.

Berikut lakukan langkah-langkahnya dengan mudah;

1. Masuk ke blogger seperti biasanya
2. Pilih "Tata Letak"
3. Lalu tambahkan “Widget Baru” ( Add a Widget) – Pilih “HTML/JavaScript“.
4. Copy dan Paste, kode di bawah ini dan masukan ke dalam widget baru dengan membuat judul "POSTONGAN BARU"
<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(https://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.bacanulis.com";    var charac = 45;    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://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>
5. Edit kode diatas, dengan;
- mengubah var urlblog = "https://www.bacanulis.com", dengan url blog Anda.
- ganti angka pada "var numfeed = 5;", sesuai dengan kebutuhan
6. Setelah sudah dirasa ok, maka klik tombol simpan. Lihat hasilnya!
Begitu mudah dengan cari ini, tanpa harus masuk ke edit html di blog. Sehingga waktu yang dibutuhkan sangat cepat, tapi hasil juga sudah bagus.

Buka Komentar