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

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">
<div id="wrap">
<ul class="menu">
<li><a class="menu" href="https://www.blogger.com/"><img border="0" src="https://lh5.googleusercontent.com/-AZKQiBwcj7k/U4SRDc0TggI/AAAAAAAALaI/qyiHFhYCUkE/h120/logo.png" /></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 action="/search" id="search_BH" method="get">
<input name="q" placeholder="Ara..." size="40" type="text" />
</form>
</li>
<li><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6127256138492619129#">Blogger Area</a></li>
<li><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6127256138492619129#">Galeri</a></li>
<li><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6127256138492619129#">Komikler</a></li>
<li><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6127256138492619129#">Full Albümler</a></li>
<li><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6127256138492619129#">Videolar</a></li>
</ul>
</div>

YINE ANA MENÜDE ŞABLON > HTML'YI DÜZENLE'YE TIKLIYORUZ.
AÇILAN SAYFADA ŞUNU ARIYORUZ;

]]>

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.