Cara Menciptakan Slide Box Rekomendasi Artikel Di Blog

Kali ini aku akan menyebarkan 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 info dan banyak juga blog langsung yang memasangnya. Selain itu dengan memasang widget ini akan menunjukkan pilihan kepada pengunjung untuk membuka artikel lain yang menurutnya menarik dan bermanfaat.

Keuntungan yang didapat dikala memasang widget ini yakni Bounce Rate yang meurun dan juga page view di postingan anda sanggup 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 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

Login ke Blogger, kemudian buka sajian Tema setelah itu Edit HTML Tambahkan aba-aba 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 aba-aba dibawah ini dan letakan sebelum aba-aba </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 aba-aba <data:post.body/> dan tambahkan aba-aba di bawah ini sempurna di bawah aba-aba <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 yakni Jumlah postingan yang akan ditampilan, jikalau ingin menambah jumlah postingan yang akan ditampilkan teman juga harus mengatur tinggi widget slide boxnya

Atau sanggup juga ditambahkan di atas aba-aba </b:includable> post menyerupai ini :

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

4. Selanjutnya Simpan Tema dan lihat hasilnya.

• Result

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

Source : https://turuninsay.blogspot.com/search?q=memasang.widget.slide.box.rekomendasi.artikel

Sumber https://www.denylistianto.com/

Bagikan Artikel ini