Membuat Simple Recent Posts Dengan Thumbnail

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

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

Selain simple, widget recent posts ini memiliki 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 kode CSS berikut di atas kode </head> (Jika tampilanya kurang sesuai dengan keinginan Anda, Anda bisa menyesuaikan beberapa bagian 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 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...