Cara Memasang Slide Box Rekomendasi di blog

adscblog

Kali ini saya akan berbagi pengalaman tentang bagaimana cara membuat Slide Box Rekomendasi di blog,Slide box rekomendasi ini akan muncul dimana ketika pengunjung blog melihat kebagian bawah artikel maka dengan otomatis Slide Box Rekomendasi ini akan muncul tiba tiba di bagian sebelah kanan

Dengan Memasangan SLide Box Rekomendasi ini memungkinkan memberikan pilihan kepada para pengunjung untuk terus menelusuri artikel yang lain nya sehingga dengan begitu kita tidak akan kehilangan pengunjung yang akan terus datang ke blog kita,

Jika saya lihat Cara kerja Slide Box Rekomendasi ini hampir sama bahkan mungkin sama dengan cara kerja nya Related Post yang selalu menampilkan artikel yang sesuai dengan Label artikel atau label terkait di salah satu postingan blog

Namun beda nya Related Post dengan Slide Rekomendasi ini,Jika Related Post bisa menampilkan Artikel dengan Jumlah Banyak,tetapi Slide Rekomendasi ini hanya bisa menampilkan dua artikel saja,walaupun bisa banyak tentu nya harus sedikit kita edit agar tampilan nya sesuai satu sama lain nya

AdaPun Langkah-langkah pemasangan Slide box Rekomendasi ini di antaranya

• Seperti biasa masuk ke akun blogger
• Setelah itu klik template yang berada di bagian kiri blogger
• Kemudian klik Edit Html
• setelah anda berada dalam Peng editan HTml lalu cari kode </b:skin> kemudian silahkan anda letakan kode berikut sebelum kode tersebut,dan untuk memduahkan anda dalam pencarian silahkan anda tekan CTRL+F secara bersamaan

/* 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}

Setelah itu silahkan anda cari lagi kode </body> kemudian silahkan anda letakan kode berikut sebelum kode tersebut

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

Dan langkah terakhir yaitu silahkan anda cari kode <data:post.body/> dan dan letakan kode berikut setelah kode tersebut

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

Kemudian Save template dan lihat hasil nya dengan membuka salah satu artikel kemudian naik kan artikel dan lihat di bagian kanan blog maka Slide Box tersebut akan muncul.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 10 Juni and have 0 komentar