ŞU AN BLOGUMDA KULLANDIĞIM AÇILIR MENÜ KODLARI

Blog yayınlarınızın karmaşadan kurtulup daha derli toplu olması için açılır menü eklemeniz çok faydalı olacağı kanısındayım. Şu an bu blogumda kullandığım açılır menü kodlarını paylaşıyorum.
Böylece blogda gezinti daha akıcı ve daha kolay olmasını sağlanmış olacaktır.
Ziyaretçiler aradığını çok daha kolay bulabilecekler. Sayfalarınız daha çık tıklamış olacaktır.
Daha düzenli ve profesyonel bir görünüm kazanmış olacak blogunuz.

Neyse dostlarım uzatmadan anlatıma geçelim :)

Bildiğiniz gibi Blogger'a giriş yapıyoruz.
Şablon sekmesine tıklayıp, HTML'yi Düzenle diyoruz. Sonrasında blogun kodlarına ulaşmış oluyoruz. Burada CTRL+F tuşları yardımıyla aşağıdaki kodu buluyoruz;

]]></b:skin>

Bulduğumuz bu kod satırının hemen üzerine aşağıdaki stil kodlarını ekliyoruz.

#menu h2 {display:none} .menu,.menu h3,.menu a,.menu ul,.menu li { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0 } .menu ul,.menu li { font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } .menu h3 { font-family:Arial, Helvetica, sans-serif; font-weight:600; font-size:14px; line-height:21px; margin-top:7px; margin-bottom:14px; padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF; border-bottom:1px solid #888; } .menu { list-style:none; width:900px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #1b95e0; border: 1px solid #1b95e0; border-top: 1px solid #1b95e0; background: -moz-linear-gradient(top, #1b95e0, #047DC7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b95e0), to(#047DC7)); } .menu li { float:left; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li:hover { z-index:2; background:#F4F4F4; border:1px solid #aaaaaa; padding: 4px 9px 4px 9px; background: -moz-linear-gradient(top, #FFF7EE, #000000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF7EE), to(#FFEEDD)); -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .menu li.no_drop:hover { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li a { color: #FFFFFF; outline:0; text-decoration:none; display:block; text-shadow: 1px 1px 1px #000; } .menu li:hover a { color:#161616; text-shadow: none; } .menu li .drop { padding-right:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCxi7Bvy8NmL4YRIGexdncnJdNiYZOUe0ansgy__MQFvdf7K5yvjfMHikWNLU9rHMSCxPcAz5iiLPyOsLiMXz4t11n7N51tEvZ8OKII4XRk7bMcF9iS3sJdYh2j0UwyZHyMaG5Mz3XzJQ/s12-Ic42/drop.png) no-repeat right 8px; } .menu li:hover .drop { padding-right:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCxi7Bvy8NmL4YRIGexdncnJdNiYZOUe0ansgy__MQFvdf7K5yvjfMHikWNLU9rHMSCxPcAz5iiLPyOsLiMXz4t11n7N51tEvZ8OKII4XRk7bMcF9iS3sJdYh2j0UwyZHyMaG5Mz3XzJQ/s12-Ic42/drop.png) no-repeat right 7px; } .menu li:hover div a { color:#005284; } .menu li:hover div a:hover { color:#000000; } .menu li ul li a:hover { color:#FFC488; } .dropdown_1column,.dropdown_2columns { margin:4px auto; position:absolute; background: #FFF7EE; border:1px solid #aaaaaa; border-top:none; padding:10px 5px 10px 5px; background: -moz-linear-gradient(top, #1b95e0, #111111); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b95e0), to(#FFFFFF)); } .dropdown_1column,.dropdown_2columns { left:-999em; text-align:left; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; -khtml-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto} .col_1,.col_2 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } .menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } .menu li ul li:hover {background:none; border:none; padding:0; margin:0; }

Hemen devamında yine ctrl+f tuşlarını kullanarak aşağıda belirttiğim kod satırını buluyoruz;

<div class='tabs-outer'>

Hemen üstüne HTML kodlarını yani menülerimizin olduğu kodları ekliyoruz. Sonrasında şablonu kaydetmeyi unutmayın.

<ul class='menu'> <li class='no_drop'><a href='http://yuksel-duman.blogspot.com/'>Ana Sayfa</a></li> <li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/yazar.html'>Hakkımda</a></li> <li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/iletisim-formu.html'>İletişim</a></li> <li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/arsiv.html'>Arşiv</a></li> <li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/ne-dediler.html'>Önerileriniz</a></li> <li class='no_drop'><a href=''>Destek Ol</a></li> <li><a class='drop' href='#'>Kategoriler</a> <div class='dropdown_1column'> <div class='col_1'> <ul> <li><a href=''>Blog Araçları</a></li> <li><a href=''>Bloger</a></li> <li><a href=''>Blog Makaleleri</a></li> <li><a href=''>Blogspot SEO</a></li> <li><a href=''>Blog İpuçları</a></li> <li><a href=''>Blogger Eklentileri</a></li> <li><a href=''>Blogger İpuçları</a></li> <li><a href=''>Blogger Şablonları</a></li> <li><a href=''>Miasfir Yazılar</a></li> <li><a href=''>SEO</a></li> <li><a href=''>Sosyal Medya</a></li> </ul> </div> </div> </li> <li><a class='drop' href='#'>Araçlar</a> <div class='dropdown_2columns'> <div class='col_1'> <h3> Google Araçları</h3> <ul> <li><a href='https://www.google.com/webmasters/tools/mobile-friendly/'>Mobil Uyumluluk</a></li> <li><a href='http://www.google.com/analytics/'>Google Analytics</a></li> <li><a href='http://www.google.com/intl/tr/webmasters/'>Google Webmasters</a></li> <li><a href='https://developers.google.com/speed/pagespeed/insights/'>Google Page Speed</a></li> </ul> </div> <div class='col_1'> <h3> Çeşitli</h3> <ul> <li><a href='http://yuksel-duman.blogspot.com/p/html-editor.html'>HTML Editor</a></li> <li><a href='http://yuksel-duman.blogspot.com/p/webmaster-makaleler.html'>WM Makale</a></li> <li><a href='http://yuksel-duman.blogspot.com/p/misafir-blogculuk.html'>Makaleni Yayınla</a></li> <li><a href='http://yuksel-duman.blogspot.com/p/tanitim-yazilari.html'>Site Tanıtım</a></li> </ul> </div> <div class='col_1'> <h3> Sosyal Medya</h3> <ul> <li><a href=''>Facebook</a></li> <li><a href=''>Twitter</a></li> <li><a href=''>Google+</a></li> </ul> </div> <div class='col_1'> <h3> Linkler</h3> <ul> <li><a href=''>Link1</a></li> <li><a href=''>Link2</a></li> <li><a href=''>Link3</a></li> </ul> </div> </div> </li> </ul>

Sevgili arkadaşlar işlemimiz bu kadar. Açılır menümüz blogumuza eklenmiş oldu.
Takıldığınız yerler olursa lütfen sormaktan çekinmeyin.Yardım ederim.
Sevgiyle kalın...