Blogger İçin CSS Kullanarak Google Özel Arama Motoruna Stil Eklentisi

Blogger geliştiricisinin karşılaştığı en büyük sorunlardan biri, blogger'ın arama motorunda yerleşiktir. Bazen bir kullanıcı farklı bir anahtar kelimeyi aradığında hiçbir şey göstermez. Bu sorunun tek ve tek çözümü Google Özel Arama Motorunu uygulamaktır.

Google Özel Arama Motorunun ne olduğunu biliyor musunuz? Bu, Google'ın, kullanıcıların gereksinimlerine göre yalnızca belirli bir URL'yi veya birden çok URL'yi arayacak kendi arama motorlarını oluşturmalarına izin veren bir hizmettir.

Ancak iki sorun var. İlk sorun çok basit görünümü ve Google Watermark. Blogunuzun çok duyarlı CSS'si olduğunu ve sağladığınız Google arama Kutusunun onunla gelmediğini varsayalım. Yine de GCS'nin görünümünü ve hissini değiştirebilirsiniz, ancak bu yeterli değildir. Özelleştirilmiş bir arama kutusu formunuz var ve özel CSS'nizi içine koymak ve Google'ın varsayılan tasarımından kurtulmak mı istiyorsunuz? İkinci sorun, bir açılır pencerede görüntülenen arama sonuçlarıdır.

Bu makalede, özel arama formunuza google özel aramasını uygulamak için bazı basit ipuçlarını paylaşacağım ve ayrıca arama sonuçlarını yeni bir sayfada görüntüleyebilirsiniz.

İşte blogger blogumda kullandığım çözüm. Web siteniz için GCS'nizi zaten kurduğunuzu varsayalım. Değilse, bu Bağlantıya gidin ve özel arama motorunuzu ayarlayın. Ve sonra blogunuz için aşağıdaki gibi bir kod görüceksiniz:

HTML <script> (function() { var cx = 'XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();</script><gcse:searchbox></gcse:searchbox>

Ardından, GCS bu snippet'i blogunuzun arama kutunuzu istediğiniz yere yapıştırmanızı söyleyecektir. Ve bu son değil, <gcse: yalnızca arama kutusu> </ gcse: yalnızca arama kutusu> etiketini tam olarak arama kutunuzu koymak istediğiniz yere ve <gcse: yalnızca arama sonuçları> </ gcse: arama sonuçları eklemeniz gerekir -sadece> arama sonucu için. Bunlar aslında <div> </div> etiketi gibidir. Ancak sonuçta kendi CSS'nizi arama kutusuna sığdıramazsınız. Ama tüm bunları yapmanıza gerek yok.

İşte Blogger Blogumda Kullandığımız Çözüm Seçeneği:

Lütfen Google tarafından sağlanan web sitenizin aşağıdaki gibi olan benzersiz kimliğine dikkat edin: XXXXXXXXXXXXXXXter: YYYYYYYYYYY . Tek ihtiyacınız olan bu kimlik ve başka bir şey. Şimdi ortak <form> </form> etiketine ihtiyacınız var, sanırım bunu zaten yazdınız. Değilse, bu kodu izleyin.

JS <form action='http://siteadınız/p/search-results.html' id='search-form' style='display:inline;'>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<table>
<tbody>
<tr>
<td class='search-box'>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/>
</td>
<td class='search-button'>
<input id='search-button' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

XXXXXXXXXXXXXXXCP: YYYYYYYYYYY'yi benzersiz kimliğinizle değiştirmeyi unutmayın.  Ayrıca, arama sonuçlarını görüntülemek için mavi renkli URL'yi yeni bir blogcu sayfasıyla değiştirin.

Artık özel CSS'nizi istediğiniz zaman bu forma kullanabilirsiniz. Blogumda kullandığım her şeyi buraya kopyalıyorum. Bunları şablonunuza eklemek için, şablonda ]]></b:skin> etiketini arayın ve aşağıdaki kodları bu etiketin hemen üstüne yapıştırın.

CSS #search-form {
background:#333;
float:right;
margin:0 0;
width:200px;
}
#search-form table {
width:100%;
margin:0;
}
#search-form td.search-box {
padding-right:30px;
}
#search-form input#search-box[type="text"] {
background:#ffffff;
height:29px;
line-height:29px;
margin:5px 0px 5px 10px;
padding:0 10px;
width:99%;
color:#666666;
border:none;
}
#search-form input#search-button[type="submit"] {
font-family: FontAwesome;
background:#E73037;
color:#ffffff;
height:29px;
line-height:29px;
margin:5px 10px 5px 0;
padding:0 12px;
border:none;
outline:none;
}
#search-form input#search-button[type="submit"]:hover{
opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
cursor: pointer;
}
#search-form input#search-box[type="text"]:focus {
background:#eee;
outline:none;
}

Şimdi Arama sonucu bölümüne gelin. Formda gördüğünüz gibi , gönder düğmesini tıkladıktan veya Enter tuşuna bastıktan sonra "http://siteadınız/p/search-results.html" ifadesini çağıran bir "eylem" özelliği vardır . Şimdi, sonucu göstermek için başka bir html sayfası ayarlamanız gerekiyor. Mevcut ortak stillerinizi bu sayfaya koyabilirsiniz. Şimdi, aşağıdaki kodu sayfanıza ekleyin. Bu kodu eklemek için sayfaya gidin ve düzenle'yi tıklayın, ardından HTML bölümüne gidin ve aşağıdaki kodu yapıştırın ve yayınla'yı tıklayın. Ayrıca kırmızı renkteki benzersiz kimliği, benzersiz kimliğinizle değiştirin.

HTML <script>
(function() {
var cx = 'XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Çalışmıyorsa (Bir pop-up pencerede görüntülenen arama sonuçları), GCS'ye gidin ve düzenini İki sütuna değiştirin.

Google tarafından desteklenen havalı bir arama kutusu yapmak için ihtiyacınız olan her şey bunlar. Yardıma ihtiyacınız olursa, aşağıya bir yorum bırakın.

Demo Buraya Tıkla