Cara Membuat Slide Box Artikel Rekomendasi

Cara Membuat Slide Box Artikel Rekomendasi | INDOBLOG BLITAR -  Kali ini saya kembali update posting, postingan kali ini berjudul Membuat Slide Box Artikel Rekomendasi. Widget ini memiliki manfaat agar memudahkan para pengunjung menemukan lebih banyak artikel yang ada di dalam blog. langsung saja berikut tutorialnya:

Artikel Rekomendasi :

1. Log in ke akun blogger
2. Masuk ke halaman Template >> Edit HTML
3. Letakkan CSS dibawah ini diatas kode ]]></b:skin> atau </style>

#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. Klik simpan template
5. Lalu masuk ke halaman tata letak >> Tambahkan Widget >> Html/JavaScript
6. Masukkan kode 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/AVvXsEiCoSzoqJGyiDsK3Ms0_x-p0PwcNvvGNBdNOqLejDvS7mHXMyxQ8D1whyphenhyphenqAfulyHMBWVaqnES8lGIvSH0WQdusfyz5gNrqxUTLSDuiiX-U210kjf5YjTmU1eAXvW-5lf80f9s37NPIAe9s/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>

7. Simpan
8. Selesai.

Tags : #SCRIPT BLOG

Share This :

INDOBLOG BLITAR