css ile menü yapımı

   Bloggerda Menü kullanmanın öneminden daha önce bahsetmiştik . Hatta menüler websitelerinin demirbaşlarından dır demiştik . Kategori kullanımı , menü kullanımı ziyaretçilerin daha hızlı ve aradığı bilgiye daha kolay ulaşmasını sağlayacaktır. Standart bir menü oluşturmak mümkündür . Ama Css ile görsel olarak çok daha güzel menüler hazırlanabilir. Bu yazımda sizlere Css ile menü yapımı ve kullanımından bahsetmek istiyorum.

css menü oluşturma

TEST

• Css ile hover menü tasarımı
• Blogger css menü

• Blogger paneline giriş yapınız.
• Şablon sekmesine tıklayınız ve Html'yi düzenle butonuna tıklayınız.
• Aşağıda yazan kodu Ctrl+F yardımı ile kodlar arasında aratıp bulunuz.

]]></b:skin>

#arrowunderline{


list-style-type:none;

margin:0;
padding:0;

ont: bold 16px Geor

text-align:center; 

fgia;
}
#arrowunderline li{

:25px; 
}
#arro

display:inline;
margin-righ
twunderline li a{
position:relative;

t-decoration

color:black;
padding-bottom:8px; 
te
x:none;
}
#arrowunderline li a:hover{

rrowunderline li a:hover:after{ 

border-bottom:3px solid #25bd0d; 
}
#
acontent:'';
width:0;
height:0;
position:absolute;
left:50%;

:solid;
border-col

margin-left:-5px; 
bottom: 0;
border-width:5px; 
border-styl
eor: transparent transparent #25bd0d transparent; 
}

• Daha sonra Kaydet butonuna tıklayın.
• Yerleşim sekmesinden gadget ekle ve html/javascript'e tıklayınız ve aşağıdaki kodları kopyalayıp yapıştırarak kaydediniz.
• Eklentiyi uygulamadan önce her ihtimale karşı blogunuzun şablonunun bir yedeğini almayı unutmayın.

<div id="arrowunderline">

<ul>

a href="#"><span>Anasayfa</span></a></li>
<li>

<li>
<<a href="#"><span>Kişisel</span></a></li>

li>
<li><a href="#"><span>Hakkımda</span></a><

<li><a href="#"><span>İnternet</span></a><
//li>
<li><a href="http://www.ugurturkoglu.blogspot.com/"><span>İletişim</span></a></li>


</ul>


</div
>

• Yukarıdaki kodlarda bulunan # ile gösterilen yerlere vermek istediğiniz link'i yazınız. Örneğin son kod da görüldüğü gibi iletişim kısmının # yazan yerine bir link verilmiş.
• Menü sayısını artırmak isterseniz eğer :

<li><a href="#"><span>İnternet</span></a></li>

Css menü

• Blogger Css menü 

• Blogger paneline giriş yapınız.
• Şablon sekmesine tıklayınız ve Html'yi düzenle butonuna tıklayınız.
• Aşağıda yazan kodu Ctrl+F yardımı ile kodlar arasında aratıp bulunuz.

]]></b:skin>

• Yukarıdaki bulmuş olduğunuz kodun hemen bir üst satırına aşağıdaki kodları yapıştırınız.

/* CSS menü ugurturkoglu.blogspot.com */
ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; 
background: #ececec; 
text-decoration: none;
font: bold 14px Arial;
letter-spacing: 2px; 
overflow: hidden;
height: 30px; 
text-align: center;
border-radius: 5px; 
-moz-transition: all 0.3s ease-in-out; 
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ 
position: relative;
display: block;
height: 100%;
padding: 6px; 
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; 
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ 
content: attr(data-text); 
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; 
background: #72cb47; 
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}

• Kaydet butonuna tıklayınız.
• Tekrardan blogger paneline dönünüz.
• Yerleşim Sekmesine tıklayınız.
• Gadget ekle ve ardından html javascript'i tıklayınız.
• Açılan sayfaya aşağıdaki yer alan kodları yapıştırınız.

<ul>
<li><a class="glidebutton" href="#"><span data-text="Anasayfa">Anasayfa</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Haberler">Haberler</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Blogger">Blogger</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="SEO">SEO</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Kişisel">Kişisel</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Hakkımda">Hakkımda</span></a></li>
<li><a class="glidebutton" href="http://www.ugurturkoglu.blogspot.com"><span data-text="İletişim">İletişim</span></a></li>
</ul>

• Menü deki kategorileri artırmak veya azaltmak isterseniz

<li><a class="glidebutton" href="#"><span data-text="Anasayfa">Anasayfa</span></a></li>

Css menü

• Blogger panelinize giriş yapınız ve şablon html'yi düzenle butonuna tıklayınız.
• Ctrl+f yardımı ile aşağıda bulunan kodu aratıp bulunuz.

]]></b:skin>

• Bulduğunuz kodun hemen üst satırına aşağıda yer alan kodları yapıştırınız.

.btrix-greenymenu{width:950px;background: #7cae15;color:#eee;text-shadow: 1px 1px 1px #495505;display:inline-block;-moz-box-shadow: 3px 3px 4px #007308;
-webkit-box-shadow: 3px 3px 4px #007308;box-shadow: 3px 3px 4px #007308;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.btrix-greenymenu ul{width:950px;padding:0;margin:0 auto}
.btrix-greenymenu li:first-child a{padding:7px 10px 3px}
.btrix-greenymenu li{list-style:none;display:inline-block;float:left}
.btrix-greenymenu li a{background:url(http://1.bp.blogspot.com/-4OIAjD0uSN0/UR1FWgJm2YI/AAAAAAAAAJk/H-ajqHe53Ic/s1600/sprite.png) right no-repeat;color:#fff;display:block;font:16px Oswald;position:relative;text-decoration:none;padding: 8px 15px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.btrix-greenymenu li a:hover{background:#333;color:#fff;text-shadow: 1px 1px 1px #000;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;}
.btrix-greenymenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.btrix-greenymenu li li a,.btrix-greenymenu li li a:link,.btrix-greenymenu li li a:visited{background:#439700;border-bottom:1px solid #000;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.btrix-greenymenu li li a:hover,.btrix-greenymenu li li a:active{background:#444}
.btrix-greenymenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.btrix-greenymenu li ul a{width:140px}
.btrix-greenymenu li ul ul{margin:-33px 0 0 157px}
.btrix-greenymenu li:hover>ul,.btrix-greenymenu li.sfHover ul{left:auto}
.menusearch{width:200px;float:right;margin:0 auto;padding:5px 10px 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

• Kaydet butonuna tıklayıp bu ekrandan çıkınız.
• Daha sonra Blogger paneline tekrar giriş yapın.Yerleşim / gadget ekle / html-javascript'i seçiniz.
• Aşağıdaki kodları yapıştırınız ve kaydediniz.

<div class="btrix-greenymenu">
<ul class="sf-menu">
<li><a href="http://www.blogger.com/"><img alt="home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnwSV6aHRE7CTFpejZiuSmxtVpE2e5NavoCKLShyDu1amdZ3SZnjERYWxl_h14xVT8Iezobwgkogzoq-jthjEreL7B1nD56O-XFkAxu3aHISaIO2kD-P0A9FbljtHOL5kRUMJPVo98w8s/s1600/home.gif" style="padding: 0px;" /></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#"> Menu 2</a>
<ul>
<li><a href="#">alt Menu 1</a></li>
<li><a href="#">alt Menu 2</a></li>
<li><a href="#">alt Menu 3</a>
<ul>
<li><a href="#">alt Menu 3.1</a></li>
<li><a href="#">alt Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"> Menu 3</a>
<ul>
<li><a href="#">alt Menu 1</a></li>
<li><a href="#">alt Menu 2</a></li>
<li><a href="#">alt Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
<div class="menusearch">
<form action="/search" class="searchform" method="get">
<input class="searchfield" id="q" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="Search here...." />
    <input class="searchbutton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9FsjzX1IlUJXd6lW4RKIYfMny_a4PZmSCay9VIpM2GLIRnR1ZqkiH9pplOgNvInQU7NmSHRlHkS_EjT6MTtQ2_l6v1SRBAKfKYv8wckHJ8vNRcjc_sKXkWSH72O4LTOlPtTmA5ghWqk/s1600/tombolcari.gif" style="cursor: pointer; vertical-align: top;" type="image" value="Go" />
</form>
</div>
</div>

•  İşlem bu kadar.Css ile menü kullanımı bu şekilde.