Setelah sebelumnya ada cara gampang menciptakan related post/artikel terkait, pada kesempatan kali ini Kang AP akan menawarkan trik bagaimana cara menciptakan artikel terkait melayang pada blog. Hal ini tentu akan menciptakan daya tarik tersendiri pada blog dan pastinya akan menciptakan 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 aba-aba ]]></b:skin>
4. Pasang aba-aba berikut diatas aba-aba ]]></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 aba-aba berikut sempurna diatas aba-aba </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/><script type='text/j4vascript'>$(window).scroll(function(){if ($(this).scrollTop() > 400) {$('#kislidingbox').css({'right':'0px'});} else {$('#kislidingbox').css({'right':'-360px'});}});
$(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({'right':'-350px'});kislidingbox.fadeOut('slow');})minimize.click(function(){kislidingbox.toggleClass('hide');$(this).hide();maximize.show();})maximize.click(function(){kislidingbox.toggleClass('hide');$(this).hide();minimize.show();})});</script>Catatan :
6. Langkah selanjutnya, pasang aba-aba berikut sempurna dibawah aba-aba <div class='post-footer'>
Baca juga :
» Cara Praktis Agar Blog Menjadi Dofollow
» Cara Praktis Membuat Recent Post Thumbnail Keren Bergerak Turun
» Cara Praktis Membuat Label Blog Warna-Warni
<b:if cond='data:blog.pageType == "item"'><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='j4vascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLRBZ0uMTP-UnnqxNw8ZAX9fcKfuwII4MWkyK1ecuL8YJK0lnIA7Pumjbp5vQOtJlYz9UcR6Kn_qoXfLiLOH9zwNIBQScoYAwI3cPKCJfMeBjEkHsb3wsqYtQoIrr19w0_50EygEfG/s1600/close.png' title='close'/></a></span><span><a href='j4vascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii9oExLxqEpt3VTbbAJ9COBFYwuzfn5roDBKfm-lIfYtXtN6DygmooMR7tQ19-gvEdNTEIT3zaOHh1o_Pp98VNZN0nLoYH7VrRj08ajJ9UN5_GYlt4JBYZsAsj2BZbK5QTVrOPS6n_/s1600/minimize.png' title='minimize'/></a></span><span><a href='j4vascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDoBGevpz_KuIGBGw1GdVtT8p5yPse29E0n1drl7YsMcQfJI27aHonGJo8YgbK4QuxHns8rRPbvxdkJpiiTTsnyAD2qfvX9YWUW74S0TH-rPJPAq1tqlvfoOiq5HFYKh3Y-7SNcIL/s1600/maximize.png' title='maximize'/></a></span></div><div class='kislidingbox-container'><b:if cond='data:blog.pageType == "item"'><div class='related-post' id='sliding-tab'/><script type='text/j4vascript'>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4></h4>",numPosts: 2,summaryLength: 35,titleLength: "auto",thumbnailSize: 45,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "sliding-tab",newTabLink: false,moreText: "",widgetStyle:2,callBack: function() {}};</script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/j4vascript'/></b:if>
</div></div></b:if>
7. Simpan Template dan lihat hasilnya
Demikian cara menciptakan artikel terkait melayang pada blog, bila ada pertanyaan silahkan masukkan di kolom komentar. Semoga berhasil !!
Sumber http://ap-thea.blogspot.com
EmoticonEmoticon