Membuat Random Posts tanpa thumbnail SEO Friendly

advertisement
Cara membuat random post di blog - Widget random posts / other posts menjadi sumber bacaan yang di rekomendasi kan bagi yang berkunjung ke blog sobat, bentuk informasi tidak disampaikan secara statis seperti popular posts. Setiap kali refresh blog sobat, maka isi dari random posts akan berubah ubah.

Biasanya penggunaan random posts mempengaruhi kecepatan loading blog sobat, kabar gembiranya adalah widget random post tanpa thumbnail ini tidak mempengaruhi kecepatan dari PageSpeed Insights blog sobat alias sangat ringan dibandingkan dengan kode random posts yang lain, silahkan dicoba.

membuat random posts di blog

Oke langsung saja berikut kode HTML / JavaScript yang bisa sobat gunakan untuk membuat Random Posts versi kangibay, silahkan di gunakan...

1. Login pada akun Blogger
2. Masuk ke Layout → Add a Gadget
3. Copy kode dibawah lalu masukan ke dalam widget HTML/JavaScript

<!-- Random Posts -->
<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kangibay.net/", //ganti dengan URL blog sobat
numPosts = 5; //jumlah judul postingan
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="random-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=21&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

Keterangan :
//Ganti dengan URL blog sobat
//Jumlah judul postingan

4. Kemudian di Edit HTML tempatkan kode dibawah ini, diatas ]]></b:skin>

#random-posts {max-width: 100%;float: left;margin: 0px 0 20px 0;}
#random-posts li{list-style: none;padding:5px;}
#random-posts li {list-style: none;border-bottom: 0px solid #ddd;font-size: 14px;text-align: left;}
#random-posts h4 {font-weight: 400;text-transform: uppercase;padding: 10px;background: #287F8D;color: #fff;border-top-left-radius: 4px;border-top-right-radius: 4px;font-size: 14px}
#random-posts ul {margin: 0;padding: 0;border: 0px solid #ddd;border-top: 0;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;}
#random-posts a {color: #b2b2b2;text-decoration: none;}
#random-posts a:hover {color: #fd531f;text-decoration: none;}
#random-posts li:last-child {border-bottom: 0;}

5. Setelah semuanya selesai, silahkan Simpan



Sekian informasi mengenai kode HTML/Javascript untuk widget Random Posts yang ringan dan tidak mempengaruhi nilai dari PageSpeed Insights. Semoga bermanfaat

Salam,
Admin
advertisement
SHARE ON :

Artikel Terkait

Membuat Random Posts tanpa thumbnail SEO Friendly
4/ 5
Oleh

Subsribe

Masukkan alamat email Sobat untuk berlangganan blog ini dan menerima pemberitahuan pesan baru melalui email.

Load comments