Cara Membuat Widget Random Post di Sidebar
Selain widget popular post dan iklan AdSense, bagian sidebar pada blog juga bisa di isi dengan widget lainnya seperti featured post, profil, arsip blog, pengikut, label, dan widget lainnya.
Semua widget tersebut sudah tersedia secara otomatis di blogger, tinggal Anda pilih saja mana widget yang paling Anda butuhkan. Namun apabila Anda ingin memasang widget lain yang tidak ada di blogger, maka Anda harus memasangnya secara manual.
Nah, pada tutorial blogger kali ini saya akan menjelaskan cara membuat widget random post di sidebar sebagai pengganti widget popular post.
Cara Pasang Widget Random Post di Sidebar
Cara membuat widget random post di sidebar ini sangat mudah, berikut ini langkah-langkahnya.
- Buka Dashboard Blogger
- Pilih menu Tata letak
- Klik/tap Tambahkan Gadget
- Pilih HTML/JavaScript
Copy dan paste script di bawah ini pada kolom gadget HTML/JavaScript yang sudah di buka sebelumnya.
Baca: Cara Membuat Header Tidak Sticky
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 10;
var randomposts_chars = 0;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFiRYCuqIT5a__C9n4dUl0tH0n7BC_4TbMDQAzdREJ9G2ISu9lYiXv6dIOoZdlK_rKk6kDNC_zP6tk_2LVio9aN313q9U59WwPy71QIbY-k0KeWjOWQQSuIln1yV4UGmRG9bctHEyZMJI/s1600/bungfrangki_no_image_100.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
<div class='clear'/>
</div>Klik simpan dan lihat hasilnya.
Perhatikan!
Kode yang ditandai warna hijau adalah lokasi untuk menentukan jumlah random post yang tampil. Anda tinggal mengubah nilai 10 menjadi berapapun jumlah random post yang ingin ditampilkan.
Baca: Cara Membuat Logo Blog Berputar
Nah, itulah tutorial blogger pemula cara membuat widget random post di sidebar.
Semoga bermanfaat.
Posting Komentar