Blogger Eklentileri - Sayfa İle Hareket Eden Sabit Üst Menü

Blogger Eklentileri Sayfa İle Hareket Eden Sabit Üst Menü

Blogger Eklentileri kategorisinde sizlere sayfa ile hareket eden, sabit üst menü yapımından bahsedeceğim. Sayda üstünde duran Blogger menü özelliklerinden bahsetmek gerekirse. İstenildiği kadar link başlığı eklenebilir özellikte. Ayrıca en sol kısmında belirlenmiş aşağı yukarı butonları da mevcut. Sayfa ile beraber hareket ederken okuma zorluğuna neden olmaz üzerine gelinmediği zamanlarda saydamlaşır.

Blogger Sayfa ile Hareket Eden Sabit Üst Menü DEMO

Blogger Sayfa İle Hareket Eden Üst Menü Eklentisi

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile </head> kodunu buluyoruz.
3 )</head> kodunun öncesine aşağıdaki Blogger Eklentisi -Sayfa İle Hareket Eden Üst Menü kod dizinini ekliyoruz.

 <link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
 <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>

4 ) CTRL+F kombinasyonunu kullanarak <body expr:class='"loading" + data:blog.mobileClass'> kodunu bularak hemen üzerine gelecek şekilde aşağıda ki Blogger Eklenti kodlarını ekliyoruz.

<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://www.bloggerdersleri.com/'><span>Ana Sayfa</span></a></li>
<li><a href='http://www.bloggerdersleri.com/search/label/Blogger%20Dersleri'><span>Blogger Dersleri</span></a></li>
<li><a href='http://www.bloggerdersleri.com/search/label/Blogger%20Eklentiler'><span>Blogger Eklentileri</span></a></li>
<li><a href='http://www.bloggerdersleri.com/search/label/Blogger%20Seo'><span>Blogger Seo</span></a></li>
<li><a href='http://temalar.bloggerdersleri.com/'><span>Blogger Temaları</span></a></li>
<li><a href='http://www.bloggerdersleri.com/p/iletisim.html'><span>İletişim</span></a></li>
</ul>
</div> 
<div id='top'/>
<div class='desc'/>
<div id='bottom'/>
<div class='scroll'/>