Menu

CSS3 Siyah Navigasyon Menü

Aşağıdaki CSS kodunu kullanarak Mavi Renkli Dikey Menü yapabilirsiniz,bu menüler ile istediğiniz katagorileri oldukça kullanışlı bir şekilde sayfa tasarımınıza uygun renklerde değiştirerek kullana bilirsiniz.

Kodu yüklemek için Aşağıdaki adımları takip ediniz.

CSS3 Siyah Navigasyon Menü
CSS3 Siyah Navigasyon Menü


1.Adım
1-İlk önce Blogger.com giriş yapınız sonra Şablon/ HTML Düzenle adımlarını takip ediniz.

2-Kodu yükleyeceğiniz yeri bulmak için,kodumuz CSS olduğu için ]> </ b:skin> buluyoruz.
Bu kodu bulmak için ]> </ b:skin> kodunu kopyalayarak Ctrl + F tuşlarına basıp kodlarınızın içinde aratın


3-Bulduğunuz ]]> </ b:skin> kodunun üstüne aşağıda verdiğim kodu ekleyiniz ve son olarak Şablonunuzu kaydediniz.


Aşağıdaki CSS kodları içindeki #000000 şeklindeki renk kodlarını istediğiniz gibi değiştirebilirsiniz.


SEOMektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

/*---- SEO Mektebi CSS3 Navigasyon Menü-------*/
#panel { width:300px; list-style:none; padding-top:30px; display:inline-block; } #panel li { border-radius:3px 3px 3px 3px; margin-top:5px; width:150px; background: #000000; background: -moz-linear-gradient(top, #161616 0%, #000000 100%); background: -webkit-linear-gradient(top, #161616 0%,#000000 100%); background: -o-linear-gradient(top, #161616 0%,#000000 100%); border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; } #panel li a { color:#fff; display:block; padding:10px; } #panel li a:hover { color:#00c6ff; } #panel li.animation { -moz-transition: all 0.4s ease-in-out; -moz-transform:translateX(0px); -o-transition: all 0.4s ease-in-out; -o-transform:translateX(0px); -webkit-transition: all 0.4s ease-in-out; -webkit-transform:translateX(0px); } #panel li.animation:hover { -moz-transform:translateX(25px); -o-transform:translateX(25px); -webkit-transform:translateX(25px); }

2.Adım
Yerleşim/Gedget Ekle/ HTML/JavaScript


CSS3 Siyah Navigasyon Menü

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız,Mavi Renkli Dikey Menü yü site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz. 

CSS3 Siyah Navigasyon Menü

<ul id="panel">
<li class="animation">
<a href="url sayfa adresiniz">Ana Sayfa</a></li>
<li class="animation"><a href="#">Link 2</a></li>
<li class="animation"><a href="#">Link 3</a></li>
<li class="animation"><a href="#">Link 4</a></li>
<li class="animation"><a href="#">Link 5</a></li> </ul>

Yukarıdaki Ana Sayfa şeklinde başlayan sekmeleri istediğiniz kadar çoğaltabilirsiniz.

<li class="animation"><a href="url sayfa adresiniz">Ana Sayfa</a></li>

Yukardaki kodu ardada kopyalayarak istediğiniz miktarda sekme ekleyebilirsiniz.Değiştirmeniz gereken yerleri kırmızı renkle işaretledim.



Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " CSS3 Siyah Navigasyon Menü "

Önerilen Yazı
×