Membuat Widget Artikel Terbaru

Penggunaan widget seperti artikel terkait, artikel terbaru, artikel populer, maupun artikel yang diunggulkan tentu sangat membantu pengunjung untuk secepatnya menemukan artikel tentang informasi yang mereka butuhkan, dan juga akan memberikan efek baik untuk blog yaitu akan meningkatkan page view.

Pada kesempatan kali ini kita akan membuat sebuah widget untuk artikel terbaru memanfaatkan desain dari salah satu pembuat dan penyedia template yaitu Arlina Design yang tentunya sudah tidak asing lagi dikalangan para blogger.

Widget artikel terbaru ini akan menampilkan jumlah artikel sesuai keinginan kita, juga menampilkan thumbnail yang ukurannya dapat diatur sesuai kebutuhan dan gaya template yang kita gunakan. Sehingga hasil akhirnya nanti akan menambah keindahan tampilan blog dan akan terkesan lebih menarik bahkan profesional.

Proses pemasangannya sangat mudah sebab tidak perlu masuk kedalam menu tema mode html untuk menampilkan kode template dan akan mengacak-acak isinya. Kita hanya menggunakan widget html, sehingga aman bagi para pemula yang sedang membangun sebuah blog.

Langkah-Langkah Pembuatan Widget Artikel Terbaru

Login ke akun blogger.
Masuk menu Tata Letak > Tambahkan Gadget > HTML/JavaScript.
Copy kode berikut ini dan paste pada konten HTML/JavaScript.

<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:10px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 10px;overflow:hidden;z-index:2;position:relative;width:90px;height:62px;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:80%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#000;font-size:16px;font-weight:500;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#138be6}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

Perhatikan kode yang berwarna kuning.

width:80% dan height:auto adalah ukuran thumbnail artikel.
font-size:16px adalah ukuran font judul artikel.
font-weight:500 adalah ketebalan font judul artikel.
numpost=10 jumlah artikel yang akan ditampilkan.

Simpan dan lihat hasilnya.

Sekian artikel kali ini, dan pada kesempatan mendatang kita akan membahas tentang Membuat Widget Artikel Menarik.
Semoga bermanfaat.

Share this post