Cara Membuat Google Custom Search Valid HTML5 di Blog
Cara Membuat Google Custom Search Valid HTML5 di Blog- Kali ini saya akan berbagi tutorial tentang membuat google custom search yang valid html5, baiklah simak saja langsung caranya :
1.Login ke Blogger
2.Masuk Dashboard > Pilih Template > Klik Edit HTML
3.Letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
#search-cse { position:relative; width:300px; margin:10px auto;}
#cse-search-cse { height:30px; border-radius:2px; background-color:#fff; overflow:hidden; border:1px solid silver;}
#search-text { font-size:12px; color:#ddd; border-width:0; background:transparent;}
#search-cse input[type="text"] { width:92%; padding:5px 20px 12px 0; color:#666; outline:0;}
#search-button { position:absolute; top:0; right:0; height:15px; width:20px; margin-top:10px; font-size:14px; color:#fff; text-align:center; line-height:0; border-width:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCvcaDagvx5Id7vaTfXkkbiOq-UYvArJXoSgXkJHQrQjlgM-SBRU2QEWUJDI1KjLybOksLxkg2BvfcTpTopBt75Qfh0p21ls7EIP-ijvDgwR_14HMDlcCiVbtH-RAk4uGUMGRSk4zBLHA/s200/search-c.png) no-repeat; cursor:pointer;}
4.Simpan Template dan Kembali ke Tata Letak
5.Masuk ke Tata Letak > Tambahkan Gadget > Pilih HTML/JavaScript
6.Masukkan script dibawah ini tepat didalam HTML/JavaScript
<div id='search-cse'><form action='http://mas-kepo.blogspot.com/' id='cse-search-cse' method='get'><input name='cx' type='hidden' value='partner-pub-0171579045443208127:vuyldj32k0y'/><input name='cof' type='hidden' value='FORID:10'/><input name='ie' type='hidden' value='ISO-8859-1'/><input id='search-text' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value=' Cari artikel disini . . .'/><button id='search-button' type='submit'></button></form></div>
Keterangan :
1.Ganti kode yang berwarna merah dengan URLhalaman static google cse anda
2.Ganti kode yang berwarna biru dengan ID penulusuran anda
7.Simpan dan Lihat hasilnya
No comments