ADVERTISEMENT

SUPPORTED

Membuat Random Posts tanpa thumbnail SEO Friendly

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

Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
Copyright © 2017 Kangibay.net - Redesign By Nowext Inc. | Blagioke