Cara Membuat Slide Box Rekomendasi di Blogger - Mungkin sobat pernah melihat slide box rekomendasi di blog - blog yang pernah sobat kunjungi, setelah sobat meihatnya sobat tertarik kemudian sobat bertanya "Gimana ya kira - kira cara masang di blog saya?". Kali ini saya akan membahas cara membuat slide box rekomendasi di blogger yang akan menghilangkan pertanyaan sobat tentang slide box rekomendasi untuk selamanya.
Sebelum sobat masuk ke cara pembuatannya saya akan memberitahu sobat "untuk apa sih Slide Box Rekomendasi ini?". Slide Box Rekomendasi ini berguna agar pengunjung betah di blog sobat dan membaca banyak artikel di blog sobat secara bersamaan kegiatan di atas dapat meningkatkan trafik blog sobat sendiri.
Untuk contohnya dapat dilihat di gambar yang terletak diatas tersebut.
Bagi sobat yang ingin menerapkan, silahkan ikuti langkah mudahnya :
Langkah 1 : Simpan kode ini di atas ]]></b:skin>
#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:25px;}
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: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;}
.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:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-10px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;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 {}
Langkah 2 : Simpan kode ini diatas </head>
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$(&
} else {
$(&
}
});
$(document).ready(function(){
var kislidingbox = $(&
var closed = $(&
var minimize = $(&
var maximize = $(&
maximize.hide();
closed.click(function(){
kislidingbox.css({&
kislidingbox.fadeOut(&
})
minimize.click(function(){
kislidingbox.toggleClass(&
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggleClass(&
$(this).hide();
minimize.show();
})
});
</script>
Langkah 3 : Simpan kode ini di bawah <div class='post-footer'> yang ke 2
<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='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6QsrahJuSlG_SxFo8FJi62DbwVV97nYurmkS7SUi9fVopPHtEE6qdxBpLJtSPThdjZxD-d2Hj0q63TENWbbowFYI3Z1UPaUMB2dcRtrottptmPZQR6yQLb1JX26nt-zMpFRp2lCq/s1600/close.png' title='close'/></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/AVvXsEhdY1iIzrWM9E8CN-Bt2PgUQeAxoDJ993LChy371GFYJTxum7MQ1jdu22PDuKh-oY2LFA8ZFA6Si29q5rUEyDxJuwLfiFA_SqLb83VFwjgbXJTLA3Pz9RfoCaeM6WoDbjVZMY89zbZe/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/AVvXsEhLgyGNriao1iGOImVsO9PIREohGRGMXM7eG7GDGKbO8ztvdqnms8lfN3DR1qf7rh9pSw1bWoBX9oKXGBh6VAhk5MP8PSv1YcNB9J54vtlMspTcPxp3zS5WaN1W3y9NP7rN0f0_CW19/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 -->
