Membuat Random post dengan Slider di sudut blog ✔

Lihat Dulu Gambar di bawah ini :


Seperti yang di perlihatkan dengan gambar di atas, yang ane ambil scrennshot dari blog ane sendiri.. sebenarnya cara membuat Random Post itu sudah banyak yang tau, namun disini ane share Random Post dengan Effect Slider di sudut bawah blog,, Tutorial ini ane ambil dari blog nya Kompi Ajaib dan blog nya Kang Ismet.. Untuk lebih jelas, sobat Coba scroll pada halaman blog ane, putar ke bawah maka nanti Widget Random post ini akan muncul secara otomatis..
nah untuk sobat yang mau pake random post seperti itu.. silahkan pergunakan Kode2 di bawah ini , dengan langkah pemasangan seperti berikut :
1. Masuk akun blogger
2. Edit HTML
3. Tambahkan Kode CSS di bawah ini kedalam baris <b:skin>
<style type='text/css'> .large-div{ width:300px; height:10000px; } .slidebox { position:fixed; bottom:100px; right:-300px; width:290px; height:150px; font-size:30px; color:white; background:#333; transition:all .4s ease-in-out; padding-right:10px; border-radius:3px 0 0 3px; } .header-slidebox{ position:absolute; top:0; left:0; text-align:left; font-family:Arial; font-size:18px; font-weight:400; background:#505050; border-bottom:1px solid #282828; padding:0 10px; height:30px; width:100%; line-height:30px; border-radius:3px 0 0; } .closeslidebox{ color:#333; position:absolute; top:0px; right:0px; font-family:Arial; font-size:18px; font-weight:700; cursor:pointer; background:#ddd; text-align:center; width:30px; height:30px; line-height:30px; border-bottom:1px solid #282828; transition:all .3s ease-in-out; } .closeslidebox:hover{ background:#cacaca; } #random-posts img{ float:left; margin:0 10px 10px 0; background:#FFF; width:130px; height:100px; padding:0; transition:all .3s ease-in-out; border-radius:3px; } #random-posts img:hover{ opacity:.7; } ul#random-posts{ list-style:none; margin-top:40px; margin-left:-30px; font-family:Arial; font-size:16px; line-height:1.2em; } ul#random-posts li a{ color:#eee; text-decoration:none; } .readmorerandom a{ position:absolute; bottom:0; right:0; font-family:Arial; font-size:14px; font-weight:400; background:#505050; text-align:center; display:block; padding:2px 8px; transition:all .3s ease-in-out; color:#eee!important; border-radius:3px 0 0 } .readmorerandom:hover a{ color:#333!important; background:#cacaca; }
4. setelah itu tambahkan Javascript dan Kode Jquery di bawah ini di atas kode </head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 400) { $('.slidebox').stop().animate({ right: '0px' }); } }); $(function() { $('.closeslidebox').click(function () { $('.slidebox').css({right:'-300px'}); $('.slidebox').fadeOut(); }); }); });//]]> </script>

5. Untuk selanjutnya Copy Code HTML berikut di mana saja terserah sobat
<div class="large-div"></div> <div class="slidebox"> <div class="header-slidebox">Recommended For You</div> <ul id='random-posts'> <script type="text/javascript"> var rdp_numposts=1; var rdp_snippet_length=100; var rdp_info='no'; var rdp_comment='Comment'; var rdp_disable=''; var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"http://code-html-untuk.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum}; </script> <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)+"…";};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://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');document.write('<div class="readmorerandom"><a href="'+rdp_posturl+'" rel="nofollow" title="Read More">Read More</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=\"http://code-html-untuk.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')}; </script> </ul> <div class="closeslidebox">×</div> </div>
6. Simpan Template
7. Selesai
Ganti URL http://code-html-untuk.blogspot.com/ dengan URL blog Sobat... Thanks To Kang Ismet and Kompi Ajaib Semoga bermanfaat (^_^)

---