Membuat Widget Recent Posts Simple Dengan Gambar Thumbnail

Membuat Widget Recent Posts Simple Dengan Gambar Thumbnail - Setelah sebelumnya Saya posting Membuat Contact Form Untuk Blog AMP Di Halaman Static. Kali ini Saya akan coba posting Membuat Widget Recent Posts Simple Dengan Gambar Thumbnail. Widget recent posts atau dapat disebut dengan artikel terbaru merupakan salah satu cara untuk memperkecil bounce rate blog dengan memperlihatkan gosip untuk postingan terbaru pada pembaca.

Dengan begitu akan lebih membantu pembaca semoga lebih gampang untuk mengetahui postingan-postingan yang paling terbaru pada blog tersebut tanpa harus beralih pada halaman depan atau beranda.

Selain simple, widget recent posts ini mempunyai loading yang cukup ringan, jadi tidak Anda perlu khawatir akan menambah beban loading pada blog Anda.

Jika Anda ingin mencobanya pada blog Anda, silahkan ikuti langkah-langkahnya dibawah ini.

Silahkan simpan isyarat CSS berikut di atas isyarat </head> (Jika tampilanya kurang sesuai dengan impian Anda, Anda dapat menyesuaikan beberapa bab untuk menyesuaikan tampilannya dengan template yang Anda gunakan).

 <style>
 /*<![CDATA[*/
 ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none}
 ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);}
 ul#recent-posts li img{width:90px;height:70px;margin:0 10px 0 0;float:left;}
 ul#recent-posts li .title_post{padding:10px!important;line-height: 1;position:relative;margin-left:90px;}
 ul#recent-posts li a{color:#333;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none}
 ul#recent-posts li a:hover{color:#FF1744;}
 ul#recent-posts:after{content:"";display:block;clear:both}
 /*]]>*/
 </style>

Kemudian silahkan simpan isyarat javascript berikut di atas isyarat </body>

 <script type='text/javascript'>
 //<![CDATA[
 var homePage = window.location.origin,numPosts = 5;
 function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/master/recent_post_with_thumbnail.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>

Kode 5 untuk mengatur jumlah post yang ditampilkan.

Terakhir silahkan simpan isyarat berikut di sidebar melalui tata letak/layout pada gadget HTML/JavaScript.