Cara Membuat Widget Random Post di Blog

Cara Membuat Widget Random Post di Blog - Widget Random post perlu ada di setiap blog,kenapa ? karena dengan adanya widget random post dapat menjadikan trafik blog kalian naik karena pastinya pengunjung akan melirik ke bagian beberapa daftar artikel menarik yang ada di dalam daftar random post.

Random post bisa dibilang sebagai pengganti dari widget popular post.Itulah kenapa kalau kalian mempunyai trafik blog yang tinggi dan kalian memasang widget tersebut maka pengunjung akan melirik dan penasaran terhadap daftar artikel yang ada di dalam daftar widget random post yang kalian pasang.

Di artikel kali ini sebenarnya ada dua desain widget random post yang bisa kalian coba,yaitu random post yang muncul hanya dengan judul postingan dan yang kedua yaitu random post yang muncul dengan judul dan tumbnail poatingan artikel yang akan muncul.di widget random post.

Cara Membuat Widget Random Post di Blog

Kali ini systemauni akan membahas tentang cara membuat widget random post dan kalian bisa mengikuti langkah langkah nya di bawah ini.

Cara membuat widget random post tanpa tumbnail (Hanya judul postingan)

1.Login ke blogger

2.Buka dashboard blog

3.Pilih Tata Letak

4.Tambah lan widget HTML/JavaScript di bagian sidebar

5.Widget HTML/JavaScript beri nama Random post dan kalian paste kan script random post tanpa tumbnail berikut ke dalam nya.

<style scoped='' type="text/css"> #arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} #arlina-random li:last-child{border-bottom:0;} #arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline} </style> <div id='arlina-random'>Memuat...</div> <script> //<![CDATA[ // Random Post Widget var homePage = 'http://www.domain.com', maxResults = 10, containerId = 'arlina-random'; function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffleArray(arr) { var i = arr.length, j, temp; if (i === 0) return false; while (--i) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; } function ArlinaRandomPosts(json) { var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); } function randomPosts(json) { var link, ct = document.getElementById(containerId), entry = shuffleArray(json.feed.entry), skeleton = "<ul>"; for (var i = 0, len = entry.length; i < len; i++) { for (var j = 0, jen = entry[i].link.length; j < jen; j++) { link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; } skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; } ct.innerHTML = skeleton + '</ul>'; } document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=ArlinaRandomPosts"></scr' + 'ipt>'); //]]> </script>

setelah itu klik simpan dan kalian bisa lihat tampilanya di blog kalian

Note:Untuk tulisan http://www.domain.com kalian ganti dengan nama domain yang kalian gunakan dan untuk angka 10 kalian bisa atur sesuka kalian.Angka 10 menunjukan jumlah artikel yang akan muncul di dalam random post jadi kalian bisa mengaturnya sesuka hati dan sesuai selera.

Cara membuat random post di blog dengan judul dan tumbnail

1.Login ke blogger

2.Buka dashboard blog

3.Pilih Tata Letak

4.Tambah lan widget HTML/JavaScript di bagian sidebar

5.Widget HTML/JavaScript beri nama Random post dan kalian paste kan script random post dengan judul dan tumbnail berikut ke dalam nya.

<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 = 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/AVvXsEi1RVu10ZhfZP7GaF9CtVr_FJ8wXTfTlSVlU_HG6T__zxQrijAUAF_7BsWCUkzQHw6_2c1QaPFtCKpVHRtW2aOXegQNJlQzJndHHvKkoV3RmJC_dRk2d1MXQ6JgbTiTBr8dzB43n_7xrFM/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>

Setelah itu kalian klik simpan dan buka blog kalian untuk melihat tampilan random post nya.

Note: ganti angka 5 yang berada dalam var randomposts_number = 5 dengan berapa jumlah artikel yang ingin kalian munculkan di dalam random post

Nah karena ada satu lagi script untuk membuat random post maka kurang komplit kalau tidak sekalian di bagikan dalam artikel tentang cara membuat random post di blog ini.

Cara membuat Random post di blog berdasarkan Label

1.Login ke blogger

2.Buka dashboard blog

3.Pilih Tata Letak

4.Tambah lan widget HTML/JavaScript di bagian sidebar

5.Widget HTML/JavaScript beri nama Random post dan kalian paste kan script random post di blog berdasarkan label postingan berikut ke dalam nya.

<script type="text/javascript"> var acakarray = new Array();var l=0;var flag; var numofpost=5; function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}} if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>'); for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default/-/Label?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Note:Ganti angka 5 yang ada pada var numofpost  dengan total artikel yang ingin kalian munculkan di dalam daftat random post dan kalian ganti Label dengan label postingan blog kalian yang ingin di tampilkan (Besar kecil huruf harus sama dengan yang ada di label)

kesimpulan

Ketiga script di atas bisa kalian pilih dan kalian ingin menggunakan mana yang menurut kalian itu lebih keren dan indah di pandang saat kalian melihatnya,pastinya user friendly dan tampilan blog tidak menjadi berantakan.

Sekian artikel tentang Cara Membuat Widget Random Post di Blog.

Berbagi :