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

İ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 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.