Simple Blogger Recent Posts With Thumbnails

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/27/2017

Memasang widget recent post merupakan salah satu cara untuk memperkecil bounce rate blog dengan memberikan informasi untuk postingan terbaru pada pembaca.

Dengan begitu pembaca akan mudah mengetahui postingan-postinga yang paling hangat pada blog tersebut.

Banyak macam-macam recent post widget seperti slider recent posts atau yang berbentuk carousel recent posts. Nah kali ini saya akan membagikan sebuah widget blogger recent posts yang cukup simple dan disimpan di sidebar blog.

Selain simple, widget recent posts ini memiliki loading yang cukup ringan, jadi perlu Anda coba juga hehehe...


Jika Anda tertarik untuk mencobanya, silahkan ikuti langkahnya di bawah ini.

Silahkan simpan kode CSS berikut di atas kode </head> (munkin Anda perlu menyesuaikan beberapa bagian untuk menyesuaikan tampilannya dengan theme 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 kode javascript berikut di atas kode </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 kode berikut di sidebar melalui tata letak/layout pada gadget HTML/JavaScript.

<ul id="recent-posts"></ul>

Selesai... Selamat mencoba.