Sliding Box Artikel Terkait yang Mirip Kompas
Posted in artikel terkait, Css3, Image, Menu |
| slide box |
01. Cari kode <head> yang berada paling atas, jika sudah ketemu pastekan FONTS dibawah ini tepat dibawah kode <head>. Jika blog anda sudah ada fonts seperti ini maka abaikan langkah ini.
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>02. Langkah kedua adalah cari kode ]]></b:skin>, jika sudah pastekan CSS dibawah ini tepat di atas kode ]]></b:skin>
/* Related Post with Sliding CSS by Kang Ismet*/
#kislidingbox{background:#DFE9E9;box-shadow: 0 2px 6px rgba(0,0,0,0.2);transition:all 0.6s ease-out;width:400px;height:172px;border-radius:4px 0 0 4px;position:fixed;overflow:hidden;border:none;right:-405px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#26B337;display:block;height:30px;width:100%;font:bold 22px PT Sans Narrow;padding-right:25px;}
.kislidingbox-title span a{float:right;height:40px;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 #D0B2B2;margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-50px;margin-top:-10px;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:110px;height:70px;background:#FFF;padding:3px;border-radius:2px;box-shadow: 0px 0px 1px 0px rgba(69,62,69,1);float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font:bold 18px PT Sans Narrow;}
a.related-post-item-title {color :#0366A3 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:underline;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
#infofacebook {margin-top:24px;}
/* End CCSS Related Post with Sliding */03. Langkah ketiga adalah cari Kede </head>, jika sudah pastekan Script dibawah ini tepat di kode </head>.
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-405px'});
}
});
$(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':'-405px'});
kislidingbox.fadeOut('slow');
})
minimize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
minimize.show();
})
});
</script>04. Langkah keempat ada cari kode <div class='post-footer'>, Simpan kode ini di bawah <div class='post-footer'> yang ke 2.
<!-- Related Post with Sliding by Kang Ismet -->
<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;'>Rekomendasi Berita Lainnya</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/AVvXsEjRMgjLp8-YztOoUiAvbv8Uaj-MYB3adkRxXxy4jiNPPXC-2Ru9KRNmdT1tgYJ9hwlQMfLr_Yz9QiV6SjbGuoSLJaKSDymMp4svVatkWr-rHXHRmFce1V_DjWWQwMZgbPB84Xwb1cBXeFX8/s1600/close-box.gif' title='close'/></a></span>
<span><a href='javascript:void(0);' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' style='display:scroll' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGQZTS1yhFoCsOn22El0QZ1uNrCrBZCt6ToK4x4xT5HO3RertRiLIA3LukZlkMFRkfAj3BCXuFctjbBfIqLjab-ZwHOZS83Q69tvp46bmP7rrKozZLzOGGN9PFWSLCB8E-yGzbIkpGzdD7/s1600/minim-box.gif' title='Back To Top'/></a></span></div>
<div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == "item"'>
<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'>
"<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: 1,
summaryLength: 70,
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='https://googledrive.com/host/0B7jh8ZI9-4vpOUpJbzV5eHFBbDQ/' type='text/javascript'/>
<div id='infofacebook'>
<div class='fb-like' data-action='like' data-colorscheme='light' data-height='The pixel height of the plugin' data-href='https://www.facebook.com/Your id Facebook' data-layout='button_count' data-send='false' data-show-faces='true' data-width='The pixel width of the plugin'/><a class='twitter-follow-button' data-lang='id' data-show-count='true' href='https://twitter.com/Id Twitter'>Ikuti @Nama Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</b:if>
</div>
</div>
</b:if>
<!-- Related Post Widget End -->05. Temukan kode ini https://googledrive.com/host/0B7jh8ZI9-4vpOUpJbzV5eHFBbDQ dan simpan pada google drive anda masing2.
06. Ganti yang bertulisan (Your id Facebook) dengan id anda.
07. Ganti yang bertulisan (Id Twitter) dengan id anda, ganti (Nama Twitter) dengan nama twitter anda.
08. Save dan lihat hasilnya.
semoga bermanfaat. Jika binggung, tinggalkan komentar anda dibawah ini.
