Cara membuat artikel terkait di pojok bawah

Cara membuat artikel terkait di pojok atau yang di maksud artikel terkait di pojok ini nantinya artikel terkaitnya berada di pojok bawah sebelah kanan.

artikel terkait ini muncul secara tiba-tiba sehingga kebanyakan orang menyebut dengan slide artikel terkait, sebagai contohnya seperti gambar di bawah ini :

Slide Artikel terkait di pojok bawah ini sering di beri judul Rekomendasi sehingga pengunjung rata-rata pasti melihat tampilan dari slide artikel terkait apa lagi munculnya secara otomatis dan jika halaman di geser kebawah bisa hilang sendiri.

slide artike terkait di pojok kanan bawah ini saya lengkapi dengaan tombol penutup (close) sehingga penggunjung bisa untuk menutup tampilan dari slide artikel terkait ini.

Dengan membuat slide rekomendasi artikel terkait ini bisa juga untuk menambah keunikan dari desain website dan juga pastinya bermanfaat juga buat pengguna karena ada info terbaru yang bisa bermanfaat buat pengunjung.

Cara membuat slide artikel terkait di pojok kanan bawah ini memang perlu hati-hati dibutuhkan ketelitian dan kesabaran karena ada tiga (3) rangkain kode yaang akan di masukan dalam Html Template Blogger , dan Cara pembuatanya bisa di simak di bawah ini :

Cara membuat slide artikel terkait :
1.pertam silahkan buka blog anda dengan mengunjungi www.blogger.com

2.lalu login ke akun blog anda masing-masing.

3.klik desain untuk menuju dashboard blogger

4.pada menu blog pilih Template , lalu pilih lagi / klik Edit Html , contoh nya seperti gambar di bawah ini

5.selanjutnya cari kode di dalam html kode seperti ini ]]></b:skin>
6.kemudian kopi kode yang di bawah ini dan pastekan/letakan di atas kode ]]></b:skin>

#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:35px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!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:-35px;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;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:bold;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;}
.related-post-style-2 .related-post-item-more {}

7.lalu cari lagi kode seperti ini </head>
8.dan kopi lagi kode yang ada di bawah ini lalu pastekan di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });

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

    maximize.hide();

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

keterangan :
di dalam kode di atas yang warna hijau jika dalam html template anda sudah ada kode seperti itu silahkan di dihapus saja

9.selanjutnya cari lagi kode dalam Html kode seperti ini <div class='post-footer'>
10.dan kopi lagi kode yang ada di bawah ini lalu pastekan di bawah kode <div class='post-footer'>

<!-- Related Post with Sliding -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Artikel </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/AVvXsEiKwx2UbzHFNBQmt54Y0Tc2Fk_-qZUO88IZExQuzwMLbEEoUb_pc3ptM_QLREcBw40mcpgUppU9eQYCl2pyM7vWxz7XwMru8KAvc_UIk6RFAW4IjJUzNEvAAXegqJCLHpUjCpNobrQK/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/AVvXsEiMlyttWrHXTiMi2_gUGuouTO3pM4EbwGHXPCMXoI9JayOd7UBlDB4YcjLrwB8tLfhU-zuB55uHJghLg27qDRLVbgYdTI3t2EaaPrZOOPIoMe79qRBOl0flauY8lpPFzJv9GGqQBOlB/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/AVvXsEgut5JOvO2K7OwYsuQSiOY4QuoBTRJCPXZP26jyL7ngwBdEyWTdHXIbZKD1rZkud6PBh_fGQT66zJ641oFVIwaLbbYc212cXwVjadtucs0o9eyDVMKtZwbgYVerIDkuRgrUnADLeLyV/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <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: 35,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      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='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>    
    </div>
</div>
</b:if>
<!-- Related Post Widget End -->

keterangan :
Tulisan warna biru dalam kode di atas bisa di ganti dengan tulisan sesuka anda

11.Lalu simpan template nya.
12.selesai.

untuk melihat hasil pembuatan slide artikel terkait nya silahkan buka salah satu postingan anda

Demikian panduan blogger dari jasa setting website tentang cara membuat slide artikel terkait di pojok kanan bawah.