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 dikala sedang merayapi blog tersebut dan sangat mensugesti 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 mampu memperkecil Bouce Rate blog kita alasannya ialah pengunjung dapat mengetahui menyeluruh isi dari blog yang kita sajikan ini. Bagi sahabat yang mau mencobanya mari ikuti langkah penerapannya berikut dibawah ini Cara Membuat Simple Recent Posts Blogger With Thumbnails.

Langkah Pertama

Silahkan salin instruksi CSS dibawah ini lalu letakkan di atas instruksi </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 bab yang sahabat harus sesuaikan tergantung dengan theme template yang dipakainya.


Langkah Ke Dua
Silahkan instruksi 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 instruksi yang ditandai 7 itu untuk mengatur jumlah postingan yang akan ditampilkan pada widget recent posts, silahkan sahabat sesuaikan setelah simpulan silahkan SAVE.


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

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

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