Setelah memposting tentang lomba SEO, sekarang link manual akan menshare cara
membuat menu search di blog seperti apple, untuk lebih jelasnya silahkan simak artikel berikut ini :
membuat menu search di blog seperti apple, untuk lebih jelasnya silahkan simak artikel berikut ini :
Log in ke akun blogger kalian
Pada Dashboard pilih Design
Lalu pilih lagi Edit HTML
Cari code berikut ini
]]></b:skin> |
Letakkan code dibawah ini tepat diatas code tersebut
#search { } #search input[type="text"] { background: url(https://lh4.googleusercontent.com/-SBuAPGg_eJw/ Ts0EGS0F7lI/AAAAAAAAABQ/3gzoJ_ArAEs/s15/search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) 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 input[type="text"]:focus { width: 200px; } |
Lalu Save templates
Pada Page Elements pilih Add a Gadget lalu HTML/Javascript
Lalu masukkan code berikut ini lalu save
<form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="Search..." /> </form> |
Lihat hasilnya.....dan selamat mencoba
Posted on 02.19 / 0
komentar / Read More