Cara membuat slide artikel terkait di pojok -->
Home

Cara membuat slide artikel terkait di pojok

,
Cara membuat slide artikel terkait atau cara membuat slide artikel terkait di pojok kanan bawah.
kebanyakan sobat blogger menyebutnya dengan istilah cara membuat slide rekomendasi artikel terkait , yang di maksud dengan slide artikel terkait ini adalah jadi nanti jika di pasang maka di pojok kanan bagian bawah halaman blog anda akan muncul kolom kecil dan kolom kecil tersebut sebagai widged artikel terkait karena menggunakan slide maka widged artikel terkainya nanti akan muncul kalau halaman di gulirkan kebawah dan jika di gulirkan keatas lagi widgednya otomatis akan menghilang. lalu sesuai artikel terkait maka nanti yang keluar dalam slide artikel terkaitnya juga judul postingan yang masih terkait dengan postingan yang sedang di bukanya.

Dengan membuat slide rekomendasi artikel terkait ini menurut saya juga akan lebih unik tampilan blog website serta juga menambah petunjuk pengguna untuk melihat konten yang ada dalam blog atau website tersebut, sehingga jika konten blog anda menarik pengunjung maka artikel yang anda buat pastinya tidak mubazir (sia-sia) karena konten anda bermanfaat buat pengguna lain

Cara membuat slide artikel terkait :
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 ( panduan gambar nya bisa melihat gambar di bawah ini )

cara membuat slide artikel terkait

4.lalu klik EDIT HTML (lihat gambar di atas untuk panduanya)
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'>
$(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 :
kode di atas yang warna pink 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.lalu cari lagi kode dalam Html kode seperti ini <div class='post-footer'>
10.dan kopi 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/AVvXsEg_v2GROGuCz7HNxkJ3bcOaDXyXnYqf1B9wddftozw2k1mUX952kRYQj7wHOzJ5txyKWMQ7TPL8tGO1jhDyASJouYYv101LFlTIx3InmqXdFHvN_8gbnD_4smiAYJwCMSKqFkIL7UwL/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/AVvXsEi9EXyNsqhH2vjOKaNEbnvubzJgc1C3ZH1YoXTOtryKIMXlVYIS2wGyz-mfX-grvB7sVo49qw9qsv4mwGCECynwwMLt-XCPoF4jIgTgo_mL7F1qxUfFAJdfLnRzmLyz7zP5sx4-yaRG/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/AVvXsEjFCYhxVZPs_JNEnUzDh7dIQnENBUtApvN-wPQqMboWuilJAe0eHDkuQxJvf08kU_Nyk8QwZevlUG4HYTkiCSLsRQxz73xGpHYTZtAf9QmRUa8wHjkDR5yDmrg9zNfhqXuGSGGvqHpC/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

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

Demikian panduan blogger dari mahadewapulsa.com tentang cara membuat slide rekomendasi artikel terkait di pojok kanan bawah , semoga anda mudah untuk mengikuti panduan nya


TerPopuler