Mungkin anda pernah mengunjungi beberapa situs yang menggunakan slidebox recommendation, atau kotak yang bergeser ke samping ketika mouse discroll ke bawah yang berisi tulisan rekomendasi untuk anda.
Langsung saja kalau anda berminat memasangnya ikuti langkah-langkahnya :
- Login ke akun blogger anda.
- Pilih template lalu klik edit template.
NB : back up terlebih dahulu template blog anda agar tidak terjadi hal-hal yang tidak diinginkan
- Cari kode
]]></b:skin>lalu simpan kode dibawah ini tepat diatasnya.
/* Related Post with Sliding CSS by Kang Ismet*/
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;width:20px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.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:20px;margin:3px;padding:0px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:20px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:0px;padding-top:10px;list-style:none;}
.related-post-style-2 li {margin-left:-10px;style:none;}
.related-post-style-2 li {padding:0 0px 0px 0px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
/* End CCSS Related Post with Sliding */-
Cari kode
</head>lalu simpan kode dibawah ini tepat diatasnya.
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-360px'});
}
});
$(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':'-350px'});
kislidingbox.fadeOut('slow');
})
minimize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
minimize.show();
})
});
</script>-
Selanjutnya cari kode
<div class='post-footer'> . -
Lalu simpan kode dibawah ini tepat dibawahnya.
<!-- Related Post with Sliding by Kang Ismet -->
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</span>
<span><a href='javascript:void(0);' id='kislidingbox-close' title='Exit'><img alt='Exit Button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMT0725VZHfTcvtgtr-SWYgwZZKI_Pch6G6gtZ3bzIyw6UIkQXexSVlMvHovD21WxqC9_sUaDGR35BBZJl32NiZQNt0b0torm73_Um9_RV6ZEXSGb1x-RhyhgwpyI5VEIwjTWIS7P/s1600/close.png' title='Exit'/></a></span>
<span><a href='javascript:void(0);' id='kislidingbox-minimize' title='Minimize'><img alt='Minimize Button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmcK_tp5szVUEZd24iVLXIj7nRk3966ERJ06_WySNhSPP-yzI7xeZ_JKpEm1_NU522GWyISUoKrlYhyLj1uuwwRLJiaOKj5sRoWiCG_6zXOrpqi_AD5-yH_lTCNNaSr_-VfyfpKgJ/s1600/minimize.png' title='Minimize'/></a></span>
<span><a href='javascript:void(0);' id='kislidingbox-maximize' title='Maximize'><img alt='Maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cV6eAfhPAVNhk4FEXW5Vq_zlnFQikaoY9Wh5Z5WGU9VcKflIuKoPd4ERKfZk565w_00HWgoUIvTWwFFPgigpBHrxWRdZS-CJWJxkyhd-qDsRhKBM_mq7b_VJ6CX2zMvbOzxjFKdN/s1600/maximize.png' title='Maximize'/></a></span>
</div>
<div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4></h4>",
numPosts: 2,
summaryLength: 0,
titleLength: "auto",
thumbnailSize: 45,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "sliding-tab",
newTabLink: false,
moreText: "",
widgetStyle: 2,
callBack: function() {}
};
</script>
<script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>
</div>
</div>
</b:if>
<!-- Related Post Widget End --> - Lalu simpan.
Semoga berhasil,
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Slide Box Rekomendasi Di Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
