Blogger Açılır Menü (Multilevel Drop Down Menu) Yapımı
Blogum için yatay basamaklı açılır menü gerektiğinde ,birçok menü örneğini denedim .Ancak hiçbiri ihtiyacımı karşılamadı ve hata verdiler. Özellikle, alt menülere (sub menu) tıklandığında ,yeni alt menüler(alt katmanlar) gözükmüyordu. Bu gibi sebeblerden ,ihtiyaç duyulduğunda yatay içiçe açılır menü (multilevel drop-down menu) gereksinimini karşılayacak Css tabanlı sorunsuz bir menü örneği geliştirdim.
▸ Aşağıdaki kodları , bulduğumuz ]]></b:skin> kodunun üstüne yapıştırıyoruz .
butonuna basarak düzenlememizi kaydedelim.
▸ Açılan pencerede İçerik kısmına aşağıdaki menümüzün kodlarını yapıştıralım ve kaydedelim.
▶ Blogumuza menüyü eklemek için ilk olarak menünün Css kodlarını ekleyelim ;
▸ Blogger Tema_HTML'yi düzenle tıklayarak Html kodların olduğu sayfaya gelelim . Klavyeden Ctrl + F tuşlarına basarak ]]></b:skin> kodunu buluyoruz.▸ Aşağıdaki kodları , bulduğumuz ]]></b:skin> kodunun üstüne yapıştırıyoruz .
#AnaMenu {
width: 920px; /* Menünün genişliğini ayarlayabilirsiniz. */
height: 30px; /* Yüksekliği değiştirebilirsiniz. */
position: relative;
background: #0080ff; /* Menü arka plan rengi */
margin:0 0 0 -30px;
padding: 10px 0 0 15px;
border: 0; /* Çerçeve ayarı */
}
#nav { display:block;background:transparent;margin:0;padding: 0;border: 0
}
#nav ul { float: none; display:block;
height:35px;
margin:16px 0 0 0;border:0;
padding: 15px 0 3px 0;
overflow: visible
}
#nav ul li{border:0;}
#nav li a, #nav li a:link, #nav li a:visited {height:23px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
color: #fff; /* Linkin yazı rengi */
display: block;border:0;border-right:1px solid #efefef;text-decoration:none;
margin: 0;letter-spacing:0.6px;
padding: 2px 10px 2px 10px; /* Boşlukları değiştirebilirsiniz */
}
#nav li a:hover, #nav li a:active {
color: #fff; /* Mouse linkin üstüne gelince yazı beyaz renk olur. */
margin: 0;background:#6ab5ff;border:0;
padding: 2px 10px 2px 10px; /* Boşlukları değiştirebilirsiniz */
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #fafafa; /* Menü açılan linklerde arka plan rengi */
width: 200px;
color: #05429b; /* Linklerin yazı rengi */
float: none;
margin: 0;border-bottom:1px solid #9be6e9;
padding: 8px 15px; /* Boşluk miktarı */
}
#nav li li a:hover, #nav li li a:active {
background: #2793ff; /* Açılan linklerde mouse üstüne gelince arkaplan rengi */
color: #fff; /* Mouse link üstündeyken yazı rengi */
padding: 8px 15px;border:0 ;text-decoration:none}
#nav li {float: none; display: inline-block;margin: 0; padding: 0; border: 0 }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 200px; margin: 0; padding: 0;background:transparent}
#nav li ul a { width: 170px;border:0;text-decoration:none;font-size:14px }
#nav li ul ul { margin: -40px 0 0 230px }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static}
width: 920px; /* Menünün genişliğini ayarlayabilirsiniz. */
height: 30px; /* Yüksekliği değiştirebilirsiniz. */
position: relative;
background: #0080ff; /* Menü arka plan rengi */
margin:0 0 0 -30px;
padding: 10px 0 0 15px;
border: 0; /* Çerçeve ayarı */
}
#nav { display:block;background:transparent;margin:0;padding: 0;border: 0
}
#nav ul { float: none; display:block;
height:35px;
margin:16px 0 0 0;border:0;
padding: 15px 0 3px 0;
overflow: visible
}
#nav ul li{border:0;}
#nav li a, #nav li a:link, #nav li a:visited {height:23px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
color: #fff; /* Linkin yazı rengi */
display: block;border:0;border-right:1px solid #efefef;text-decoration:none;
margin: 0;letter-spacing:0.6px;
padding: 2px 10px 2px 10px; /* Boşlukları değiştirebilirsiniz */
}
#nav li a:hover, #nav li a:active {
color: #fff; /* Mouse linkin üstüne gelince yazı beyaz renk olur. */
margin: 0;background:#6ab5ff;border:0;
padding: 2px 10px 2px 10px; /* Boşlukları değiştirebilirsiniz */
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #fafafa; /* Menü açılan linklerde arka plan rengi */
width: 200px;
color: #05429b; /* Linklerin yazı rengi */
float: none;
margin: 0;border-bottom:1px solid #9be6e9;
padding: 8px 15px; /* Boşluk miktarı */
}
#nav li li a:hover, #nav li li a:active {
background: #2793ff; /* Açılan linklerde mouse üstüne gelince arkaplan rengi */
color: #fff; /* Mouse link üstündeyken yazı rengi */
padding: 8px 15px;border:0 ;text-decoration:none}
#nav li {float: none; display: inline-block;margin: 0; padding: 0; border: 0 }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 200px; margin: 0; padding: 0;background:transparent}
#nav li ul a { width: 170px;border:0;text-decoration:none;font-size:14px }
#nav li ul ul { margin: -40px 0 0 230px }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static}
*Yukarıdaki Css kodların yanındaki yeşil renkli yazılar ,açıklama satırlarıdır.Örneğin; menünün temel genişliği width: 920px; kodları ile, yüksekliği height: 30px; kodları ile belirlenmiştir.Kendi şablonunuza göre gerekli değişiklikleri yapabilirsiniz.
Menünün görsel yönünü güzelleştirme amacıyla, menü linkleri arasında dolaşırken yavaş arkaplan rengi değişimini sağlayan geçiş efekti kullandım.
▸Sağ alt köşede Kaydet Menünün görsel yönünü güzelleştirme amacıyla, menü linkleri arasında dolaşırken yavaş arkaplan rengi değişimini sağlayan geçiş efekti kullandım.
#nav li a, #nav li
a:link, #nav li a:visited {
...
-webkit-transition:
background-color 1s ease-out;
-moz-transition:
background-color 1s ease-out;
-o-transition:
background-color 1s ease-out;
transition:
background-color 1s ease-out;
...
}
butonuna basarak düzenlememizi kaydedelim.
▶ İkinci aşama olarak , Html kodları Gadget'e eklemek için ;
▸ Blogger kullanıcı panelinde Düzen (eski adı ile Yerleşim) sekmesine tıklıyoruz. Gadget ekleme sayfası açıldığında , menüyü eklemek istediğimiz alan için ,o alandaki "Gadget Ekle" ye tıklayalım(ben Çapraz Sütun alanına açılır menü eklemek istediğim için oradaki Gadget Ekle'ye tıkladım).
<div id='AnaMenu'>
<ul id='nav'>
<li><a
href='#'>Anasayfa</a></li>
<li><a
href='#'>Menu1</a>
<ul><!—Menu1 Alt menu (Sub menu) için başlangıç -->
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li> </ul> <!—Alt menu (Sub menu) bitiş -->
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li>
<li><a href='#'>Menu1-alt menu</a></li> </ul> <!—Alt menu (Sub menu) bitiş -->
</li>
<li><a href='#'>Menu2</a> </li>
<li><a href='#'>Menu2</a> </li>
<li> <a
href='#'>Menu3 </a></li>
<li> <a
href='#'>Menu4 </a>
<ul>
<li><a
href='#'>Menu4-alt menu</a>
<ul>
<li><a href='#'>Menu4-alt -alt menu</a></li>
<li><a href='#'>Menu4-alt -alt menu</a></li>
<li><a href='#'>Menu4-alt-alt
menu</a></li>
</ul>
</ul>
<li> <a href='#'>Menu4-alt menu
</a></li>
<li> <a
href='#'>Menu4-alt menu </a>
<ul>
<li><a href='#'>Menu4-alt -alt menu</a></li>
<li><a href='#'>Menu4-alt -alt menu</a></li>
<li><a href='#'>Menu4-alt-alt
menu</a></li>
<li><a href='#'>Menu4-alt-alt menu</a></li>
<li><a href='#'>Menu4-alt-alt menu</a></li>
<li><a href='#'>Menu4-alt-alt
menu</a></li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
* İstediğiniz şekilde ,yeni menü öğeleri veya alt menü öğeleri ekleyebilirsiniz ,çıkarabilirsiniz. Kodlardaki '#' işareti yerine kendi link adresinizi yazmanız gerekir. Örneğin try-codes.blogspot.com gibi. <a href='#'> bu şekilde kalırsa linke tıklandığında herhangi bir işlem yapılmaz.
Oluşturduğumuz yatay açılır menü sadece blogger da değil, diğer blog ve site kodları içinde de kullanılabilir. Bunun için yukarıdaki Css kodları ekleyeceğiniz platformda <head> tagından sonra <style type="text/css">..</style> tagları arasına yazılması gerekir.
Oluşturduğumuz yatay açılır menü sadece blogger da değil, diğer blog ve site kodları içinde de kullanılabilir. Bunun için yukarıdaki Css kodları ekleyeceğiniz platformda <head> tagından sonra <style type="text/css">..</style> tagları arasına yazılması gerekir.
Maske alırken eczane gibi sağlık kuruluşundan alınmalı, maske kutusunda CE (Conformité Européenne) işareti aranmalı, 
