Cara Membuat Rekomendasi Artikel Terkait

Live Demo

Membuat artikel rekomendasi terkait berdasarkan label muncul di samping blog saat mouse di scroll kebawah. Jadi artikel rekomendasi ini akan menampilkan artikel lainnya yang terkait dengan label artikel yang sedang di baca.
Langsung ke tutorial.

1. CSS
Letakan css berikut di atas ]]></b:skin> template

#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow:0 4px 10px #666;transition:all .4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0}.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial,sans-serif;text-transform:capitalize;font-weight:700;padding-right:25px}.kislidingbox-title span a{float:right;height:40px;width:25px}a#kislidingbox-close,a#kislidingbox-close{margin-right:15px}.kislidingbox-title > span > h2{font-size:20px!important;font-weight:400!important}.kislidingbox-title span a img{margin:16px;border:0!important;box-shadow:0 !mportant}.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px}.kislidingbox-container > div > span{font-size:14px}.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc}.show{bottom:80px}.hide{bottom:-145px}.related-post{margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif}.related-post h4{font-size:150%;margin:0 0 .5em}.related-post-style-2{border-top:1px solid rgba(0,0,0,0.2);margin-top:-20px;padding-top:15px;list-style:none}.related-post-style-2 li{margin-left:-10px;style:none;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;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc}.related-post-style-2 .related-post-item-title{font-weight:700;font-size:120%;text-transform:capitalize}a.related-post-item-title{color:#333!important}a:hover.related-post-item-title{color:#0491ea!important;text-decoration:none}.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

2. Berikutnya
Letakan kode berikut di atas </head> template kamu

<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() > 400) {
            $('#kislidingbox').css({'right':'0px'});
        } else {
            $('#kislidingbox').css({'right':'-360px'});
        }
    });

$(document).ready(function(){
var kislidingbox      = $('#kislidingbox');
    var closed      = $('#kislidingbox-close');
    var minimize    = $('#kislidingbox-minimize');
    var maximize    = $('#kislidingbox-maximize');

    maximize.hide();

    closed.click(function(){
        kislidingbox.css({'right':'-350px'});
        kislidingbox.fadeOut('slow');
    })
    minimize.click(function(){
        kislidingbox.toggleClass('hide');
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass('hide');
        $(this).hide();
        minimize.show();
    })
});
</script>

3. Terakhir Penerapan HTML
Letakan kode berikut di atas <data:post.body/> nomor 2 atau nomor 3 ataupun nomor 1 karna biasanya kode <data:post.body/> ini lebih dari satu dan terkadang ada template yang berbeda jadi cobakan saja satu persatu pada kode <data:post.body/> nya tapi pada umumnya template terdapat pada <data:post.body/> nomor dua.

<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Video</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCk-QAHJ6sQLW1FbpVm2OW21ZPI10Ly_GW9tVF2DOtMNElSuddvWbD12lrebkHmygfOYyAN74HSuLNVdNoigUk7ACYT8zrJngwruhZffXXGzV8bUrauZmPLYazLYU9LxCrIS1RIyIX/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3M4hEIhMYbitKkx7yIMlwgvGTfDvJASB3EWY77mYuhgceFt21E51QIBNr4j7Y7YWsYhBzkl5zjkMK7tA82ZQ_k7HN6BcQYaf7zk8Cx1hBYCMBOMJTsImLZyAauxGkSnyUYiMEg1eK/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL53n2PKoydllR5_YTPeqnu02VugtNhFMNl-hFpL92hYNxO492cbZjecYpuPgvdThA_4NQAJzBkXXmDtq9cCUww_qI3vmlFKxsMI8KXpwXqAIfFVgvHVGTcQAAMfJD_RvJ3cARp2bu/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == "item"'>
<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'>
          "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop></b:if>];
var relatedPostConfig = {
      homePage: "<data:blog.homepageUrl/>",
      widgetTitle: "<h4></h4>",
      numPosts: 2,
      summaryLength: 0,
      titleLength: "auto",
      thumbnailSize: 45,
      noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
      containerId: "sliding-tab",
      newTabLink: false,
      moreText: "",
      widgetStyle: 2,
      callBack: function() {}
};
</script>
<script src='https://kampung-bodoh-x2.googlecode.com/svn/trunk/related-post.min.js' type='text/javascript'/>
</b:if>
    </div>
</div>
</b:if>

Selesei silahkan di cek hasilnya.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Cara Membuat Rekomendasi Artikel Terkait. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.

https://blogtuz.blogspot.com/2014/12/cara-membuat-rekomendasi-artikel-terkait.html

✚

BlogTuz

Cara Membuat Rekomendasi Artikel Terkait

Ditulis Oleh : Robby Armansyah

Related Post

9 komentar