Blogger Sağa Açılıp Sol Tarafa Gizlenen Navbar Eklentisi

Blogger, Navbar üzerine gelince sağ tarafa açılan, maus çekilince sol tarafta Blog simgesine dönüşen Blogger Navbar eklentisi. Blogger’...

...

Blogger, Navbar üzerine gelince sağ tarafa açılan, maus çekilince sol tarafta Blog simgesine dönüşen Blogger Navbar eklentisi. Blogger’un varsayılan Navbar eklentisini bilmeyen yoktur. Blogger Navbar Gadget eklentisi yeni kayıt, tasarım, çıkış, kötüye kullanım bildirimi, sosyal paylaşım iconları ve arama penceresi ile oldukça kullanışlı bir araçtır. Ancak blog kullanıcılarını psikolojik olarak tedirgin eden bir eklentidir. Blog kullanıcısının devamlı gözünün önünde bulunması nedeni ile, bu eklenti ya kapatılır yada şablon kodlarından silinerek görülmemesi sağlanır.

İlgili makale : Blogger Navbar'ı Kaldır Videolu Anlatım

Blogunuzu kullanırken Navbar eklentisini görmek istemeyen kullanıcılar için, Navbar gadgetini sol tarafta bir blog simgesine dönüştüren ve devamlı göze çarpmasını engelleyen bir CSS kod eklentisinden bahsetmek istiyorum. CSS kodlarını blogunuza eklediğinizde Navbar gadgetiniz görülmüyor. Bunun yerine sol tarafta sadece Blog simgesini görüyorsunuz. Blogunuzda yeni bir kayıt, tasarım, paylaşım veya çıkmak istediğinizde ise, mausu simge üzerine getirmeniz yeterli oluyor ve Navbar Gadgetinizi yine kullanabiliyorsunuz.

Simge durumundaki Navbarı guney6 test blogumdan inceleyebilirsiniz.

Blogger Navbar Görünümü

Blogger Navbar gadget eklentisini nasıl simge durumuna getirebileceğinizi aşağıda adım adım takip ederek kullanmaya başlayabilirsiniz.

Blogger Navbar’ı simge olarak kullanma :

1. Blogger kumanda paneline giriş yapın.

2. Sırası ile, Şablon → Özelleştir → Gelişmiş → Dikey çubuğu kaydırın, CSS Ekle, penceresine aşağıdaki kodları yapıştırın.

#navbar {
width: 36px;
border-top: 1px solid #888888;
border-right: 5px solid #888888;
position: fixed;
top: 0px;
left: -6px;
background: #fe6602;
border-radius : 0 5px 5px 0;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);

-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;

-moz-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
-webkit-transition-delay: 1.3s;
transition-delay: 2.5s;

z-index: 10;
}

#navbar:hover {
width: 96%;

-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-webkit-transition: all 0.6s linear;
transition: all 0.6s linear;
}

3. Sağ tarafa açılan Navbar penceresi için tarayıcı dikey çubuğu arasında 4 px. boşluk verilmiştir.

4. Bu boşluk tarayıcı dikey çubuğu kullanırken engel yapmaması için verilmiş olup, isterseniz blog ana sayfanıza Navbarın tam oturmasını sağlayabilirsiniz.

Kod penceresinde iken sağ taraftaki dikey çubuğu kaydırın ve kod içinde mavi ile belirtilmiş olan, width: 96%, yazan rakamı 100 olarak değiştirin. Genişliği 100% yaptığınızda Navbar çubuğu blog temanıza tam olarak oturmuş olacaktır.