Membuat Simple Recent Posts Dengan Thumbnail

Membuat Simple Recent Posts Dengan Thumbnail - Widget recent post atau sering dapat disebut artikel terbaru merupakan salah satu cara untuk memperkecil bounce rate blog dengan memperlihatkan gosip untuk postingan terbaru pada pembaca.

Dengan begitu pembaca akan gampang untuk mengetahui postingan-postinga yang paling terbaru pada blog tersebut tanpa harus membuka halaman depan atau beranda.

Selain simple, widget recent posts ini mempunyai loading yang cukup ringan, jadi tidak usah khawatie akan membebani loading pada blog Anda.

Jika Anda ingin mencobanya pada blog Anda, silahkan ikuti langkahnya berikut ini.

Silahkan simpan arahan CSS berikut di atas arahan </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 arahan javascript berikut di atas arahan </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 arahan berikut di sidebar melalui tata letak/layout pada gadget HTML/JavaScript.