Cara Memasang Slide Box Rekomendasi pada Blog

9:56 PM
Share:

Prodeku - Apa itu Slide Box Rekomendasi? Merupakan sebuah widget yang memiliki fungsi untuk memberikan beberapa artikel yang direkomendasikan kepada pengunjung. Bagaimana cara kerjanya? Cara kerja dari widget ini yaitu, apabila pengunjung membaca sampai setengah artikel, widget ini akan muncul seperti popup pada bagian kanan bawah bersamaan dengan tombol back to top.

Baca juga : Cara Membuat Syntax Highlighter pada Postingan Blog

Sesuai dengan pembahasan di atas, kali ini saya akan membahan tentang Cara Memasang Slide Box Rekomendasi pada Blogger kesayangan anda. Bagi anda yang ingin memasang widget ini, silahkan ikuti tutorial dibawah ini.

Memasang Widget Slide Box Rekomendasi

1. Buka akun Blogger anda.
2. Pilih menu Template > Edit HTML
3. Tambahkan kode berikut ini sebelum ]]></b:skin> atau </style>

/* Widget Rekomendasi Artikel*/
#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:#009688;
 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:#009688;
 transition:all .4s ease-out;
}
 a:hover.related-post-item-title{
 color:#009688;
 text-decoration:underline;
}
.related-post-style-2 .related-post-item-summary{
 display:block;
 overflow:hidden;
}
4. Kemudian tambahkan kode dibawah ini sebelum </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
5. Setelah itu, cari kode <data:post.body/>, tambahkan kode dibawah itu tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Rekomendasi Untuk Anda</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#x00D7;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#x2212;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>&#x2b;</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'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://googledrive.com/host/0B3KFziYx84HwXzZOU2NuRzI0aHM' type='text/javascript'/>         
</div>
</div>
</b:if>
Jika Slide box tidak muncul, anda dapat meletakkan tepat diatas </b:includable> yang ada pada <b:includable id='post' var='post'> seperti ini :

<b:includable id='post' var='post'>
...
...
...
...
<-- LETAKKAN KODE DI SINI -->
</b:includable>
6. Langkah terakhir, klik Simpan Template dan lihat hasilnya.

Demikian tutorial tentang Cara Memasang Slide Box Rekomendasi pada Blog dengan mudah. Terus ikuti tutorial lainnya hanya di Prodeku. Selamat mencoba!
Labels:
Share: