Loading...

Membuat Simple Recent Posts Blogger With Thumbnails

 Di kesempatan postingan kali ini kita akan membahas lanjutan seputar widget yang sering t 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 menciptakan tampilan pemuatan blog menjadi lebih lambat dan itu tidak baik di mata search engine saat sedang merayapi blog tersebut dan sangat menghipnotis 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 gampang dan ringan loadingnya jadi sanggup memperkecil Bouce Rate blog kita alasannya ialah pengunjung sanggup 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 isyarat CSS dibawah ini kemudian letakkan di atas isyarat </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 isyarat Javascript dibawah ini kemudian 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 isyarat yang ditandai 7 itu untuk mengatur jumlah postingan yang akan ditampilkan pada widget recent posts, silahkan sahabat sesuaikan sesudah final silahkan SAVE.


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

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

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

Sumber http://www.dibalikseo.com

Subscribe to receive free email updates:

0 Response to "Membuat Simple Recent Posts Blogger With Thumbnails"

Posting Komentar