Seiring berjalannya waktu maka tutorial cara menghiasi blog juga boleh dikatakan cukup penting, apalagi blog yang anda olah adalah blog portal, mungkin anda sering melihat slide yang terdapat di website besar seperti kompas, ada slide yang muncul saat anda scrool kebawah, nah itulah yang saya maksudnya, namun slide ini sedikit berbeda dari sebelumnya, slide ini menggunakan dua js berbeda dan digabungkan, untuk lebih jelas silahkan klik demo dibawah ini.
01. Karena saya menggunakan font PT San Narrow dan Font Roboto, maka blog Anda harus ada kedua font ini, jika belum silahkan simpan font ini di bawah <head>, jika sudah ada silahkan abaikan langkah ini.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>02. Karena cara kerja slide ini menggunakan Jquery, maka pastikan blog Anda sudah ada Jquery yang tersimpan (Versi berapapun sama) jika belum maka simpan Jquery bawah ini tepat diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>03. Simpan CSS ini tepat diatas ]]></b:skin>
#kislidingbox{background:#444;border:1px solid #333;transition:all .3s ease-in;width:440px;height:250px;position:fixed;overflow:hidden;border:none;right:-460px;z-index:9999;text-align:left!important;letter-spacing:0;box-shadow: -3px 4px 16px -12px rgba(59,47,59,1);}
.kislidingbox-title{background:#392828;border-bottom:4px solid #2C7698;padding-bottom:10px;color:#fff;display:block;height:30px;width:100%;font:bold 24px PT Sans Narrow;padding-right:25px;text-transform:uppercase;}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-top:-4px;margin-right:15px;position:relative;}
.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;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
#sliding-tab{margin-top:-71px;}
#artikel-terkait-leonyli a {color:#555}
#artikel-terkait-leonyli a:hover,a:active{color:#555;text-decoration:underline;}
#artikel-terkait-leonyli ul {width:140px;margin-top:-20px;padding:0px;list-style:none;}
#artikel-terkait-leonyli ul li{background:#ddd;border-radius:3px;float:left;height:160px;margin:0;padding:10px;width:140px;font: 12px Roboto;}
#artikel-terkait-leonyli img{width:140px;height:90px;transition:all 400ms ease-in-out}
#artikel-terkait-leonyli img:hover{opacity:0.7;transition:all 400ms ease-in-out}
#artikel-terkait-leonyli ul li:nth-child(1n+1){margin-right:0;}
#leonyli-related{float:left;width:255px;margin:-80px 0 0 -30px;padding:5px}
.related-post {margin:2em auto 0;padding:5px;font:13px Roboto;line-height:1.5em;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post a {color:#fff}
.related-post a:hover {color:#fff;text-decoration:underline}
#BounceToTop{float:right;margin-top:8px;margin-right:-10px; cursor:pointer;display:none;position:relative;}04. Simpan Js bawah ini tepat diatas </head>
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 700) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-460px'});
}
});
$(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':'-380px'});
kislidingbox.fadeOut('fold');
})
minimize.click(function(){
kislidingbox.toggle()('fold');
$(this).fold();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggle()('fold');
$(this).fold();
minimize.show();
})
});
</script>05. Cari kode <div class='post-footer'> atau <data:post.body/>, dan simpan tepat dibawahnya..
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float:left;margin:6px 0 0 15px;'><span style='color:#D0F639;'>Berita</span> Rekomendasi</span>
<span><a href='javascript:void(0);' id='kislidingbox-close'><img alt='close button' class='a' src='http://3.bp.blogspot.com/-BblN9ukdGEA/UktQsar57OI/AAAAAAAAM3U/u15wgq4NDOY/s1600/close-box.gif'/></a></span>
<span><div id='BounceToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-AJMCZjkwv-g/UktQs9KFgMI/AAAAAAAAM3c/2ORanXC0rVc/s1600/minim-box.gif'/></div></span></div>
<div class='kislidingbox-container'>
<div id='artikelleonyli'>
<div id='artikel-terkait-leonyli'>
<script src='https://googledrive.com/host/0Bx1BDhFqeIKHSHFqcXo4SEpMM1k/' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=19"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=1;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div></div>
<div class='related-post' id='leonyli-related'/>
<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: 4,
summaryLength: 200,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "leonyli-related",
newTabLink: false,
moreText: "Read More",
widgetStyle: 1,
callBack: function() {}
};
</script>
<script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},2000) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
</div>
</div>Jka Anda mengikuti langkah-langkah diatas dengan benar maka sudah dipastikan telah berhasil.
Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini
6 komentar
tengkyu ,,,, mbak leony ,,,, :)
Lihat demonya keren nic... saya pelajari dl sist....
Mantap Mba Li,,,Boleh Minta tamplatenya,,,Grtis Yah,,hhehehee
ngak bisa ?
ngak bisa ?
apanya yang gak bisa mas
Apapun alasannya saya hanyalah manusia biasa seperti Anda dengan keterbatasan kemampuannya, disini kita sama-sama belajar agar bisa berkembang di dunia maya. Maaf, jika ada komentar yang tidak terjawab adalah mungkin di luar kemampuan saya. Terima kasih telah membaca coretan kecil saya ini. Semoga bermanfaat untuk Anda.
Show EmoticonHide EmoticonShow Konversi KodeHide Konversi Kode