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.