Saturday, 21 April 2012

Membuat menu transparan back to top

20:20    No comments

Menu lagi menu lagi. banyak cara untuk mempercantik menu blog anda. membuatnya semakin menarik dan mengundang banyak pengunjung untuk masuk lebih jauh lagi di dalam blog anda. ini adalah salah satunya.menu ini simple tapi menarik .. silahkan dicoba
  • login ke akun blog anda
  • masuk ke templates kemudian pilih edit Html
  • cari kode <head> ( untuk mempermudah tekan F3 )
  • letakkan kode dibawah ini sebelum kode <head> 
<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([&#39;_setAccount&#39;, &#39;UA-7243260-2&#39;]);
  _gaq.push([&#39;_trackPageview&#39;]);

  (function() {
    var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[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)
                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);
                    else   
                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);
                });
               
                $(&#39;#nav&#39;).hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);
                        }
                    }
                );
            });
        </script>
  • kemudian letakkan kode dibawah ini 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'/>
 * jika di blog anda terdapat navbar masukkan scribt dibawah ini sebelum kode <body>
<style type='text/css'>
#navbar-iframe {display:none;}
</style>

0 comments:

Post a Comment

Tinggalkan komentar anda...