Blogger Dikey Menü

   Blogger gadget ekleme yöntemi ile sitenizde kullanabileceğiniz bu navigasyon dikey menü ile birlikte sitenizde yan menü olarakta kullanabilirsiniz.Fazla lafı uzatmadan hemen anlatına geçerek bu menüyü blogger sitenize nasıl ekleyeceğimizi aşağıdan adım adım yapalım.

1. Blogger hesabınıza giriş yapın.
2. Kumanda paneli > Yerleşim > Gadget ekle > HTML/Javascript yolunu takip edin.
3. Açılan ekran kutusu içerisine aşağıda ki kodları ekleyin.

<!-- Blogger Dikey Menu Code From http://etralibela-61.blogspot.com/ --> 
<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghI0ZOX-2eSp8glIfF1_6pMIfQmxf4R4zVAZfDcJ27YsTzEMy7h4RfvB4m6zfEeYfuMxuiZoO5q4YAqsLe2hDaGSCwt8CCWxclHh-uM0TZacj3WBMnVYbHMW6NTVw33vj5LYNuW14qDkBe/s1600/menu-bg.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUC-Ra9xJviwAcslX9YqY7LAirVg1B1FdpPXSEwxDPd8da9ryyvQb5lPM0KNtL8bvtxSNZZhFoXhF2y6qhdMDy_2OPCbRqxc9D-3Fzl16wIhSeNK6PRZc2OIabGPY9Skz6vaGbaoTnda_k/s1600/hover-bg.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
   
}
#v-menu a:visited {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUC-Ra9xJviwAcslX9YqY7LAirVg1B1FdpPXSEwxDPd8da9ryyvQb5lPM0KNtL8bvtxSNZZhFoXhF2y6qhdMDy_2OPCbRqxc9D-3Fzl16wIhSeNK6PRZc2OIabGPY9Skz6vaGbaoTnda_k/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUC-Ra9xJviwAcslX9YqY7LAirVg1B1FdpPXSEwxDPd8da9ryyvQb5lPM0KNtL8bvtxSNZZhFoXhF2y6qhdMDy_2OPCbRqxc9D-3Fzl16wIhSeNK6PRZc2OIabGPY9Skz6vaGbaoTnda_k/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<ul>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>
<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>

</ul>
</div>
<!-- Blogger Dikey Menu Code From http://etralibela-61.blogspot.com/ -->

4. Gatgedi kaydederek ana sayfanızda görünmesini isteğiniz kısıma sürükleyerek bırakın.
5. Kod içerisinde ki kırmızı yazılı link yerlerine ekleyecek olduğunuz menü başlıklarına ait linkleri ekleyecek olduğunuz kısımdır.
6. Mavi yazılı menü başlıkları yerine istediğiniz gibi değiştirin.
7. Eğer menüleri çoğaltmak isterseniz altta ki kodu ekleyerek menü sayısını arttırabilir,yada menü sayısını azaltmak isterseniz yine alttaki kodun aynısını silerek menüleri azaltabilirsiniz.

<li><a href="http://etralibela-61.blogspot.com/">Bilgi Cafem 61</a></li>

8. Böylece bu menüyü Blogger'de kullanmaya başlayabilirsiniz.


Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!