Blogger Renkli Yatay Menü

   Sitenizde yer alan kategorileri gösteren yatay menüler okuyucularınız tarafından göze çarpan ilk alan olduğu için tasarımı bu menülerin tasarımı büyük önem taşıyor. Bunun için aşağıdaki kullanabileceğiniz yatay menü kodlarını sitenize ekleyerek, tek sıra halindeki menüyü kullanabilirsiniz. Bu noktada alternatifinizin çoktur. Bu menüyü hem header hemde footer kısmında tercih edebilirsiniz.

   Blogger Renkli Yatay Menü Siteme Nasıl Eklerim?

* Kumanda Panelinden Yerleşim'e tıklıyoruz.
* Gadget ekle > HTML/Javscript Ekle yolunu izliyoruz.
* Açmış olduğunuz gadget içerisini altta ki menü kodlarını ekleyin.
* Daha sonra menüleri kendi isteğinize göre doldurun.
* Eklemiş olduğunuz bu menü gadget'ini Blog isminizin yer altığı gadget'in altına veya görünmesini istediğiniz yere sürükleyin.
* Kenar çubuğunda bunu tavsiye etmem,menüler o zaman alt alta gelir.

<style> #multicolor-bar { background: #000; width: 100%; color: #FFF; margin: 10px 0; padding: 0; position: relative; border-top:0px solid #0099FF; height:35px; } #multicolor-nav { margin: 0; padding: 0; } #multicolor-nav ul { float: left; list-style: none; margin: 0; padding: 0; } #multicolor-nav li { list-style: none; margin: 10px; padding: 0; } #multicolor-nav li a, #multicolor-nav li a:link, #multicolor-nav li a:visited { color: #FFF; display: block; font:bold 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 11px 12px; text-decoration: none; } #multicolor-nav li a:hover, #multicolor-nav li a:active { background: #ee7d07; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 11px 12px; } #multicolor-nav li { float: left; padding: 0; } .color-1 { background:#0b5394; } .color-4 { background:#990000; } .color-5 { background:#d6253a; } .color-7 { background:#274e13; } .color-11 { background:#b45f06; } .color-14 { background:#741b47; } </style><br /> <div id='multicolor-bar'> <ul id='multicolor-nav'> <li class="color-1"><a href='#'>Home</a></li> <li class="color-4"><a href='#'>Link 1</a></li> <li class="color-5"><a href='#'>Link 2</a></li> <li class="color-7"><a href='#'>Link 3</a></li> <li class="color-11"><a href='#'>Link 4</a></li> <li class="color-14"><a href='#'>Link 5</a></li> </ul> </div>
* Menünün arka plan rengini değiştirmek için kodun başında bulunan background: #000 kodunun sayısal değer kısmını değiştirerek renk değişimini düzenleyebilirsiniz.


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