Rekomendasi slide box yang saya bagikan kali ini berfungsi untuk menawarkan posting lain dari halaman yang terdapat dalam blog kita. Layaknya related pada umumnya, widget ini akan menampilkan thumbnail gambar dan title posting yang saya beri sedikit animasi yaitu webkit-animation pada saat hover.
Penempatan pada halaman adalah disisi kanan bawah dan akan muncul pada saat scroll mouse kebawah dengan pengaturan yang terdapat pada script, widget ini dilengkap juga dengan tombol close dan tombol minimalis sehingga tidak akan mengganggu visitor.
Cara menempatkannya adalah dengan terlebih dahulu harus masuk Edit HTML pada Template, kemudian masukkan CSS/style dibawah ini sebelum ]]></b:skin> atau </style>.
/* Rekomendasi Slide */
#chslidingbox {
background: #fff;
width: 100%;
max-width: 355px;
height: 185px;
position: fixed;
overflow: hidden;
border: none;
right: -360px;
z-index: 99;
text-align: left;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.03);
transition: all .4s ease-out;
border-radius:4px 0 0 4px;
}
.chslidingbox-title {
background:#fb5520;
background:-moz-linear-gradient(left,#fb5520 0,#fb5520 44%,#FF1744 100%);
background:-webkit-linear-gradient(left,#fb5520 0,#fb5520 44%,#FF1744 100%);
background:linear-gradient(to right,#fb5520,#fb5520 44%,#FF1744 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb5520', endColorstr='#fb5520', GradientType=1 );
color: #fff;
display: block;
height: 45px;
line-height: 45px;
width: 100%;
font-size: 14px;
text-transform: capitalize;
font-weight: 700;
letter-spacing: .5px
}
.chslidingbox-title span a {
font-family: initial;
float: right;
height: 40px;
margin: 0 0 0 15px;
text-align: center;
color: #fff;
font-size: 20px
}
a#chslidingbox-close,
a#chslidingbox-close {
margin-right: 15px;
}
.chslidingbox-title > span > h2 {
font-size: 20px!important;
font-weight: normal!important;
}
.chslidingbox-container {
border: none;
float: left;
width: 100%;
height: auto;
margin: 3px
}
.chslidingbox-container > div {
border: none;
margin: 3px 0;
padding: 10px 0
}
.chslidingbox-container > div > span {
font-size: 14px;
}
.show {
bottom: 84px;
}
.hide {
bottom: -145px;
}
.related-post {
font-size: 70%
}
.related-post h4 {
font-size: 150%;
margin: 0 0 .5em;
}
.related-post-style-2 {
margin-top: -20px;
padding-top: 15px;
list-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;
border: 0;
padding: 0;
border-radius: 3px;
float: left;
margin: 2px 10px 0 0
}
.related-post-style-2 .related-post-item-title {
font-weight: 700;
font-size: 120%;
line-height: normal
}
a.related-post-item-title {
color: #95a5a6;
transition: all .4s ease-out;
}
a:hover.related-post-item-title {
color: #2ecc71;
text-decoration: none;
-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0
}
.related-post-style-2 .related-post-item-summary {
display: block;
overflow: hidden;
}
Letakkan script dibawah ini tepat diatas kode </body>.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
$("#chslidingbox").css($(this).scrollTop() > 400 ? {
right: "0px"
} : {
right: "-360px"
})
}), $(document).ready(function() {
var i = $("#chslidingbox"),
s = $("#chslidingbox-close"),
o = $("#chslidingbox-minimize"),
l = $("#chslidingbox-maximize");
l.hide(), s.click(function() {
i.css({
right: "-350px"
}), i.fadeOut("slow")
}), o.click(function() {
i.toggleClass("hide"), $(this).hide(), l.show()
}), l.click(function() {
i.toggleClass("hide"), $(this).hide(), o.show()
})
});
//]]>
</script>
</b:if>
Kemudian letakkan kode dibawah ini tepat dibawah kode <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='chslidingbox'>
<div class='chslidingbox-title chslidingbox-www'>
<span style='float:left;margin:0 15px;'>Halaman Rekomendasi</span>
<span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
</div>
<div class='chslidingbox-container'>
<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: true,moreText: "",widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.rawgit.com/ardezign/js/master/Rekomendasi-Slide.js' type='text/javascript'/>
</div>
</div>
</b:if>
<b:includable id='post' var='post'>
...
...
...
<-- Kode Diatas -->
</b:includable>
Saya juga siap menerima kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.
Show Parser Hide Parser