Cara Membuat Kotak Search Di Header Blog

Halo para pengunjung.....

Gimana kabarnya? udah lama nih Rafi Blog tidak ngepos, yaudah lupain ajah yang tadi. Sekarang kita bahas tantang artikel kita hari ini, kali ini Rafi 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

• Log in ke akun blogger kalian
• Pilih menu Template
• Klik Edit HTML
• Cari kode ]]></b:skin> (Gunakan CTRL+F)
• 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;}

• Belum selesai sampai disitu, cari kode <header id='header-wrapper'>  
• 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!

Backlinks Please Thanks

URL

Code For Forum

HTML Code <a href='http://creative-blog10.blogspot.com/2014/03/cara-membuat-kotak-search-di-header-blog.html' target='_blank'>Cara Membuat Kotak Search Di Header Blog</a>

Anda Baru Saja Membaca Artikel Tentang Cara Membuat Kotak Search Di Header Blog ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Cara Membuat Kotak Search Di Header Blog Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Cara Membuat Kotak Search Di Header Blog Sebagai SumberNya.