✔ Cara Menciptakan Widget Recent Post Responsive Di Blogger
Widget Recent Post atau Widget postingan terbaru merupakan salah satu widget blog yang harus ada di blog anda. Dengan menciptakan widget recent post ini pengunjung akan lebih gampang mengetahui postingan terbaru teman-teman. Biasanya recent post di letakan di sebelah kanan blog. Silahkan baca lebih lanjut untuk mengetahui cara menciptakan widget Recent Post Responsive di Blogger.
Dari banyaknya widget recent posts yang pernah aku terapkan di blog ini, widget recent post yang akan aku bagikan ini yakni widget recent posts yang paling menarik dan tentunya responsive berdasarkan saya. Karena di widget recent post kali ini terdapat thumbnail gambar dan juga di lengkapi dengan tombol navigasi next.
Cara Memasang Widget Recent Post di Blogger
Dengan adanya thumbnail gambar di widget recent post, tentunya menciptakan terlihat lebih menarik serta di lengkapi dengan tombol navigasi next. Dengan begitu pengunjung sanggup dengan gampang melihat lebih banyak postingan terbaru selanjutnya. Berikut cara memasang widget postingan terbaru di blogger.
Baca juga : Template Blogger Terbaik 2019
Masuk pada sajian Tata Letak Blogger >> Tambahkan Gadget >> Pilih HTML/JavaScript. Beri judul Recent post atau Postingan terbaru, selanjutnya pastekan instruksi di bawah ini di dalam kotak di bawahnya.
<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:5px;height:83px}
.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/AVvXsEhQq540FrLwTXorlEsbYGU6nNuVIWm7VYh-yJy1V4M-yM219Rhu0noX1z3hnSwfrrEZ5uhu5bsksmkjj9BddTurzUQG9JA3zPCDtUkZ-FcGgsHF8nIla3OuWvnYN16-Dhn-wORL8a0NoZqo/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/j4vascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://www.masigun.com/";
var charac = 30;
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/AVvXsEgElSGTCVUWQk1aJQ3hrsCXmO1QIsSfv9VCs31UF1zBZR-SKb2wmbin-hmEFTYRnRvP4rYILtYp1A7ExfV4PyuaThYny_GHCjA3lyLiKVaMyHVPPABy2S6fnx8ZPxhrA7AEj8lHbnn91xih/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='j4vascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='j4vascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='j4vascript: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/j4vascript"),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>
Terakhir klik simpan. Untuk menampilkan berapa postingan yang akan teman-teman tampilkan silahkan ubah angka 5 yang aku beri warna merah di atas. Sedangkan pada nomor 30 yang aku beri warna tanda merah yaitu untuk mengatur jumlah abjad yang akan di tampilkan. Namun sebelumnya ganti alamat blog di atas dengan alamat blog teman-teman semoga widget recent post sanggup bekerja dengan baik.
0 Response to "✔ Cara Menciptakan Widget Recent Post Responsive Di Blogger"
Posting Komentar