Cara Memasang Widget Random Post Berjalan Dengan Thumbnail Cara Memasang Widget Random Post Berjalan Dengan Thumbnail

Cara Memasang Widget Random Post Berjalan Dengan Thumbnail. Kembali lagi saya Jona Rendra posting artikel Widget yang bisa anda gunakan untuk menghias blog sendiri, supaya tambah menarik. Ya, widget ini adalah random post atau postingan acak. Seperti namanya, widget ini menampilkan artikel anda dengan acak secara berjalan serta juga dilengkapi dengan thumbnail gambar dan beberapa atribut lainnya. Contohnya seperti gambar dibawah.

Selain mempunyai keunggulan seperti yang sudah saya sebutkan, Widget Random Post Berjalan Dengan Thumbnail ini juga ada sedikit kelemahannya. Kalau yang saya tidak suka adalah membuat blog tambah berat karena menggunakan terlalu banyak css. Jadi kurang mengesankan untuk pendukung SEO. Tapi jangan risau. Blog ini juga sudah memberikan widget random post yang lebih seo. Misalkan Widget Random Post Tampilan Text Biasa.

Sepertinya saya cukupkan sedikit ulasan mengenai Random Post Berjalan Dengan Thumbnail. Sekarang saatnya kita ke topik yang utama kita pada saat ini. Yaitu Tutorial memasangnya di Blog anda masing masing. Tenang saja, postingan ini sudah saya update dan sudah saya perjelas serta juga saya ringkas HTML dan beberapa CSS tidak pentingnya. Apabila anda sudah tidak sabar ingin memasang widget ini di blog, simak dan praktekkan tutorial dibawah ini.

Cara Membuat Postingan Acak Berjalan Dengan Gambar

1. Sign in ke akun blogger anda
2. Pada dashboard, pilih blog anda lalu masuk ke Tata Letak
3. Silahkan di pilih pilih kolom yang ingin dipasangi widget ini
4. Setelah sudah ditentukan, klik Tambah Gadget lalu akan muncul jendela Tambah Gadget
5. Lalu cari gadget yang namanya HTML/Javascript, dan klik
6. Perhatikan kode html dibawah ini. Copy semua dan paste di kolom Konten di HTML/Javascript.

#randompost-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}
#randompost-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
#randompost-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXaIxVsnErS3sCqD-aTtev-WYeTfcWawOOrDySrZvjodtB42ke-2PaBYITfAJ6UhUe8yv-fZ5KaYn_uZY_Cuk_yqN3RYH4cJ-nFbXJbSdq_-OYcQjpYKy9B8zU3cGlL1Vz59cqcbS29Gg/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}
#randompost-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}
#randompost-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}
#randompost-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#randompost-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4knM-TYDHEYVEhKafWOadLw6Jv2w2t9UE2CIVlzOlmE25IIGjgwULPRkyiCGE9cZJt1AwNL34u55YJvIJu7Zcwk5_guK8TUK3pwl9qRTwALZ9GsegQ5Nokg3cS4jNfgy12kGez5akvuo/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4knM-TYDHEYVEhKafWOadLw6Jv2w2t9UE2CIVlzOlmE25IIGjgwULPRkyiCGE9cZJt1AwNL34u55YJvIJu7Zcwk5_guK8TUK3pwl9qRTwALZ9GsegQ5Nokg3cS4jNfgy12kGez5akvuo/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4knM-TYDHEYVEhKafWOadLw6Jv2w2t9UE2CIVlzOlmE25IIGjgwULPRkyiCGE9cZJt1AwNL34u55YJvIJu7Zcwk5_guK8TUK3pwl9qRTwALZ9GsegQ5Nokg3cS4jNfgy12kGez5akvuo/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4knM-TYDHEYVEhKafWOadLw6Jv2w2t9UE2CIVlzOlmE25IIGjgwULPRkyiCGE9cZJt1AwNL34u55YJvIJu7Zcwk5_guK8TUK3pwl9qRTwALZ9GsegQ5Nokg3cS4jNfgy12kGez5akvuo/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4knM-TYDHEYVEhKafWOadLw6Jv2w2t9UE2CIVlzOlmE25IIGjgwULPRkyiCGE9cZJt1AwNL34u55YJvIJu7Zcwk5_guK8TUK3pwl9qRTwALZ9GsegQ5Nokg3cS4jNfgy12kGez5akvuo/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.jonarendra.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

7. Editlah kode diatas dengan mengganti kalimat jonarendra.blogspot.com dengan alamat blog anda

8. Tahap akhir, klik Simpan dan preview blog anda untuk melihat apakah widget sudah muncul atau belum.

Itu dia widget random post / postingan acak. Mau widget yang unik lagi? Jona Rendra juga sudah share nih. Berbeda dengan random post, ini widget adalah Popular post atau Entri Populer. Keunikannya disini adalah kita menampilkan widget popular post hanya gambar nya saja dan jika di sentuk kursor, gambarnya bisa berputar. Menarik bukan? Langsung saja pasang widget tersebut di Cara Memasang Widget Entri Populer Gambar Bisa Berputar.

Itulah postingan Jona Rendra yang berjudul Cara Membuat Postingan Acak Berjalan Dengan Gambar, semoga bermanfaat untuk menghias blog anda. Jika ada kesulitan saat praktek atau pun widget ada kecacatan saat muncul, silahkan bertanya dengan mengeposkan komentar dibawah untuk mendapatkan solusi terbaik dari saya.