Membuat Widget Slide Box Artikel Rekomendasi

Artikel Rekomendasi - Selamat pagi/siang/sore/malam :v , kali ini saya akan membagikan tutorial Cara Membuat Widget Artikel Rekomendasi, Widget Akan Muncul jika blognya kita scroll ke bawah. Caranya sangat mudah mari ikuti tutorialnya:

1. Log in ke akun blogger anda

2. masuk ke menu template, lalu pilih Edit HTML

3. Copy kode dibawah ini lalu pastekan diatas ]]></b:skin> atau </style>

/* EEEEEEEEEEEEEEEAAAAAAAAAAAAAAAAAAAAAAAAAAAA */ 

#kislidingbox{background:#fff;border:1px solid #333;transition:all .3s ease-in;width:360px;height:143px;position:fixed;overflow:hidden;border:none;right:-380px;z-index:9999;text-align:left!important;letter-spacing:0;box-shadow: -3px 4px 16px -12px rgba(59,47,59,1);margin-bottom: 100px;}
.kislidingbox-title{background:#222;border-bottom:4px solid #2c3e50;padding-bottom:10px;color:#fff;display:block;height:30px;width:100%;font:bold 24px 'Oswald';padding-right:25px;text-transform:uppercase;}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-top:-4px;margin-right:15px;position:relative;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
#sliding-tab{margin-top:-71px;}
#random-posts img{float:left;margin-right:5px;
width:110px;height:65px;background:#F5F5F5;padding:2px;transition:all 400ms ease-in-out;}
#random-posts img:hover{opacity: 0.7;transition:all 400ms ease-in-out;}
ul#random-posts {list-style-type:none;padding:0px;}
#random-posts a {font:16px 'Arimo';color:#333;padding:5px;}
#random-posts a:hover {color:#007ACC;text-decoration:underline;}
.rp-snippet {font-size:0px;background:none;padding:5px;margin-right:8px;}
#random-posts span {}
.rp-info {font:12px Arimo;color:#999;margin-top:4px}
#random-posts li {margin-bottom:5px;border-bottom:1px solid #EEEEEE;padding:4px;}

4. Lalu masuk ke menu Tata Letak >> Tambah Widget >> HTML/JavaScript

5. lalu masukkan kode ini dibawah ini

<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() > 500) {
            $('#kislidingbox').css({'right':'0px'});
        } else {
            $('#kislidingbox').css({'right':'-380px'});
        }
    });
   
$(document).ready(function(){
 var kislidingbox      = $('#kislidingbox');
    var closed      = $('#kislidingbox-close');
    var minimize    = $('#kislidingbox-minimize');
    var maximize    = $('#kislidingbox-maximize');
   
    maximize.hide();
   
    closed.click(function(){
        kislidingbox.css({'right':'-380px'});
        kislidingbox.fadeOut('fold');
    })
    minimize.click(function(){
        kislidingbox.toggle()('fold');
        $(this).fold();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggle()('fold');
        $(this).fold();
        minimize.show();
    })
});
</script>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float:left;margin:6px 0 0 15px;'>Artikel Rekomendasi</span>
</div>
<div class='kislidingbox-container'>
<div class='wew-post' id='sliding-tab'></div>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=1;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Komentar';
var rdp_disable='Comments Disabled';
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'> 
function random_posts(json){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;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirg80rTV3Rly8Zf02-zLUNr6TgCBOYqzSfofIgzlzXYL80Chj8PWpyge9ErYvHx5vtzPadmN5Iw8MTsdCJtxTSQxqbdpI9xvRlp517EQwGZUQy93SCcHuM0bNo__lHPc4MvKsDnLf8qXA/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><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></div>

5. Simpan Template

Untuk melihat demonya bisa disini : www.iyan-blog.com , Semoga bermanfaat