Cara Membuat Artikel Terkait Melayang Pada Blog

Setelah sebelumnya ada cara mudah membuat related post/artikel terkait, pada kesempatan kali ini Kang AP akan memberikan trik bagaimana cara membuat artikel terkait melayang pada blog. Hal ini tentu akan membuat daya tarik tersendiri pada blog dan pastinya akan membuat blog anda terlihat lebih keren dan profesional. Bagi anda yang tertarik untuk memasangnya, silahkan simak langkah-langkah dibawah ini !!

1. Pertama. silahkan anda login dulu ke Blogger

2. Pilih Template » Edit HTML

3. Sekarang cari kode ]]></b:skin>

4. Pasang kode berikut diatas 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 {}

Note.
» Silahkan anda berkreasi dengan merubah tinggi, lebar dan posisi widget sesuaikan dengan template sobat

5. Kemudian pasang kode berikut tepat diatas kode </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      = $('#kislidingbox');    var closed      = $('#kislidingbox-close');    var minimize    = $('#kislidingbox-minimize');    var maximize    = $('#kislidingbox-maximize');

    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 :

6. Langkah selanjutnya, pasang kode berikut tepat dibawah kode <div class='post-footer'>


Baca juga :
» Cara Mudah Agar Blog Menjadi Dofollow
» Cara Mudah Membuat Recent Post Thumbnail Keren Bergerak Turun
» Cara Mudah Membuat Label Blog Warna-Warni

<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/AVvXsEilT8AGGKu21_IyemzviW0MLqSOPIOh8sfuC5ccbSD4zorODKqXctFUMlpZq-78jqBGMrjLGJJjFaK31QiWge6grIbf0oTmNA51OSp08av6gmY3jsGea08vba5UV4ZFpmACxkrio4Kt/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/AVvXsEjVL1nJoElgku675YqK6pqzP8vjBbTVmD4jzAgqsiAt0KTRwiWcPk2mEUG8Pcjk56DqiMtLgw5UKc3F3vPR2hIA0BlVByF9djdGQDsYHQ0fFkVAxOeAjPSQ4VLMVTZF_Xc3Yoqh0DzL/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/AVvXsEgHKyGxoHZw9tspim6ZGiWNEhyphenhypheno16LZPIdL9yLBMDiiNOVFt4FmuNFUs8azjIrdWXmZdHPZdObkol5c9fP9swHsVXRObowDJ2TpV0SFJHjevu1tNKOvf0K2ixehEoY0JQLJOW9M553a/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>

7. Simpan Template dan lihat hasilnya

Demikian cara membuat artikel terkait melayang pada blog, jika ada pertanyaan silahkan masukkan di kolom komentar. Semoga berhasil !!

Please Share » » Facebook Google+ Twitter