Simple Blogger Recent Posts With Thumbnails

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

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

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

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


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

Silahkan simpan isyarat CSS berikut di atas isyarat </head> (munkin Anda perlu menyesuaikan beberapa bab 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 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.

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

Selesai... Selamat mencoba.
Sumber https://www.kompiajaib.com/

Share this post