Skip to main content
Mister Design

follow us

Sekedar info saja, sekarang Mister Design adminnya sudah berganti!!

×

Membuat Widget Recomendation Atau Artikel Terkait Melayang

Widget salanjutnya yang bisa saya berikan adalah, membuat widget artikel terkait atau recomendation melayang di sidebar. Widget ini cocok untuk Anda yang ingin menampilkan artikel terkait tanpa harus di scroll terlebih dahulu.

Mungkin widget ini ada beberapa bagian yang tidak responsive, silakan Anda ubah menjadi responsive sendiri. Widget artikel terkait ini bertujuan pengunjung atau visitor melihat artikel lainnya yang sudah Anda publish pada blog Anda.


Di atas kurang lebih adalah tampilan dari artikel terkait ini, gimana? keren bukan? langsung saja di pasang.

Widget Recommended atau Artikel Terkait


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Copy kode dibawah ini di atas kode ]]></b:skin> atau </style>

/* CSS Recomendation Slide Box */
#chslidingbox{background:#fff;width:100%;max-width:330px;height:auto;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:rgba(0,0,0,0.15) 0 1px 1px 1px;transition:all .4s ease-out}
.chslidingbox-title{background:#3f51b5;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 65%,rgba(255,255,255,.12) 65%);color:#fff;display:block;height:40px;line-height:40px;width:100%;font-size:14px;font-family:Hanuman,Roboto,sans-serif;text-transform:capitalize;font-weight:700;letter-spacing:.5px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:100%}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:400!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:0}
.chslidingbox-container >div{border:none;margin:0;padding:0}
.chslidingbox-container >div >span{font-size:14px}
.show{bottom:68px}
.hide{bottom:-302px}
.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;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;float:left;margin:0 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:400;font-size:15px;line-height:normal}
a.related-post-item-title{color:#30373B;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#0093da;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

Langkah kedua :

Lalu letakkan kode dibawah ini ke bawah kode <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;'>RECOMENDATION !</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</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: 3,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 0,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: false,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>

Langkah ketiga :

Letakkan kode Javascript dibawah ini ke bawah </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>

Demikian, semoga bermanfaat.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar