Slide Recommended Widget With Random Posts Blogger

Slide Recommended Widget
Hal ini tentunya sudah banyak beredar dengan tutorial yang +Kang Ismet buat yang diambil dari jquery sliding statis social widget. Dan kali ini saya akan membuat hal serupa yaitu slide recommended widget yang diisi dengan random posts yang disertai gambar.


Namun kali ini saya akan membuat widget recommended ini dengan jquery yang lebih sederhana sehingga akan lebih mudah dipahami dan gampang dalam penulisannya. Seperti telah kita ketahui, widget ini akan terbuka (slide) di sisi blog ketika halaman postingan di-scroll atau digulung dan disembunyikan kembali dengan menekan tombol close. Silahkan lihat demonya pada link di bawah ini.


Untuk mencobanya, silahkan copy kode-kode di bawah ini.

Kode CSS


.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;
}

Kode HTML Dan JavaScript
Silahkan simpan kode di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='slidebox'>
  <div class='header-slidebox'>Recommended For You</div>
<ul id='random-posts'>
<script type='text/javascript'>
//<![CDATA[
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=\"/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'>
//<![CDATA[
    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)+"&#133;";};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=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
//]]>
</script>
</ul>
    <div class='closeslidebox'>&#215;</div>
</div>

<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>
</b:if>

Widget ini akan muncul ketika halaman blog di-scroll, dan setelah ditutup dengan klik tombol close maka widget ini tidak akan muncul lagi walaupun halaman digulung berulang-ulang.

Jika ingin widget ini bisa keluar lagi ketika halaman di-scroll lagi setelah tombol close diklik, silahkan hapus kode berikut ini pada kumpulan kode javascript yang paling bawah.


$('.slidebox').fadeOut();

Selesai... Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments