Merhabalar,

SS'de görüldüğü üzere arama kutucuğu en sağda duruyor. Ben logonun sağına almak istiyorum. Yani tamamıyla yazılar sağa kayıp araya girecek arama kutucuğu.




İstediğim görüntü aşağıdaki gibi olması;


Kodları veriyorum, editlenebilirse çok makbule geçer veya yapılışını gösterebilirseniz ben ayarlamak için hazırım

<div id="wrap">
<ul class="menu">
<li><a href="http://metamorpheuss.blogspot.com.tr/" 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 { 
} 
#search_BH input[type="text"] { 
    background: url(https://lh6.googleusercontent.com/-UrPIk8pMX0k/UT3FSFQG0vI/AAAAAAAAHtE/wKlxbPoWoW0/s15/search-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; 
      position: fixed;

      right: 600px;
      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>
<h2 class='title'>Ne Aramıştınız?</h2> 
<div class='widget-content'> 
<center><form method="get" action="/search" id="search_BH"> 
  <input name="q" type="text" size="40" placeholder="Ara..." /> 
</form></center></div>




<li><a href="http://metamorpheuss.blogspot.com/search/label/ders" class="menu">Blogger Area</a></li>

<li><a href="http://metamorpheuss.blogspot.com.tr/search/label/galeri" class="menu">Galeri</a></li>
<li><a href="http://metamorpheuss.blogspot.com/search/label/komik" class="menu">Komikler</a></li>
<li><a href="http://metamorpheuss.blogspot.com/search/label/muzik" class="menu">Full Albümler</a></li>
<li><a href="http://metamorpheuss.blogspot.com/search/label/video" class="menu">Videolar</a></li>
<li><a href="http://metamorpheuss.blogspot.com.tr/p/iletisim.html" class="menu">İletişim</a></li>

</ul>

</div>

CSS Kodları;

*--/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; }















*--/UST MENUDE ALTA AÇILAN MENU\--*



#wrap {width:720px;margin:0 auto;}


ul.menu {list-style:none;margin:0;padding:0;font:bold 14px/24px arial, verdana, sans-serif;color:#ededed;}
ul.menu  li {float:left;position:relative;color:#444444;}
li ul {display:none;list-style:none;}
ul li a.menu{float:none;padding:8px 10px 8px 10px;color:#444444;display:block;text-decoration:none;border-bottom:4px }
ul li a.menu:hover{color:#999;}

li:hover > ul {display:block;position:absolute;margin:0;padding:0;}

.nav {width:250px;display:block;position:absolute}
.nav h2 {color:#333;background:#f5f5f5;display:block;margin:0 auto;padding-left:5px;font:bold 12px/24px arial, verdana, sans-serif;width:95%}
.nav_ust {display:block;background:url(navust.png) no-repeat;float:left;width:304px;height:20px;margin:-6px 0 0 0px;}
.nav_alt {display:block;background:url(navalt.gif) no-repeat;float:left;width:304px;height:247px;}

.navlink1, .navlink2 {width:125px;margin:10px 15px 10px 10px;float:left;display:inline;font:14px/20px arial, verdana, sans-serif;}
.navlink1 a, .navlink2 a {display:block;color:#666;background:transparent;text-decoration:none;padding:6px}
.navlink1 a:hover, .navlink2 a:hover {color:#fff;background:#333;text-decoration:none;padding:6px}