Cara Membuat Random Post Slide di Blog

Setelah sebelumnya emu-id share mengenai cara membuat recent post bergambar bergerak, pada kesempatan ini emu-id akan share kepada sobat mengenai tutorial blog yaitu membuat random post yang bisa slide secara manual. Artinya random post ini akan tampil di blog sobat ketika anda pengunjung yang mengkliknya. Walaupun begitu dari segi penampilan random post slider ini cukup keren dan sangat cocok untuk ditampilkan pada blog sobat yang memiliki banyak artikel.

Random post ini sangat berguna bagi sobat karena dapat membuat pengunjung mengetahui artikel-artikel yang telah sobat tulis sejak lama. Walupun pengunjung bisa aja masuk ke daftar isi namun, dengan adanya random post ini pengunjung blog sobat secara praktis dapat melihat artikel-artikel lama maupun baru dari blog sobat. Langsung saja berikut cara membuat random post slider :

Cara Membuat Random Post Slide di Blog

1. Silakan masuk ke akun blogger sobat.
2. Masuk ke bagian tata letak yang ada pada blog sobat.
3. Tambahkan gadget. Untuk lokasinya sesuai keinginan sobat karena ini tidak akan berpengaruh pada tampilan.
4. Pada menu gadget pilih HTML/JavaScript
5. Masukkan script dibawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
#toggle-bar{z-index:99999999;background: -webkit-linear-gradient(top, #333, #000); background: -moz-linear-gradient(top, #333, #000); background: -ms-linear-gradient(top, #333, #000); background: -o-linear-gradient(top, #333, #000); background: linear-gradient(to bottom, #333, #000);color: #fafafa;height:50px;width:100%;position:fixed; top:0; left:0;margin-bottom:50px; }
#toggle-bar-inner {line-height:50px;width:310px;margin:auto;text-transform:uppercase;font-size:12px;font-family:Verdana, Geneva, sans-serif;}
#toggle-bar-inner img {float:right; width:50px;cursor:pointer;}
.toggle-posts{width:100%;min-height:200px auto;background:#222;color:#fafafa;box-shadow:0px 3px 4px #ccc;-webkit-box-shadow:0px 3px 4px #ccc;position:absolute;display:none;}
#toggle-posts-inner{width:980px;margin:auto;}
ul#toggle-random li {width:150px;height:auto;list-style:none;float:left;margin:auto;margin-right:5px;}
.title-toggle h5{font-weight:normal;}
ul#toggle-random li img {opacity:0.8;width:100px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; border:3px solid #000;margin-top:5px;}
ul#toggle-random li img:hover {opacity:1;}
body{margin-top:50px;}
.credit img{position:absolute;top:15px;left:10px;width:20px;float:left;}
.arrow-rotate {transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);transition:all ease .5s;-moz-transition:all ease .5s;-webkit-transition:all ease .5s;-o-transition:all ease .5s;-ms-transition:all ease .5s;}
.post-show {display:block;animation: toggle .6s;-webkit-animation: toggle .6s;-webkit-transition:all ease .5s;transition:all ease .5s;}
@keyframes toggle {from {transform:scale(0,0);-moz-transform:scale(0,0)} to {transform:scale(1,1);-moz-transform:scale(1,1)}}
@-webkit-keyframes toggle {from {transform:scale(0,0);-webkit-transform:scale(0,0);} to {transform:scale(1,1);-webkit-transform:scale(1,1)}}
</style>
<script>
$(document).ready(function(){
$("#arrow").click(function(){
$("#arrow").toggleClass("arrow-rotate");
$(".toggle-posts").toggleClass("post-show");
});
});
</script>
<div id="toggle-bar">
<a class="credit" href='http://emu-id.blogspot.co.id/' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaH9_leOKYUjYVgx_3d5Ie7W1Df82pAA-C9cClbB5FLChFTYnyHC1SoYyjShNcWdq_V5k-AKoLXInFCKgic4uiBT6gYvVjzYbv7FZ1QAq70UO2mGhF8I45Q58vRkBIhGYeP6-Q5MVyM5Y/s1600/getthis.png'/></a>
<div id="toggle-bar-inner"><img id="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85DaM-rfiEtiHmEV7lDznlbmkFUthHv2lR9f-asoxoimMZvmFUFniVbGusTtOIupZMzRaM4f2NO_IAvXYx2cjc0tHXHBm5t18nfKA6FvibrMQ87QXZPjiQ90eynINMW86tXvQJc3WK40/s1600/arrow.png" /> Sudah baca artikel yang satu ini?<i class="fa fa-hand-o-right"></i>
</div><!--Inner-->
<div class="toggle-posts">
<div id="toggle-posts-inner">
<ul id="toggle-random">
<script type="text/javaScript"> var rdp_numposts = 6; var rdp_snippet_length = 0; var rdp_comment = 'Comments';var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.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 b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhghI4vZ90jjdoD8Bclgr1OLHS3Ugz3pa3H7A1Ypgb3GJ-f2q4k9YjPd_qW1anCxJOEFPkn7emgJq7R_NJ9239rKmf_Xij0cJd16o5uID0ANGQ9qwwBIynQMA_tXjADyZPvL2jaRagL6aox/s1600/no-image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="title-toggle"><h5>'+m+"</h5>")}}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>
</ul>
</div>
</div>
</div>

6. Terakhir simpan. Bila berhasil widget random post akan tampil diatas blog sobat seperti gambar diatas.
Keterangan :
Sobat tidak perlu memberi nama pada widget buatan sobat.
Tulisan warna biru bisa sobat ganti dengan kata-kata pendek susuai keinginan sobat.

Nah, mudah bukan cara membuat random post yang bisa slider manual. Jangan lupa untuk selalu mengunjungi emu-id agar tahu tutorial-tutorial blog lainnya yang keren.