Cara Membuat Widget Random Post Keren di Blogger

Kali ini kita akan belajar bagaimana cara membuat widget html random post keren. Caranya pun cukup mudah, cukup ikuti instruksi pada artikel berikut dan semua akan berhasil. Cara yang kami sampaikan sangatlah sederhana, berikut kami sampaikan penjelasannya.

Cara Membuat Widget Random Post Keren di Blogger

Random post adalah sebuah postingan random yang akan tampil di blog website mu. Dengan menambahkan random post di websitemu maka pengunjung tidak akan bosan, karena setiap halaman yang ia buka muncul postingan dari berbagai waktu. Sehingga semua postingan di blog atau websitemu bisa dijangkau oleh pengunjung blog.

Hal ini akan meningkatkan potensi pengunjung untuk klik artikel yang sudah using. Otomatis jumlah viewsmu akan bertambah. Hingga akhirnya pengunjung senang, yang punya blog pun senang.

Berikut langkah – langkahnya

1. Login

Pertama – tama yang harus dilakukan adalah login terlebih dahulu pada pengaturan blogmu (blogger).

2. Layout

Klik layout, disinilah kamu akan menempatkan kode html untuk random post.

3. Add a Gadget

Klik add a gadget di mana kamu akan menempatkan kode html untuk random post

4. HTML/JavaScript

Kemudian pilih HTML/JavaScript

5. Berikan Judul dan Paste Kode Ini

Berikan judul pada widgetmu dan paste kode berikut ini ya:

<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:#ffffff00;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}

#random-posts a{color:#0A9C7D;transition:all .3s;display:block}

#random-posts li:hover a,#random-posts a:hover{color:0A9C7D;}

.random-summary{font-size:13px;color:999}

#random-posts li{background-color:#ffffff00;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 = 5;

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/AVvXsEicmJFzCfbNOlGbn8mLnMYWPjtcdgVdKSiZOI19xPj7mLbhWlNc0GZTQ62_GZLVT9wwQjUinQ2S_eO56IaNhXsjVzCezOlUmrxuUuN5ZgdYJrqWmB8pFIAJoidpwFsGf4QfliO9Jjf3nbM/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>

<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)+"&#133;";};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/AVvXsEhK-UOSgP_Wuk6p2eSSwWlR0Ws5pFbTuZOcPnljGoWAyQfz6ypxgOg8SOtBHEas-jpci8CC3b_kcgLY9_yaGEw7HuLjB1R4mrKTezCESyVV5fmfnWhXawCJAKZt3_p4ts0wQwSDbWdzhezR/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+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>





<!-- /end -->

Keterangan:

• Kode #0A9C7D menunjukkan warna tulisan yang akan tampil. Kamu bisa mengubahnya sesuka hati.
• Angka 5 menunjukkan jumlah random post yang akan tampil

6. Save

Langkah terakhir klik save dan save arrangement. Bagaimana? mudahkan? kalian juga bisa custom html tersebut sesuai selera

Seperti itulah kode html widget random post keren, silahkan dicoba kawan.