Sahabat Programmer Seo semua, kita berjumpa lagi pada momen yang sangat pas. pada kesempatan kali ini saya akan membagikan tutorial membuat kotak pencarian blog kita mengarah ke google tapi tetap merujuk pada blog kita.Saat ini berbagai templete telah banyak dibuat oleh para programmer, semua templete yang mereka sajikan sangat menarik dan unik. Begitu juga dengan navigasi pencariannya. Ada yang tetap mengarah ke blog mereka sendiri, ada juga yang mengarah ke Google.
Oke, saya tidak akan panjang lebar bercerita. langsung saja yaa. Eits, tunggu, sebelum kita membahas tutorial ini, ada yang harus kita perhatikan dulu. Pastikan artikel bos kuh lebih dari satu. Karena, apa yang hendak kita cari kalau blog kita tidak memiliki artikel satupun.. hehe.
oke baiklah, saya rasa sudah cukup berceritanya. Langkah pertama yang harus bos kuh lakukan untuk membuat search box yang mengarah ke google yaitu :
1. Klik Tema
2. Pilih edit HTML
3. Cari kode </style> (Gunakan CTRL+F untuk mempercepat pencarian)
4. Jika sudah ketemu, masukan kode dibawah ini, tepat dibawah </style>
/*Seach Box*/
#searching{float:center}
#searching input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0;outline:none}
#search-buttons{padding:5px;overflow:hidden;text-align:center;margin:0}
#search-button-top{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74-pefEhqAxFRJnV4tPjhyH13Eo_xhFFFtI56ubCfaOkD5UjY8aVuN4tiLiXvB_GNtvcQwJNgCAhAzqnVQz45Rn1DSfi5MFQw9Cy7BT-HEJSylk31ea92I7uSz6KFfrPe5i0Y0DNo-mjM/s1600/meta-icon.png");background-repeat:no-repeat;margin:0;outline:none;height:36px;width:40px;background-color:#e74c3c;background-position:13px -243px;border:none;float:center;cursor:pointer}
#search-button-top:hover{-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;transition:all .2s ease-in;background-color:#c0392b}
#searching{float:center} Setelah kamu selesai meletakan kode di atas, selanjutnya letakan kode di bawah ini pada tata letak
#1. Buka Tata letak
#2. Tambahkan Widget
#3. Pilih Javascript
#4. Masukan kode dibawah ini pada tabel javascript
<div id='searching'><form id='search-buttons' method='get' target='_blank' action='https://google.com/search'> <input name='q' placeholder='Search...' type='text'/> <input id='search-button-top' type='submit' value=''/> <input name='domains' type='hidden' value='belajarseokompleks.blogspot.com'/> <input name='sitesearch' type='hidden' value='belajarseokompleks.blogspot.com'/> <input name='ie' type='hidden' value='UTF-8'/> <input name='hl' type='hidden' value='id'/></form></div>#5. Ganti tulisan warna biru dengan URL blog bos kuh
#6. Klik Simpan
P E R H A T I A N :
Jika bos kuh mengerti cara mengedit tema HTML blog bos kuh, kode searchbox tersebut lebih bagus diletakan pada kolom searchbox tema bos kuh, yaitu dengan cara menggantinya.Karena jika ada dua kode searchbox, dapat menyebabkan pagespeed blog bos kuh melamban.
*Tampilan lain
Jika bos kuh tidak suka dengan tampilan searchbox di atas, bos kuh bisa mencoba yang dibawah ini. Tapi hapus terlebih dulu kode di atas yang telah bos kuh pasang.
Baiklah, langsung saja yaa. Silahkan buka kembali tata letak => tambahkan gadget => pilih HTML/Javascript => masukan kode dibawah ini :
<style>
.search-input input, .search input {
width: 94.7%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
height: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
</style>
<form action="https://www.google.com/search" id="searchform" method="get" target="_top">
<div class="search-input">
<input aria-label="Search this blog..." autocomplete="off" name="q" placeholder="Search this blog..." required="required" value="" />
<input name="as_sitesearch" type="hidden" value="https://belajarseokompleks.blogspot.com/" />
</div>
</form> Jika sudah selesai:
Klik Simpan kemudian Lihat blog
Itulah tutorial bagaimana cara membuat searchbox yang mengarah ke google. Semoga bermanfaat. oya, jangan lupa masukan email bos kuh untuk mendapatkan artikel terbaru lainnya.
EmoticonEmoticon