Template dan Tips Seputar Blogger

Monday, June 19, 2017

Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan

Membuat Widget Random Post Tanpa Gambar di Bawah Postingan Valid HTML5 dan CSS3 – Tutorial kali ini saya berbagi sebuah widget lagi yaitu random post di bawah postingan. Sebetulnya widget ini bisa saja diletakkan pada sidebar blog, namun untuk menarik minat pembaca agar tampilan navigasinya lebih ideal saya letakkan random post ini di bawah postingan.

Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan

Random post ialah widget yang menampilkan link postingan blog yang dipilih secara acak, tanpa terbatas pada label tertentu. Mana artikel yang beruntung, maka link dari artikel tersebut yang akan ditampilkan dan terlihat artikel tidak monoton pada satu konten yang sama label. Widget ini sangat cocok dipasang pada blog yang memiliki beragam konten di dalamnya, atau yang lebih sering disebut blog gado-bado.

Penggunaan widget random post adalah salah satu cara untuk membuat pengunjung mau membaca konten postingan yang ada pada blog tersebut. Dengan demikian pageviews blog akan meningkat setiap harinya. Oleh sebab itu, widget random post ini sering disebut salah satu widget yang sangat seo friendly.

Ada beberapa jenis widget random post yang berserakan di mesin pencari Google, 2 random post jenis yang sering kali digunakan oleh blogger adalah random post yang memiliki thumbnail dan yang tidak memiliki thumbnail atau tidak menampilkan gambar. Pada tutorial kali ini saya akan membagikan script random post yang tanpa menggunakan gambar atau thumbnail. Alasannya, karena script ini lebih ringan, sebab tidak memuat gambar di dalamnya, sehingga sangat cocok diletakkan di bawah postingan.

Bagi yang tertarik memasang widget random post di bawah postingan blog, simak tutorialnya berikut ini.

Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan


Kopi kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<div class='random-url'>
    <h4>Random Post:</h4>
<ul id='random-posts'/>
<script>
//<![CDATA[
var homePage = "http://blog.iumari.com/",
numPosts = 5;
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+='<div class="random-posts"><li><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></div>'}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=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);}
</script></div>

Ganti http://www.iumari.com/ dengan nama blog anda.

Angka pada kode numPosts = 5; adalah jumlah link yang akan di tampilkan pada widget ini nanti, sesuaikan dengan kebutuhan blog anda.
Untuk mengatur tampilan widget random post tersebut, anda bisa mengedit css berikut ini.

/* Random Post */
.random-url{margin:10px 20px 25px;padding:0}
.random-url h4{color:#333;text-transform:capitalize;font-family:&#39;Roboto&#39;, Arial, Sans-Serif;font-size:140%;font-weight:400;position:relative;padding:0 10px 10px;margin:0}
.random-posts a{color:#4285f4}
.random-posts a:hover{text-decoration:underline !important}

Demikian tutorial kali ini, semoga membantu.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×