Cara Menciptakan Random Post Keren Di Blog
Cara Membuat Widget Random Post Keren di Blogspot – Artikel acak atau yang dikenal dengan Random Post yakni widget yang akan menampilkan beberapa artikel secara acak. Widget random post merupakan widget buatan sendiri alasannya pada default widget blogger tidak ada, alasannya hanya menampilkan popular post saja.
Dengan memasang random posts di blog, maka artikel postingan terdahulu sanggup kembali terlihat oleh pengunjung. sehingga artikel usang sanggup dengan gampang terlihat dan terbaca. Memasang random post dirasa penting semoga postingan kita secara acak ditampilkan mulai dari postingan gres dan lama, ini tentu sanggup menambah page view yang nantinya bermanfaat buat blog juga untuk pengunjung mendapat isu berkualitas.
Nah, kali ini saya akan menawarkan Cara Membuat Random Post Keren dengan thumbnail di blog atau yang dikenal random post dengan gambar. PenaIndigo mempunyai tiga versi random post yang sanggup anda piih sesuai dengan selera.
Baca juga: Cara Membuat Recent Post Keren di Blog
Cara Memasang Widget Random Post dengan Gambar di Blog
Berikut beberapa koleksi random post Pena Indigo yang sanggup anda pasang pada sidebar blog, cara passang disidebar sebagai berikut:
1. Masuk akun blogger anda.
2. Lalu pilih hidangan “Tata Letak” lalu “Tambahkan gadget”, silahkan pilih “HTML/JavaScript”.
3. Setelah terbuka, masukkan salah satu aba-aba Random Post berikut sesuai dengan pilihan anda.
# Random Post dengan Thumbnail Keren
Random post yang pertama ini dengan tampilan gambar disebelah kanan, sehingga judul post sebagi perhatian pertama ketika dilihat. jikalau anda suka silahkan gunakan aba-aba berikut:
<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 0;min-height:72px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 7;
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/AVvXsEisvQgGmvAkNxYy1ArupWdN-cjQoQjO1O0IxUERAIIHkj5EqODYiqTblAMT45HyBUMmpe-DOxak1pZUI3cdI1Mbv1ypRCEGI6YfvVZFiiYDix1ha-XbXR1PCYlQGdun1ykXcQTi84WIKas/s1600/bungfrangki_no_image_100.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="Cara Membuat Widget Random Post Keren di Blogspot Cara Membuat Random Post Keren di Blog" 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>;
var rdp_snippet_length=60;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVamtMoUdN5fzNstYm4XkTTVRcZT75dAR_uH1vEWoFU7Ixx6d4mtHN2WvRE9zSSj7yRqzrHK7kBXe5BuQ0Fgnct8_WP5f3KZYZTxLgLRaz73Prd8tkbgQ6nyLhl3bsQfJN_OGF6fSWcsT/"}}};document.write('<li>');document.write('<img alt="Cara Membuat Widget Random Post Keren di Blogspot Cara Membuat Random Post Keren di Blog" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="Cara Membuat Random Post Keren di Blog">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')};
</script>
</div>
<!-- /end -->
</div></div># Widget Random Post dengan Gambar Sebelah Kanan
Jika anda ingin tampilan gres yaitu posisi gambar thumbnail berada sebelah kanan, silahkan cari aba-aba berikut:
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left;}
Lalu silahkan ganti float:left menjadi float:right maka secara otomatis gambar akan disebelah kanan.
# Cara Membuat Random Post dengan Thumbnail Bulat
Buat anda yang suka dengan gambar bundar silahkan cari aba-aba berikut:
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left;}
Kemudian tambahkan aba-aba border-radius: 35px; sehingga menjadi:
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left;border-radius: 35px;}
Jumlah Daftar Tampilan Judul
Untuk mengubah judul yang ditampilkan, silahkan setting sesuai yang diinginkan. berikut kodenya:
var randomposts_number = 7;
Ganti angka 7 dengan jumlah yang diinginkan, sanggup 10, 8 atau 5.
Baca juga: Cara Membuat Popular Post Warna-Warni di Blog
Bagaimana gampang kan buat random post? pilih salah satu 3 versi diatas untuk tampil di blog anda. Demikian isu wacana menciptakan random post semoga sanggup bermanfaat, menambah bagus tampilan blog juga artikel postingan yang usang sanggup terbaca pengunjung dengan baik.
Salam Blogger.