Cara Memasang Slide Box Rekomendasi Di Blog

Baca Juga

Tutorial selanjutnya, akan membuatkan tutorial Cara Memasang Slide Box Rekomendasi di Blog.

Memasang widget slide box rekomendasi berdasarkan label yang akan muncul di sebelah kanan blog memang sangat gampang dan cocok untuk blog yang bertemakan isu atau dapat juga dipasang di blog pribadi. Selain itu dengan memasang widget ini akan memperlihatkan pilihan kepada pengunjung untuk membuka artikel lain yang menurutnya menarik dan bermanfaat.

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.

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

1. Login ke Blogger > Buka Template > Tambahkan instruksi 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. Kemudian salin instruksi di bawah 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>

3. Selanjutnya cari instruksi <data:post.body/> dan tambahkan instruksi di bawah ini sempurna di bawah instruksi <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>

Atau dapat juga ditambahkan di atas instruksi </b:includable> post ibarat ini :

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

numPosts: 2 : Jumlah pos yang akan ditampilan, jikalau menambahkan post teman juga harus mengatur tinggi widget slide boxnya

4. Simpan template dan lihat hasilnya.

Result

Demikian tutorial Cara Memasang Slide Box Rekomendasi di Blog, supaya bermanfaat.