Membuat Slide Related Post dengan Tiga Langkah Saja

Tampilan Slide Related Post pada duniaonme.blogspot.com

Selamat datang kembali sahabat Duniaonme. Kali ini kami akan share tentang cara membuat Slide Related Post. Kalau masih bingung tentang apa itu Slide Related Post, silahkan lihat tampilan blog Duniaonme ini di pojok kanan bawah, disana ada widget dengan nama Baca Juga Artikel Terkait. Keren bukan?. Kalau mau cara buatnya berikut 3 langkah pembuatannya. 

Tapi sebelum itu silahkan masuk dulu ke langkah yang tidak kami hitung. Masuk ke akun blog sahabat, pilih blognya, kemudia masuk ke template dan edit HTML. Dan baru selanjutnya kita masuk ke 3 langkah-nya.

Pertama

Copy kode script dibawah ini, lalu paste tepat di Atas kode script  ]]></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 {}

Kedua

Copy kode script dibawah ini, lalu paste tepat di Atas kode script </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 :

Ketiga

Copy kode script dibawah ini, lalu paste tepat di bawah script <div class='post-footer'> yang kedua. INGAT script <div class='post-footer'> yang kedua, karena pada script blog sahabat ada dua script <div class='post-footer'> yang sama

<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/AVvXsEj24-250kfAIWjxjaBVhyd79aAdche5jif3D6colHKmkSQeZv9Fx8ZCkwrfcO-P0Ala4wQrzf340jvtlmoaP-kvjct17hVs8yIKA04aZnZoIJuGN8zAv-pvO-IRjvOKkxSk79msHTjo/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/AVvXsEh67lQ087NWOTL4gXmUykH8TUewBbqVuot-7Pkxe8A0p7TYq9Mb9jMj73VDnDFYAAoDq1Lhh27qFMQh44YPQu4LtNy-McKpkL88lrHL1M4doxmUd_EaMUvn-pwESVqNB9zm0Sx-cvya/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/AVvXsEgMCqD7YVjpXY5NVX41Sk4f6xcl6DNMDx5_AJkTdnVpIysw_fD1b2_OH9udVaW7kEmQHD7n1jLja29OUgfkEP2j8j8BXVhfZZ-DTsdwcCPnDrQLXyW-mCQhMarjS5Pobv4-jq0pWHlw/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: 2,

      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>

Demikian 3 langkah cara membuat Slide Related Post, semoga bermanfaat dan terus berkarya. 

Artikel ini diolah dari seocips.com dan dipublikasikan setelah terbukti bisa digunakan.