Cara Membuat Slide Box Rekomendasi Artikel di Blog - Deny Listianto

August 22, 2018

Cara Membuat Slide Box Rekomendasi Artikel di Blog

Cara Membuat Slide Box Rekomendasi Artikel di Blog

Kali ini saya akan berbagi tutorial Cara Memasang Slide Box Rekomendasi di Blog, yang tampilanya cukup menarik dan elegn untuk dipasang di blog sobat.

Memasang widget slide box rekomendasi berdasarkan label cocok untuk blog niche berita dan banyak juga blog pribadi yang memasangnya. Selain itu dengan memasang widget ini akan memberikan pilihan kepada pengunjung untuk membuka artikel lain yang menurutnya menarik dan bermanfaat.

Keuntungan yang didapat ketika memasang widget ini adalah Bounce Rate yang meurun dan juga page view di postingan anda bisa bertambah dan otomatis pengunjung blog menjadi lebih betah di blog anda.

Cara kerja dari widget ini hampir sama dengan widget related post yang biasa terpasang di bawah artikel blog, yang akan memunculkan beberapa postingan terkait berdasarkan label. Widget ini terletak di samping kanan bawah dan scroll kebawah otomatis widget Slide box ini akan meuncul dari samping kanan dengan sendirinya.

Bagi sobat yang ingin memasang widget slide box rekomendasi ini, silakan simak tutorial Cara Memasang Slide Box Rekomendasi di Blog di bawah ini :

Cara Memasang Slide Box Rekomendasi di Blog


Login ke Blogger, lalu buka menu Tema setelah itu Edit HTML Tambahkan kode di bawah ini sebelum kode ]]></b:skin> atau </style>.

/* Widget Slide Box 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 2px 1px 0 rgba(0,0,0,0.03);transition:all .4s ease-out;}
.chslidingbox-title{background:#f24a4a;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:-25px;padding-top:15px;list-style:none;border:1px sold #eee;}
.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;}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden;}

Kemudian salin kode dibawah ini dan letakan sebelum kode </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>

Selanjutnya cari kode <data:post.body/> dan tambahkan kode di bawah ini tepat di bawah 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://cdn.rawgit.com/Arlina-Design/redvision/master/sliderekomendasi.js' type='text/javascript'/>         
</div>
</div>
</b:if>

numPosts: 2 adalah Jumlah postingan yang akan ditampilan, jika ingin menambah jumlah postingan yang akan ditampilkan sobat juga harus mengatur tinggi widget slide boxnya

Atau bisa juga ditambahkan di atas kode </b:includable> post seperti ini :

<b:includable id='post' var='post'>
...
...
...
<-- LETAKKAN KODE DI SINI -->
</b:includable>

4. Selanjutnya Simpan Tema dan lihat hasilnya.


Demikian tutorial Cara Memasang Slide Box Rekomendasi di Blog, semoga bermanfaat dan Teerimakasih...

Source : https://www.arlinadzgn.com/2015/12/cara.memasang.slide.box.rekomendasi.di.blog.html
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo