Recent Post Widget Cantik by Spiders (Blogger)

Widget Recent Post by Spiders

Hello guys..

Kali ini kita akan belajar membuat widget Recent Post/Artikel Terbaru dengan mengkustomisasi tampilannya menggunakan kode HTML agar lebih keren dan menarik. Walaupun sebenarnya Template-template gratisan maupun juga yang premium rata-rata sudah menyertakan fitur tampilan untuk widget ini, begitu juga tema-tema standar bawaan Blogspot mulai dari yang lawas hingga terbaru, namun tidak ada salahnya jika kita melakukan sedikit modifikasi (redesign) untuk widget Recent Post/Artikel Terbaru ini, sambil belajar sedikit kode-kode dasar HTML, Java Script dan CSS

Seperti yang telah kita ketahui bahwa widget Recent Post/Artikel Terbaru ini selain berfungsi untuk menghiasi tampilan dari blog kita yang galau ini.. eh kan kumat lagi galaunya.. 🙊🙈

Maksud saya widget ini juga berfungsi sebagai penunjang page views dari blog kita dengan menampilkan beberapa navigasi link berupa judul postingan menuju ke artikel-artikel terbaru yang telah kita posting sebelumnya. Hal ini tentu saja memudahkan para visitor untuk melihat apa saja postingan artikel yang terupdate pada blog kita.

Baca juga: Tutorial Membuat & Memasang Widget Related Post Keren (Tema Blogger Terbaru Emporio)

Kode HTML yang akan saya bagikan berikut ini sangat mudah sekali untuk digunakan tanpa perlu melakukan pengeditan CSS pada Template blog, karena cukup dipasang melalui menu layout tema dan tinggal menambahkan gadget pada side bar ataupun posisi yang lainnya.

Baiklah kita mulai saja langkah-langkahnya berikut ini:

👉 Untuk langkah pertama kita siapkan terlebih dahulu kodenya di bawah ini:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnHwvP2-x47cechyv0qYMlLa30cHWJrcE-7QCQuBLvYByvNHPujfKsc1ESAQkJAlOSjRdchlglZxG7_lX-bVdKw6wFkmjDXmHJ8-7YZO9K_wRsCyayUxqDfV3qGJMpmO1oTpjy0D_YjXy/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 3;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = false;
var summary_chars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://www.labalabawirata.com/2022/09/kumpulan-kode-html-dan-java-script.html" rel="dofollow"><marquee scrollamount="2">Recent Posts by Spiders Widget | Get the code at www.labalabawirata.com</marquee></a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:100px;height:100px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:16px 'Syncopate',;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #0F466E;
background:-webkit-linear-gradient(right,#5093C4 0%,#000 75%);; width: auto}
ul.recent-posts-container li:nth-child(2n+0) {background: #0F466E;
background:-webkit-linear-gradient(right,#DEB887 0%,#000 75%);; width: auto}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E;background:-webkit-linear-gradient(right,#FFF59E 0%,#000 75%);; width: auto}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0;background:-webkit-linear-gradient(right,#E1EFA0 20%,#fff 75%); width: 100%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF;background:-webkit-linear-gradient(right,#FF00FF 30%,#fff 70%); width: 100%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #fff;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #808080;}
.post-date {color:#e0c0c6; font-size: 8px; }
.recent-post-title a {font-size: 11px;color: #0ff; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #0ff;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Keterangan:

Perhatikan potongan kode Java Script berikut ini yang merupakan bagian dari kode lengkap di atas:

<script type="text/javascript">
var posts_no = 3;                        👉 Jumlah Artikel
var showpoststhumbs = true;    👉 Gambar Artikel
var readmorelink = true;           👉 Baca Lebih
var showcommentslink = true; 👉 Komentar
var posts_date = true;                👉 Tanggal Postingan
var post_summary = false;        👉 Cuplikan Artikel
var summary_chars = 50;         👉 Jumlah Teks Cuplikan
</script>

Pada Keterangan Kode di atas silahkan di sesuaikan angka untuk jumlahnya, dan atribut true (tampil) menjadi false (tersembunyi) sesuai dengan yang kita inginkan.

Kemudian perhatikan lagi potongan-potongan kode CSS berikut ini yang merupakan bagian dari kode lengkap di atas juga:

<style type="text/css">
img.recent-post-thumb{width:100px;height:100px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}

=> Kode CSS di atas adalah style untuk gambar artikel dengan bentuk bulat.

Silahkan diganti ukurannya pada angka nilai px dengan width (lebar) dan height (tinggi)

=> float:right; berarti letak thumbnail/gambar berada di sebelah kanan.

=> -moz-border-radius:50%; adalah persentase dari lekukannya.

=> background: #fff adalah kode warna latar bingkai dari gambar bulatnya yaitu putih.

ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:16px 'Syncopate',;margin: 5px 0px 5px 0px;}

ul.recent-posts-container li:nth-child(1n+0) {background: #0F466E;
background:-webkit-linear-gradient(right,#5093C4 0%,#000 75%);; width: auto}
ul.recent-posts-container li:nth-child(2n+0) {background: #0F466E;
background:-webkit-linear-gradient(right,#DEB887 0%,#000 75%);; width: auto}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E;background:-webkit-linear-gradient(right,#FFF59E 0%,#000 75%);; width: auto}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0;background:-webkit-linear-gradient(right,#E1EFA0 20%,#fff 75%); width: 100%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF;background:-webkit-linear-gradient(right,#FF00FF 30%,#fff 70%); width: 100%;}

=> Kode CSS di atas adalah anakan atau tabel kolom berbentuk list atau berderet kebawah dan jumlahnya ada 5 (1n+0) sampai (5n+0) dengan style warna gradiasi pada backgroundnya.

Silahkan diganti kombinasi kode-kode warna tersebut (#000 adalah kode warna hitam).

=> keterangan persentase right 75% berarti warna latar pada sebelah kanan lebih dominan daripada sebelah kiri, silahkan diganti juga sesuai kebutuhan.

ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #fff;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #808080;}

Keterangan kode hover di atas adalah #808080 fungsinya ketika link disorot akan berubah warna menjadi abu-abu.

.post-date {color:#e0c0c6; font-size: 8px; } => kode untuk tampilan tanggal postingan
.recent-post-title a {font-size: 11px;color: #0ff; font-weight: bold;} => Judul Artikel
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #0ff;} => Kode warna untuk Read More dan komentar
.recent-posts-details {padding: 5px 0px 5px; }
</style>

👉 Untuk langkah kedua kita masuk terlebih dahulu ke pengaturan Blog, lalu pilih Layout/Tata Letak, kemudian tentukan posisi widget yang akan kita pasang.

Sebagai contoh saya menempatkannya pada sidebar, => kemudian pilih Add a Gadget, => lalu pilih HTML/JavaScript.

👉 Kemudian akan muncul kolom untuk memasukan kode, lalu isikan semua kode lengkap yang telah kita edit di atas, kosongkan saja untuk judulnya kemudian simpan (save).

Berikut ini contoh panduan gambarnya untuk langkah-langkah yang saya sebutkan tadi. 

Contoh gambar pengaturan Layout Blogspot

Contoh gambar Add Gadget Blogspot

Contoh gambar pengeditan Gadget HTML/JavaScript Blogspot

Baca juga: Cara Mengedit Tema Emporio Bagian I | Custom Blogger Template

Jika sudah berhasil dipasang coba kita lihat hasilnya. Contoh dari Widget Recent Post/Artikel Terbaru ini seperti gambar yang saya tampilkan di atas pada awal artikel ini. Karena saya menggunakan tema Emporio dengan latar berwarna hitam jadi menurut saya tampilan dari widget ini terlihat tampak cukup manis dan cantik dengan gradiasi warna dari hitam berpadu ke warna-warna cerah lainnya, walaupun memang tidak semanis si dia..😁😂

💥 TAMBAHAN KODE (OPTIONAL)

Kode tambahan berikut ini untuk menampilkan heading atau kotak judul berisi icon menarik pada widget Recent Post tadi. Jadi boleh dipasang dan boleh juga tidak tergantung selera ya guys..

Tapi sebelumnya kita harus memasang beberapa kode CSS pada Template blog.

Untuk tutorial pemasangan kode CSS nya bisa kita lihat di postingan saya sebelumnya ya guys... Pada artikel tutorial membuat widget Related Post.

Dan kode yang perlu kita tambahkan adalah berikut ini:

<div id='related_posts'><h4><center><i class="fa fa-book gradient-icon" aria-hidden="true">Artikel Terbaru</i></center></h4></div>

Keterangan:

Pasang kode tersebut dengan menambahkan gadged HTML tepat di atas gadged dari widget Recent Post yang telah kita buat. Atau bisa juga digabungkan dengan kode widget lengkap di atas tadi.

Untuk membuat tulisan Artikel Terbaru menjadi transparan tinggal kita hapus saja kode <h4> dan </h4>

Mungkin sekian yang dapat saya bagikan Recent Post Widget Cantik by Spiders (Blogger) ini semoga bermanfaat, silahkan meninggalkan komentar dan terima kasih atas kunjungannya.