Cara Memasang Slide Box Rekomendasi Pada Blog

Tutorial cara memasang Artikel Rekomendasi di Blog

Slide Box merupakan widget yang sama menyerupai widgt postingan pupuler , hanya saja widget ini berbeda dikala pengunjung menggulung halaman websitenya ke bawah maka akan muncul widget pop up untuk menjadi rekomendasi ke pada pembaca, Tujuanya ialah semoga pengunjung blog membaca artikel kita dan betah mengujungo artikel kita, trik sederhana ini ternyata bisa menambah pangunjung blog untuk berlama usang pada blog kita.

berikut tutorial nya

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

Silahkan tambahkan isyarat 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 isyarat 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 isyarat di bawah ini sempurna 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 balasannya pada blog sobat

Note: Banyaknya postingan bisa diganti pada kode numPosts: 2

Jika berhasil akan menyerupai teladan di bawah ini

Landai

Cara Memasang Slide Box Rekomendasi Pada Blog

Tutorial cara memasang Artikel Rekomendasi di Blog

Menu Halaman Statis