Yatay Renkli Blogger Menü

ads

ads

Blogger  Yatay  Harika Menü 

Bu yazımda size  daha önce pek  denk gelmemiş olduğunuz kaliteli renkli bir menünün kodunu paylaşacağım. Menünün renklerini istediğiniz  renklere ayarlayabilirsiniz.

Sitenizin herhangi bir bölümüne HTML JavaScript  Gadget Ekle yolunu takip ederek aşağıdaki kodu eklemeniz yeterli olacaktır.

<style> .wg-ribmenu span { background:#56aaff; display:inline-block; font-family:verdana; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .wg-ribmenu a:hover span { background:#FFD204; margin-top:0; } .wg-ribmenu span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .wg-ribmenu span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .wg-ribmenu a:link, .wg-ribmenu a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .wg-ribmenu:after, .wg-ribmenu:before { margin-top:0.5em; content: ""; float:left; border: 1.5em solid #000000; } .wg-ribmenu:after { border-right-color:transparent; } .wg-ribmenu:before { border-left-color:transparent; } </style> <div class='wg-ribmenu'> <a href='http://www.woov.org/'><span>Ana Sayfa</span></a> <a href='http://www.woov.org/search/label/Amat%C3%B6r%20Videolar'><span>Amatör</span></a> <a href='http://www.woov.org/search/label/Araba%20Videolar%C4%B1'><span>Arabalar</span></a> <a href='http://www.woov.org/search/label/Dersler'><span>Ders</span></a> <a href='http://www.woov.org/search/label/%C4%B0slami%20Videolar'><span>Dini</span></a> <a href='http://www.woov.org/search/label/Hayvan%20Videolar%C4%B1'><span>Hayvanlar</span></a> <a href='http://www.woov.org/search/label/%C4%B0lgin%C3%A7%20Videolar'><span>İlginç</span></a> <a href='http://www.woov.org/search/label/Komik%20Videolar'><span>Komik</span></a> <a href='http://www.woov.org/search/label/Reklam%20Videolar%C4%B1'><span>Reklam</span></a> <a href='http://www.woov.org/search/label/Televizyon'><span>Televizyon</span></a> <a href='http://www.woov.org/search/label/T%C3%BCm%20Videolar'><span>Tüm Videolar</span></a> <a href='http://www.woov.org/search/label/Blog'><span>Blog</span></a> </div>

Renklerde  değişiklik yapmak için şu kodları bulun

background:#56aaff;  - Menünün Ana rengini değişrmek için   belirlediğiniz renk kodunuz kırmızı bölüme yapıştırın.

Bu bölümde menünün üstüne gelindiğinde yukarıdaki resimde turuncu olan hover bölümünün rengini değiştirmek için kırmızı renkli yere  belirlediğiniz renk kodunu ekleyin.

wg-ribmenu a:hover span {
    background:#FFD204; 
    margin-top:0;

ads