Cara Mudah Membuat Horisontal Random Post dengan Efek Show Hide di Blogger

Pada kesempatan ini admin akan membagikan lagi sebuah widget random post untuk kamu pengguna blog Blogger.  Kalau biasanya kita meletakan widget random post di sidebar/samping blog, Widget yang satu ini akan tampil horisontal di paling atas halaman dan tampil di seluruh halaman blog. 

Secara default random post ini tidak langsung muncul, kamu harus mengarahkan kursor mouse dan klik kearah widget Blogger ini. Jadi, untuk menampilkan postingan random post kamu harus mengklik tandah panah pada widget ini, untuk lebih jelasnya lihat saja demonya di bawah.

Horizontal Random Posts Widget For Blogger

DEMO SHOW

Cara memasang widget Random Posts Horisontal di Blogger

1. Di Blogger dan pilih blog yang ingin di pasangi widget ini
2. Pilih Layout kemudian pilih Add a gadget dimana kamu ingin meletakan widget
3. Muncul pop-up window, kemudian pilh HTML/JavaScript:

Tata Letak → Tambah Gadget → HTML / Javascript

4. Masukan kode di bawah ini pada kotak yang muncul

Kode Widget :

<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='https://thesisnew.blogspot.com/' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULwGhNVPOsn8NJbs5JQQL9HToxOPt8dmhICgzn2AjWg7A5Dyphh78nt2jLVndRMiM33oFw__3srdmPuqie3eZLkUa7aKeaccYk3JAnkpsCaTM6HFDi7byWcvvosLRZcWqjSnij4wHXqQ/s1600/getthis.png'/></a>
<div id="toggle-bar-inner"><img id="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasuggJ6gw2YdaETJLTp82cU0QoGdrax3RdKwEDcitoeFtPtilqlhj3whB2yahQfNyvGVb_VO68nPgrqC3CmtjoxsLjegF9rr1QGyZxfmVX9cx1qAualWlmLJEn7qjLCCI9h_zCB0lG9A/s1600/arrow.png" /> sudah lihat yang ini (klik aja)? <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="https://thesisnew.blogspot.com/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/AVvXsEgB86LfB9f96AXR-J5TUwFbddN931JuFm2IcK8IF4yw3iyooqb_J0bLcztooOsUFCTFqSAF6L1RZf0b6AfB0KLFwestitN3hvFiE8x_gUiCkFYQ9wH2-69iejm62aExuisFcKr9ZcLhN8PC/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="https://thesisnew.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script>
</ul>
</div>
</div>
</div>

Jika sudah ada kode Jquery versi berapapun (kode warna merah) di blog kamu maka kode ini tidak perlu dipasang lagi. Ganti link blog lain dengan link blog milikmu

5. Save dan selesai. 

Selamat, kini Horisontal Random Posts telah terpasang di blog kamu.