Okey dalam pembuatan menu kaliini sangat sangat berbeda dari yang sebelumnya saya akan mempostingkan bagaimana cara membuat menu transparant back to top yaitu menu berfitur lebih yaitu back to top dan pencarian dengan efek jQuery bila kalian menggerakan rool mouse kebawah menu ini akan otomatis menjadi transparant.
Bagaimana kalian ingin mencoba membuatnya, terlebih dahulu kalian bisa lihat contohnya dulu di blog demo jaya
kalau sudah melihat contohnya dan ingin menerapkannya di blog kalian bisa ikuti langkah langkah nya sebegai berikut:
* Seperti biasa kalian login terlebih dahulu ke blogger
* Masuk ke Rancangan dan ke Edit HTML
* Tekan F3 dan cari kode <head> letakan kode jQuery dibawah ini diatas kode <head> atau sebelumnya juga bisa
<link charset='utf-8' href='https://sites.google.com/site/jayablogdemo/fixed/style.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src='https://sites.google.com/site/jayablogdemo/fixed/jquery-1.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
* Dan langkah yang terakhir cari kode <body> dan letakan kode dibawah ini diatas kode <body> atau sebelum kode <body>
<div id='nav'>
<ul>
<li><a class='top' href='#top'><span/></a></li>
<li><a class='bottom' href='#bottom'><span/></a></li>
<li><a href='http://shofisanjaya.blogspot.com'>Beranda</a></li>
<li><a href='http://alamat-url'>Tentang</a></li>
<li><a href='http://alamat-url'>Blog</a></li>
<li><a href='http://alamat-url'>jQuery</a></li>
<li><a href='http://alamat-url'>CSS</a></li>
<li><a href='http://alamat-url'>PHP</a></li>
<li class='search'>
<input type='text'/><input class='searchbutton' type='submit' value=''/>
</li>
</ul>
</div>
<div id='top'/>
<div class='desc'/>
<div id='bottom'/>
<div class='scroll'/>
* Kalau di blog kalian ada navbar kalian bisa menghilangkannya dengan menambahkan kode dibawah ini diatas kode <body>
<style type='text/css'>
#navbar-iframe {display:none;}
</style>
0 komentar:
Posting Komentar