Cara Membuat Kotak Search Di Header Blog

Diposting oleh Unknown on Sabtu, 08 Maret 2014
Halo para pengunjung.....
Sekarang kita bahas tentang artikel kita hari ini, kali ini Experiment Blog akan SHARE "Cara Membuat Kotak Search Di Header Blog", kotak search ini dapat kalian gunakan hanya di Header saja, karena penggunaan di tempat lain sangat tidak mendukung kotak search ini. Tertarik? berikut tutorialnya


Tutorial

1.Log in ke akun blogger kalian
2.Pilih menu Template
3.Klik Edit HTML
4Cari kode ]]></b:skin> (Gunakan CTRL+F)
5.Letakan kode berikut tepat diatas kode ]]></b:skin> 

#bigbanner{border-radius:20px 10px 0px 0px;padding-top:-10px;padding-right:0px;padding-left:13px;padding-bottom:0px;border-right:5px solid #006acc;border-top:5px solid #006acc;background:#000;float:left; margin-top:303px; margin-left:-13px; width:402px; height:60px; display:inline;font-family:"julee"; text-align:left;font-size:50px;font-style:italic; -webkit-transition: all 560ms ease-out;-moz-transition: all 560ms ease-out;-ms-transition: all 560ms ease-out;-o-transition: all 560ms ease-out;transition: all 560ms ease-out;position:relative;}
#bigbanner:hover{border-color: #111 #111 black black;}
#search {border:transparent;}
#search input[type="text"] {background: url() no-repeat 10px 6px #000;font: bold 20px Arial,Helvetica,Sans-serif;text-align:right;
border:transparent;float:left;color: #fff;width: 380px;height:50px;padding: 6px 15px 6px 35px;-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 input[type="text"]:focus {width: 380px;border:transparent;}
6.Belum selesai sampai disitu, cari kode <header id='header-wrapper'> 
7.Letakan kode berikut tepat diatas kode <header id='header-wrapper'> 

<div class='section' id='bigbanner'><div class='widget HTML' id='HTML8'><div class='widget-content'><div style=' margin:0px 0 0 0;float:right;position:relative;'><form action='/search' id='search' method='get'><input name='q' placeholder='Search...' size='40' type='text'/></form></div></div></div>
Klik Save
Selesai Jangan lupa tinggalkan komentar ya....
Kalau ada yang ingin ditanyakan komen juga!

{ 0 komentar... read them below if any or add comment }

Posting Komentar

 
Indonesia Experiment - SEO Friendly Blogger Template Design by Velix