Cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah

   Blogger    1 comment   

Gambar Contoh Artikel terkait

Cara membuat slide artikel terkait atau cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah. atau kebanyakan sobat blogger menyebutnya dengan istilah cara membuat slide rekomendasi artikel terkait.

Yang di maksud dengan slide artikel terkait ini adalah ketika di pasang maka di pojok kanan bagian bawah halaman blog anda akan muncul kolom kecil dan kolom kecil tersebut sebagai widget artikel terkait.

Pun demikian, widget ini akan berjalan bila pengunjung atau pembaca artikel blog membuka posting atau membaca posting blog dan/atau tidak muncul pada halaman Home atau halaman lainnya terkecuali pada halaman posting.

Sistem kerjanya ialah dengan cara, ketika pembaca mengarah kebagian bawah (tarik ulur) dengan cursor maka akan muncul sebuah kotak yang berisikan Judul dan gambar thubnail posting blog yang berkaitan dengan artikel yang sedang dibaca oleh pengunjung. Namun ketika di gulirkan keatas lagi widgetnya artikel terkait tersebut dengan otomatis akan menghilang. 

Selain itu, sesuai dengan judulnya Artikel Terkait maka nanti yang keluar dalam slide artikel terkaitnya juga judul postingan yang masih terkait dengan postingan yang sedang di bukanya.

Dengan membuat widget artikel terkait ini, siapa tahu pengunjung akan merasa penasaran dengan posting yang berkaitan yang sedang dibacanya. Dan menurut saya juga akan lebih unik tampilan blog/website serta juga menambah petunjuk pengguna untuk melihat konten yang ada dalam blog atau website tersebut.

Oke, inilah cara buat artikel terkait di blog/web tentang panduan cara membuat Artikel Terkait Di Pojok Kanan Bawah.

Cara membuat Artikel Terkait Di Pojok Kanan Bawah:

1.tentunya anda harus membuka dulu blog anda bisa membuka melalui www.blogger.com

2.lalu login blog anda masing-masing

3.pergi dedashboard blog dan pilih template

4.lalu klik EDIT HTML 

5.dan cari kode di dalam html kode seperti ini ]]></b:skin>

6.selanjutnya kopi kode di bawah ini dan pastekan/letahkan 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.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'>
<script>$(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>

Keterangan :
kode di atas yang warna Ungu jika dalam html template anda sudah ada kode tersebut silahkan di hapus saja / pakai salah satu kode tersebut / jangan memasang dua (2) kode yang sama

9.   Cari lagi kode dalam Html kode seperti ini <div class='post-footer'> 

10. Copi lagi kode yang ada di bawah ini dan 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;'>Baca Juga Artikel ini</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/AVvXsEgZX1DDU9rrFXfcDTn7-VUpLwkcjceyZYDQSVRB4C-BWucMwYKrgJpknB85L47dH-60SIq_j8IyKB1PnDt0Xltm8OkhsPXb-dm5hPqXKZznjg6ZfWD-hvbIc3d2g8eKTnajpSXziLTD/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/AVvXsEgoFi_vfVzKlL_V2RdJ4oFlKzjRZbeAeXMmhroNDnE1heR4iMgUbPK-Sa_9W57_bLgCvOGksKhnUX02t3JBBIzFqZinloTtZOgGswhe6ztTZTpzIWwGof5V9OV0JiJnWXpymGedNLZF/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/AVvXsEhnyeYX-pjvGixg8tKDDrVkk8k6zStIXpogfKS1KZQfR0WofKbr3Ojppp-_zCAWwHxbHU6TB2BKiJZBH3y8_-LcKTjOhRgN94l_pqWU-hHAQuGYfCjWGkeBmyx5IDoE9g2Qt5MLGrY0/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. Selanjutnya simpan template nya

12. Dan selesai, serta lihat hasilnya..

Demikian panduannya sobat blogger semoga tutorial tentang Cara Membuat Random Artikel Terkait Di Pojok Kanan Bawah memberikan mamfaat untuk semua dan sesama teman blogger lainnya.

Salam Blogger..