Cara Membuat Widget Postingan Rekomendasi Melayang di Blogger

Cara Membuat Widget Postingan Rekomendasi Melayang,- Setelah sebelumnya saya sudah memposting mengenai Script Widget Alexa Rank, kali ini saya akan membagikan mengenai tutorial membuat widget rekomendasi postingan melayang untuk memudahkan pembaca mendapatkan postingan lainnya. Berikut tutorial cara membuat widget rekomendasi post melayang di blogger.

Cara Membuat Widget Postingan Rekomendasi Melayang

Dalam postingan Arian Blog kali ini mengenai Cara Membuat Widget Postingan Rekomendasi Melayang, sebelumnya saya akan membahas apa itu widget rekomendasi melayang. Widget rekomendasi melayang adalah salah satu widget yang berada disebelah blog yang posisinya mekayang, dimana dalam widget tersebut berisi postingan lainnya.

Fungsi dari widget postingan rekomendasi ini adalah untuk memudahkan pembaca untuk mendapatkan postingan postingan menarik lainnya, sehingga jumlah pageview suatu blog bisa banyak atau bertambah, dengan kata lain widget kali ini adalah widget yang fungsional yang bisa anda letakkan di blog anda.

Oleh karena itulah Arian Blog kali ini akan membagikan postingan mengenai tutorial membuat widget rekomendasi postingan yang melayang dengan cara yang mudah dan dapat dimengerti. Berikut tutorial cara membuat widget rekomendasi postingan di blogger.

Cara Membuat Widget Postingan Rekomendasi Melayang di Blogger

---

Pertama

Login ke blogger, buka Template lalu tekan edit HTML

Kedua

Cari kode ]]></b:skin>, lalu letakkan kode berikut diatasnya


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

Ketiga
Cari kode </body>, lalu letakkan kode berikut diatasnya

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

Keempat
Cari kode <data:post.body/>, lalu letakkan kode berikut diatasnya

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

Kelima
Simpan template tersebut.

Itulah postingan mengenai Cara Membuat Widget Postingan Rekomendasi Melayang, perlu dikertahui bahwa script kode diatas berasal dari Arline Design. Semoga tutorial diatas dapat bermanfaat bagi anda semua dan bisa menjadi refrensi jika anda ingin membuat widget tersebut.

Share on Google Plus

About Tio Agung Rianto

Hello! I am Agung Rianto, I just like common people who like to write. I am a blogger and a student. Enjoy my blog!