Cara Memasang Widget Google Custom Search Engine di Blog/Website

Tutorial Cara Membuat dan Memasang Widget Google Custom Search Engine di Blog

Google custom search engine widget adalah search bar/box yang terpasang di blog/website dan difungsikan sebagai mesin pencarian untuk pengunjung/visitor sama seperti halnya Google itu sendiri.

Fungsi dan keuntungannya antara lain:

1. Menyediakan alat pencarian dan hasil pencarian yang relevan.

2. Memberi spesifikasi pencarian situs-situs yang relevan dengan blog/website dan yang telah diberi setting tertentu.

3. Memberikan alternatif pencarian Google yang langsung dapat dicapai melalui website/blog tanpa membuka website Google. 

4. Dengan setting pada situs-situs tertentu anda dapat menunjukkan referensi-referensi bermanfaat yang selama ini anda gunakan.

5. Mengajak komunitas untuk meningkatkan penggunaan search engine dengan hasil yang relevan.

6. Mendapatkan penghasilan tambahan melalui Google Adsense search.

7. Dan masih banyak lagi kegunaan lainnya.

Bagaimana cara mendapatkan dan memasang Google custom search di blog?

1. Buka Google Custom Search kemudian klik "create a custom search engine". Pastikan sebelumnya telah memiliki dan login dengan Account Google.

 2. Setelah masuk ke halaman selanjutnya isi data name, description, language, dan sites to search seperti pada gambar berikut.

Pada "sites to search" isikan satu atau lebih url situs yang ingin anda masukkan ke hasil pencarian. Pilih opsi 'standard edition' untuk mendapatkannya secara gratis. Kemudian klik 'next'.

3. Klik tampilan search bar/box yang diinginkan, jika ingin mengkostimisasi lagi, klik 'customize' pada jenis tampilan yang telah dipilih tadi.

Setelah selesai, klik next.

4. Copy script/kode seperti di bawah ini dan pasang ke widget blog/website.

Cara memasang widget custom search engine Google di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan

2. Klik add gadget.

3. Setelah muncul pop-up window, pilih opsi HTML/Javascript.

4. Paste semua kode yang telah di copy dan klik save. Jika ingin menyesuaikan letak search bar, drag dan drop gadget tersebut ke posisi tertentu dan save lagi.

5. Done. Google Custom Search telah siap digunakan pengunjung.

Baca Selengkapnya...

http://xx-template.blogspot.com/

Tips-tricks Blogger kembali lagi membahas tentang mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial agar nanti sobat dapat mengutak-atik bagian tampilan link secara mandiri.

Bagian CSS yang memberi aturan pada link ada 4 jenis:

1. a : tampilan dasar suatu link

2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)

3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.

 4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)

Sedangkan style text CSS memiliki beberapa jenis:

1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.

2. Text decoration: hiasan pada link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) dan blink (berkedip)

3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.

4. dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan CSS.

Nah, setelah mengetahui beberapa properti style CSS pada link, untuk mengubah tampilan default link pada blog, silahkan lihat pada template Blogger/Blogspot sobat (lihat melalui edit HTML), kemudian cari aturan CSS yang mengatur link, yaitu a, a hover, .... dan seterusnya.

Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}

Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):

a {color: #1C4991; text-decoration: none;}
a:hover {color: #f2984c; text-decoration: underline;}
a:visited {color: 1C4991; text-decoration:none;}

Pada bagian berwarna biru itulah sobat bisa memodifikasi tampilan link, baik tampilan awal link (a), ketika mouse di-hover di atas link (a:hover), dan ketika link telah di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu bergaris bawah, maka untuk menghilangkan garis bawah (underline) link pada tampilan link dasar maupun ketika di-hover, harus ditambahkan text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value warna di link di tempate sobat dengan mengganti kode di belakang color: dengan kode warna lain yang diinginkan. Untuk mengetahui kode-kode warna, silahkan googling dengan keyword: "hex color codes" atau "css/html color codes".

Jika ingin menambahkan aturan link lain yang belum ada di template sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan catatan urutannya harus seperti ini:

1. a {aturan css text styling}
2. a:hover {aturan css text styling}
3. a:visited {aturan css text styling}
4. a:active {aturan css text styling}

Keempatnya harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik, kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan link lain.

Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, sobat bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan berbeda (style="....."), misalnya:

<a  href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>

Maka hasilnya akan seperti ini:

tips-tricks blogger

Nah, sekarang jika sobat ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good luck!

Baca Selengkapnya...