Dalam dunia blogger tidak asing lagi dengan yang namanya istilah Script. Script merupakan bahasa pemrograman yang menyediakan fasilitas penerjemahan dan kompilasi kode dalam satu rangkaian proses secara integratif sehingga memungkinkan kode dibuat dapat langsung dijalankan sebagai program secara dinamis.
Dalam postingan kali ini akan dijelaskan penerapan Script untuk untuk menampilkan recent posts di Widget blog dengan cara memanggil Thumbnail gambar postingan di blog. Sebelum ke tutorial membuat recent posts di widget, terlebih dulu akan dijelaskan beberap pengaturan yang akan digunakan dalam penulisan script di widget blog.
var showpostthumbnails = true;
di gunakan untuk mengaktifkan dan menonaktifkan gambar thumbails widget.
var displaymore = false;
di gunakan untuk mengaktifkan dan menonaktifkan link readmore.
var showcommentnum = false;
di gunakan untuk mengaktifkan dan menonaktifkan jumlah komentar pada artikel tersebut.
var showpostdate = false;
di gunakan untuk mengaktifkan dan menonaktifkan waktu pembuatan artikel.
var numchars = 0;
di gunakan untuk menampilkan jumlah karakter pada artikel. true di gunakan untuk mengaktifkan fitur, false digunakan untuk menonaktifkan fitur yang ada.
Ok, langsung aja ke tutorial membuat Script Wideget Recent Posts Keren di blog yaitu dengan langkah-langkah sebagai berikut :
Pertama Login Blog—>Tata Letak—>Klik Tambah Wiget—>Pilih HTML/JavaScript
Setelah masuk ke jendela HTML/JavaScript Paste Kan Kode di bawah ini di bagian konten, pastikan jangan smpai ada yang ketinggalan.
<style>
/* CSS Recent Post Gallery Widget */.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:””;clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type=’text/javascript’>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=[‘<div class=”recent-grid”>’],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:”https://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png”,s=n.replace(“s72-c”,”s”+recentpost_thumbs+”-c”),h=l.link||[],c=0;c<h.length&&”alternate”!=h[c].rel;++c);var d=h[c].href,m='<img src=”‘+s+'” width=”‘+recentpost_thumbs+'” height=”‘+recentpost_thumbs+'”/>’,p=recentpost_title?'<span class=”ptitle”>’+r+”</span>”:””,g='<a href=”‘+d+'” target=”_blank” title=”‘+r+'”>’+m+p+”</a>”;e.push(‘<div class=”galleryview”>’,g,”</div>”)}e.push(“</div>”),document.write(e.join(“”))}
//]]>
</script>
<script>
var recentpost_thumbs = 64;
var recentpost_title = true;
</script>
<script src=”/feeds/posts/default/-/tutorial?max-results=6&alt=json-in-script&callback=gallerygrid”></script>
<a style=”font-size: 9px; color: #CECECE;margin-top:10px;” href=”https://ninestartup.com/2021/07/widget-recent-posts-berdasarkan-label.html” rel=”nofollow”>Recent Posts Label</a>
/* CSS Recent Post Gallery Widget */.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:””;clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type=’text/javascript’>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=[‘<div class=”recent-grid”>’],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:”https://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png”,s=n.replace(“s72-c”,”s”+recentpost_thumbs+”-c”),h=l.link||[],c=0;c<h.length&&”alternate”!=h[c].rel;++c);var d=h[c].href,m='<img src=”‘+s+'” width=”‘+recentpost_thumbs+'” height=”‘+recentpost_thumbs+'”/>’,p=recentpost_title?'<span class=”ptitle”>’+r+”</span>”:””,g='<a href=”‘+d+'” target=”_blank” title=”‘+r+'”>’+m+p+”</a>”;e.push(‘<div class=”galleryview”>’,g,”</div>”)}e.push(“</div>”),document.write(e.join(“”))}
//]]>
</script>
<script>
var recentpost_thumbs = 64;
var recentpost_title = true;
</script>
<script src=”/feeds/posts/default/-/tutorial?max-results=6&alt=json-in-script&callback=gallerygrid”></script>
<a style=”font-size: 9px; color: #CECECE;margin-top:10px;” href=”https://ninestartup.com/2021/07/widget-recent-posts-berdasarkan-label.html” rel=”nofollow”>Recent Posts Label</a>
Tulusan Tutorial merupakan nama Label di blog, anda dapat mengganti sesuai dengan nama Label yang ada di blog anda. Angka 6 jumlah Thumnail gambar yang akan di panggil untuk diposting, anda dapat merupah sesuai dengan keinginan.
Setelah kode diatas selesai di paste kan jangan lupa klik Simpan
Demikianlah tutorial cara membuat dan memasang Script Widget Keren di postingan Blog. Sumber langkah ini diambil dari blog Mr Mung.com
Terimakasih gan, ini ada demonya g'?