TutorNesia ~ Pertama kali sliding box seperti ini memang dari hasil pikiran saya, karena saya pribadi sering mengunjungi portal kompas dan okezone. Lalu dipikiran saya terlintas bagaimana ya kalau di blog saya juga dipasang seperti ini, kan keren. Namun kesulitannya adalah bagaimana cara membuatnya?
Titik terang pertama yang saya jumpai adalah di blog mas adly yang beralamat www.kompiajaib.com, disana mas adly ada share (cara membuat sliding statis social widget). disanalah saya mulai berfikir kalau kita gabungkan dengan artikel terkait pasti bisa.
Setelah saya melakukan uji coba dalam pergabungan CSS, Script dan HMTL, ternyata hanya kegagalan yang saya jumpai, Bagaimana tidak jengkel, hampir satu minggu lho sobat. Tapi saya tidak ambil pusing, saya tahu pasti ada satu orang yang mampu melakukan ini.
Ya, dia adalah dukun tutorial (Kang Ismet) yang beralamat blog.kangismet.net. Setelah saya tanyakan pada kang ismet bisa gak membuatnya? beliau pun pun berkata, mungkin bisa, setelah beberapa hari, eh, ternyata sudah siap dan telah share. [Link].
Tapi karena ada beberapa teman saya tanya mengenai hanya tampil satu gambar dan ada cuplikannya, maka saya share ulang disini. Salah satu yang saya terapkan adalah blog ini.
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/AVvXsEh0_55WeG6Qs_RneelBvYNc7U0QUr07sjUlM_LY0wLnKaFTKNn7XY9uc0Jugp49kpaZCmqcW2yEmI63aP0-xpNBTptiPxGk3OzvYS1ZaDW8w0kxnYG5R1n7GRC7ZZdQhaFVaD7G-kuSrhRa/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/AVvXsEgroFJogbc7XGUDP-zDhslnG3OYooDWP-eKYU8yRxWjsoxaN5RRlornBc0JFFfH5XDzO8p_DZCeG1E4IytN6wrQ4ttcGeVSOAduOWn6xk1KqAaWsi3ow8GpZIk3KjJnZjpUSP6g3RgEmC09/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.
Sliding box ini telah ada back to top, jika template anda ada back to top maka hapus saja back to top anda sebelumnya.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.