TutorNesia ~ Sliding Box ini masih ada kaitannya dari Sliding box dari Kang Ismet, tapi sudah saya modif ulang dengan gaya tersendiri. Silahkan lihat demo di blog ini setelah di scroll kebawah (Kalau belum ditukar ya).
01. Pasang Font ini dibawah <head>, Jika blog anda sudah terpasang Font ini silahkan abaikan langkah ini.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>02. Simpan kode ini di atas ]]></b:skin> atau </style>
/* CSS Sliding Box Dengan Tiga Artikel Terkait by Leony Li*/
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0px 1px 5px -1px rgba(82,65,82,0.43);transition:all .2s ease-in;border-radius:3px 0px 0px 3px;width:395px;height:183px;position:fixed;overflow:hidden;border:none;right:-400px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:#04043C;color:#fff;display:block;height:30px;width:100%;font: 24px Oswald;text-transform:uppercase;text-shadow: 0px 1px 0px #000;padding-right:25px;padding-bottom:12px;}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:22px;margin-top:-5px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.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;}
#artikel-terkait-leonyli a{color:#000;text-decoration:none;}
#artikel-terkait-leonyli a:hover,a:active{color:#444;text-decoration:underline;}
#artikel-terkait-leonyli ul {margin-bottom: 0px; padding:0px;list-style:none;}
#artikel-terkait-leonyli ul li{float:left;height:98px;margin:-30px 10px 10px 0;width:116px;font: 11px Oswald;}
#artikel-terkait-leonyli img{width:120px;height:70px;margin-left:-1px;}
#artikel-terkait-leonyli img:hover{opacity:0.7;}
#artikel-terkait-leonyli ul li:nth-child(3n+3){margin-right:0;}
#BounceToTop{float:right;margin-top:2px;margin-right:-10px; cursor:pointer;display:none}
/* End CCS Sliding Box Sliding */03. Simpan Javascript ini di atas </head>
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-400px'});
}
});
$(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':'-400px'});
kislidingbox.fadeOut('slow');
})
minimize.click(function(){
kislidingbox.toggle()('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggle()('hide');
$(this).hide();
minimize.show();
})
});
</script>04. Langkah ini adalah langkah paling sulit, cari kode <div class='post-footer'>, Simpan kode ini di bawah <div class='post-footer'> yang ke 2. Namun jangan hanya fokus pada <div class='post-footer'>, anda juga bisa pasang pas dibawah artikel terkait di blog anda yang sebelumnya sudah anda pasang di blognya.
<!-- Sliding Box Dengan Tiga Artikel Terkait by Leony Li -->
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float:left;margin:5px 0 0 15px;'>Artikel Terkait...</span>
<span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_55WeG6Qs_RneelBvYNc7U0QUr07sjUlM_LY0wLnKaFTKNn7XY9uc0Jugp49kpaZCmqcW2yEmI63aP0-xpNBTptiPxGk3OzvYS1ZaDW8w0kxnYG5R1n7GRC7ZZdQhaFVaD7G-kuSrhRa/s1600/close-box.gif'/></a></span>
<span><div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgroFJogbc7XGUDP-zDhslnG3OYooDWP-eKYU8yRxWjsoxaN5RRlornBc0JFFfH5XDzO8p_DZCeG1E4IytN6wrQ4ttcGeVSOAduOWn6xk1KqAaWsi3ow8GpZIk3KjJnZjpUSP6g3RgEmC09/s1600/minim-box.gif'/></div></span></div>
<div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == "item"'>
<div id='artikel-terkait-leonyli'>
<script type='text/javascript'>//<![CDATA[
var ry='';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPCjm1vHt5AU1iG8v2CmkEmLc4T1nYmUl66vyAG5-Rjk2lJp6joCOj7MmgygyCnB_qTh-6ldQ3RRpkvCmMMb5tOdrdBxjAsqihc-JO2TCCmiozXHRWkqRhqWk9IpBiqPWwXtSTszpCUeK/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s200/")+'" title="'+titles[c]+'"/></a></div><a href="'+urls[c]+'" title="'+titles[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('artikel-terkait-leonyli').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=19"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
</b:if>
</div>
</div>
</b:if>
<!-- Sliding Box Widget End -->05. Sliding Box ini sudah ada Back To Top, jadi jika ada back To Top yang sudah anda pasang silahkan Copot saja. Jika ada pertanyaan silahkan tinggalkan komentar dibawah ini.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.