Tutorial Blog

Cara Membuat Widget Artikel Acak Di Blog

Dalam Artikel Ini Saya Akan Menjelaskan Bagaimana Caranya Membuat Widget Random Post Keren Atau Cara Membuat Widget Artikel Acak Di Blog Rapi Dan Keren Banget, Dalam Artikel Ini Saya Akan Share Bagaimana Cara Membuat Widget Artikel Acak Di Blog Dengan Mudah Simple Dan Rapi, Seperti Halnya Di Blog Ini Juga Memakai Artikel Acak Bisa anda lihat di Sidebar Kanan blog Ini Itu Juga Memakai Widget Artikel Acak Atau Random Post Atau Yang Disebut Juga Dengan Random Post Cara Membuat Random Post Dengan Thumbnail atau sekaligus dengan gambar Sangatlah Mudah Dan Tidak Berat Karna Pengaruh Javascript Yang Dibuat Dan Dalam Widget Artikel Acak Di Blog Atau Membuat Random Post Yang Keren Banget Disini Kita Akan Membuatnya,

Maksud dari random post yaitu nantinya akan berisi atau menampilkan artikel artikel yang kita miliki akan ditampilkan secara acak, Teknik ini merupakan teknik agar pengunjung bisa dapat membaca artikel kita agar pengunjung dapat membuka banyak artikel yang kita miliki dan itulah yang disebut dengan artikel acak atau disebut juga random post, anda bisa juga memasang dimana saja tetapi agar terlihat lebih rapi dan keren kita akan coba langsung ke sidebar saja, terserah juga sih anda mau meletakkannya dimana saja yang penting kalau misalnya di template anda meletakkannya harus di parse dulu tetapi jika di sidebar langsung tinggal pasang saja contoh widgetnya bisa anda lihat dibawah contoh widget artikel acak atau widget random post, inilah contoh tampilannya

Pada Gambar diatas terlihat sidebar artikel acak atau random post yang responsive banget ya, lalu caranya nanti kita pasang ke tata letak saja dan langsung pilih html Javascript dan sebelumnya pastikan artikel di blog anda sudah banyak ya biar gampang kita testnya nanti oke kita langsung saja mulai :

Pertama : Anda Buka Blogger.com dan login akun blog kalian masing masing

Kedua : Langsung Pergi Ke Menu Tata Letak >> Pada Sidebar >> Tambahkan Gadget >> HTML/JAVASCRIPT Dan Pastekan Kode Dibawah Ini …

<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 = 12;
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://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/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>

Lalu Klik SIMPAN dan Coba lihat ke blog anda dan taraa, sekarang anda telah mengetahui bagaimana Caranya Membuat Widget Random Post Keren Atau Cara Membuat Widget Artikel Acak Di Blog Rapi Dan Keren Banget Artikel Acak Dan Random Post iNI berfungsi setiap kali kalian me-refresh halaman yang kalian baca maka pada widget tadi akan langsung mengacak artikel artikel anda secara otomatis bisa anda kreasikan juga biar keren dan responsive Dan Terima Kasih Telah Membaca.. KOMEN AND SHARE YAA

About the author

Kahfie IDN

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

Leave a Comment

4 Comments