Membuat Simple Recent Posts Blogger With Thumbnails

Di kesempatan postingan kali ini kita akan membahas lanjutan seputar widget yang sering terpasang di sidebar Blogger yaitu widget Recent Posts. Ada bayak model dan tampilan yang terpasang tergantung selera dari si empunya blog tersebut ada yang warna warni dan ada pula yang beranimasi.

Seperti yang kita ketahui juga pemasangan widget di blogger menyumbang beban loading yang cukup besar bagi blog, sehingga membuat tampilan pemuatan blog menjadi lebih lambat dan itu tidak baik di mata search engine ketika sedang merayapi blog tersebut dan sangat mempengaruhi juga nilai SEO nantinya. Dikesempatan kali ini kita akan bahas permasalahan tersebut dengan solusi Membuat Simple Recent Posts Blogger With Thumbnails sehingga loading blog tidak terlalu berat.

Membuat Simple Recent Posts Blogger With Thumbnails ini sangat mudah dan ringan loadingnya jadi bisa memperkecil Bouce Rate blog kita karena pengunjung dapat mengetahui menyeluruh isi dari blog yang kita sajikan ini. Bagi sobat yang mau mencobanya mari ikuti langkah penerapannya berikut dibawah ini Cara Membuat Simple Recent Posts Blogger With Thumbnails.

Langkah Pertama

Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode </head>.

<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>

Perlu diperhatikan mungkin ada beberapa tampilan atau bagian yang sobat harus sesuaikan tergantung dengan theme template yang dipakainya.


Langkah Ke Dua
Silahkan kode Javascript dibawah ini lalu letakkan di atas </body>.

<script type='text/javascript'>
//<![CDATA[
var homePage = window.location.origin,numPosts = 7;
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>

Perhatikan kode yang ditandai 7 itu untuk mengatur jumlah postingan yang akan ditampilkan pada widget recent posts, silahkan sobat sesuaikan setelah selesai silahkan SAVE.


Langkah Ke Tiga
Silahkan sobat buat gadget baru HTML/javascript yang berada di layout/Tata letak lalu letakkan kode dibawah ini didalamnya, ini untuk memanggil dan menapilkan Widget Simple Recent Posts.

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

Perhatikan setiap langkah penerapan kodenya, jika sudah sesuai silahkan SAVE, Selesai selamat mencoba.