Rahman Zie Blog Informasi Internet , Tips dan Sharing: Cara Memasang Slide Box Rekomendasi Pada Blog

Tutorial cara memasang Artikel Rekomendasi di Blog

Slide Box merupakan widget yang sama seperti widgt postingan pupuler , hanya saja widget ini berbeda ketika pengunjung menggulung halaman websitenya ke bawah maka akan muncul widget pop up untuk menjadi rekomendasi ke pada pembaca, Tujuanya adalah agar pengunjung blog membaca artikel kita dan betah mengujungo artikel kita, trik sederhana ini ternyata mampu menambah pangunjung blog untuk berlama lama pada blog kita.

berikut tutorial nya

1. Silahkan Sobat Login ke halaman blog sobat > Buka Template > Pilih Edit HTML

Silahkan tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Widget Rekomendasi */

#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}

.chslidingbox-title{background:#9eb2c0;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:130%;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}

.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

2. Setelah itu salin kode di bawah ini sebelum </body>

<b:if cond='data:blog.pageType == "item"'>

//<![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>

3. Setelah itu silahkan anda cari kode <data:post.body/> lalu tambahkan kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<span style='float:left;margin:0 15px;'>Rekomendasi Untuk Anda</span>

</div>

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/Arlina-Design/redvision/master/sliderekomendasi.js' type='text/javascript'/>

</div>

</b:if>

silahkan simpan template , refresh dan lihat hasilnya pada blog sobat

Note: Banyaknya postingan bisa diganti pada kode numPosts: 2

Jika berhasil akan seperti contoh di bawah ini