Menu

Blogger CSS3 Siyah Açılır Menu Yapma

Blogger Html veya css kodlar ile güzel bir açılır menü yapma,aşağıda verdiğim kodların uygulaması çok basit ve kolaydır.

Html veya css kodlar her internet tarayıcı ile uyuşmaktadır.İstediğiniz gibi düzenleyerek kendimize uygun bir menü elde edebilirsiniz.Bu menüyü bloğunuza ekleyerek etikete bağlı olarak da kullanabilirsiniz.

Blogger için Css kodları ile oluşturulmuş bu css drop Menü'nün nasıl göründüğünü test etmek istiyorsanız resmin altındaki Demo butonuna tıklayarak görebilirsiniz.

Blogger CSS3 Açılır Menu Yapma


---internetten Para Kazanma Stratejileri

---Google Kazançları Affiliate Satış Ortaklığı

---Facebooktan Para Kazanma Yöntemleri

Blogger Html veya css kodlarından, Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.  


                   Blogger CSS3 Açılır Menu Yapma
   
Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---Blogger Yeşil Navigation Menü Tasarımı

---Blogger İçin Yüzer Sosyal Medya Widget

İlk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

En güzel Blogger Sosyal Medya Eklentisi

En güzel Blogger Sosyal Medya Eklentisi

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız, Blogger CSS3 Açılır Menu Yapma eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<style> /*-----Blogger CSS3 Açılır Menu Yapma Eklentisi SEO Mektebi----*/ #bt-menu, #bt-menu ul { margin: 0; padding: 0; list-style: none; } #bt-menu { width: 960px; margin: 60px auto; background: #DADFE1; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #bt-menu:before, #bt-menu:after { content: ""; display: table; } #bt-menu:after { clear: both; } #bt-menu { zoom:1; } #bt-menu li { float: left; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #bt-menu a { float: left; padding: 12px 30px; color: #000000; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 0px 0 #000; } #bt-menu li:hover > a { background: #333333; color: #fafafa; } *html #bt-menu li a:hover { /* IE6 only */ color: #333333; } #bt-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #DADFE1 url('images/pageglare.png') no-repeat scroll; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #bt-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #bt-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #bt-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #bt-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #bt-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #bt-menu ul a:hover { background-color: #333333; } #bt-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #bt-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #333333; } #bt-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #333333; } #bt-menu ul li:first-child a:hover:after { border-bottom-color: #DADFE1; } #bt-menu ul ul li:first-child a:hover:after { border-right-color: #DADFE1; border-bottom-color: transparent; } #bt-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style>                                                              <ul id="bt-menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">Jquery</a></li> <li><a href="#">Blogger Tips</a></li> </ul> </li> <li><a href="#">Free Vector</a> <ul> <li><a href="#">Social Icon</a></li> <li><a href="#">Website Icon</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Tools</a> <ul> <li><a href="#">Parser Tool</a></li> <li><a href="#">Escape Tool</a></li> </ul> </li> </ul>

Düzenleme:
Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.

SEO Mektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.


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

Henüz Yorum Yapılmamış " Blogger CSS3 Siyah Açılır Menu Yapma "

Önerilen Yazı
×