Blogger Meta Top Menu (Açılan arama kutucuklu)

Yapılışı:

• Yerleşim > Gadger Ekle > HTML/JAVASCRIPT ekliyoruz. Açılan mini pencereye alttaki kodu yapıştırıyoruz. (Gerekli kısımları kendinize göre düzenlemeyi unutmayın!)

<div id="wrap">
<ul class="menu">
<li><a href="/" class="menu"><img src="https://lh5.googleusercontent.com/-AZKQiBwcj7k/U4SRDc0TggI/AAAAAAAALaI/qyiHFhYCUkE/h120/logo.png" border="0" /></a></li>


<style type="text/css">
#search_BH {
top: 6px;
position: relative;
}
#search_BH input[type="text"] {
background: url(https://lh6.googleusercontent.com/-U...earch-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;

padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;


left: 100px;
top: 8px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search_BH input[type="text"]:focus {
width: 200px;
}
</style>

<li>
<form method="get" action="/search" id="search_BH">
  <input name="q" type="text" size="40" placeholder="Ara..." />
</form></li>




<li><a href="#" class="menu">Blogger Area</a></li>

<li><a href="#" class="menu">Galeri</a></li>
<li><a href="#" class="menu">Komikler</a></li>
<li><a href="#" class="menu">Full Albümler</a></li>
<li><a href=#" class="menu">Videolar</a></li>

</ul></div>

• Yine ana menüde Şablon >  HTML'yi Düzenle'ye tıklıyoruz. 
• Açılan sayfada şunu arıyoruz;

]]>

Bulduğunuz bu kodun hemen öncesine Alttaki kodu ekliyoruz.

*--/UST MENU\--*

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
position: fixed;

}

#newnavbar li a{
color:#000000;
}

#newnavbar li a:visited {
color: #c00000;
}

#newnavbar li a:hover {
color:  #c00000;

}





*--/ARAMA KUTUSU AÇILAN\--*


input[type=search] {
 -webkit-appearance: textfield;
 -webkit-box-sizing: content-box;
 font-family: helvetica;
 font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
 display: none;
}
input[type=search] {
 background: #ededed;   /*Arkaplan*/
 border: solid 3px #ccc;   /* Kenarlık */
 border-radius:3px;  /*köşe yumuşatma*/
 padding: 9px 10px 9px 10px;
 width: 30px;  /*Başlangıçtaki genişlik */
 -webkit-transition: all .5s; /*Animasyon */
 -moz-transition: all .5s;/*Animasyon */
 transition: all .5s; /* Animasyon */
 }
input[type=search]:focus {
width: 130px; /* Tıklandığında genişlik */
background-color: #f9f9f9; /* tıklandığında arkaplan*/
border-color: #22c8e6; /*tıklandığında kenarlık rengi*/
}
input:-moz-placeholder {
color: #999;}
input::-webkit-input-placeholder { color: #999; }

İşlem bu kadar. Kolay gelsin.