Memasang Gadget atau Widget di Blog

Agar tampilan blog terlihat lebih menarik, terkadang kita ingin menambahkan berbagai macam pernak-pernik pada blog kita. Ada banyak gadget ataupun widget yang tersedia di blogspot maupun situs-situs lain yang mengharuskan kita memasang code HTML/JavaScript untuk menggunakan layanan mereka.

Pada blogspot, Anda dapat menggunakan fitur-fitur gadget yang tersedia, seperti untuk menambahkan widget: Follow by Email, Popular Posts, Blog’s Stats, Pages, Followers, Search Box, HTML/JavaScript, Text, Picture, Slideshow, Video Bar, Poll, Blog List, Link List, List, Feed, Newsreel, Labels, Subscription Links, Logo, Profile, Blog Archive, Page Header, dan lainnya (bisa dilihat seperti tampilan pada gambar di atas).

Secara umum cara yang digunakan untuk menambah gadget-gadget tersebut tidak jauh berbeda, kali ini saya ingin mencontohkan cara menambahkan gadget/widget yang menggunakan kode HTML/JavaScript pada blog.

Caranya, kebetulan saya menggunakan blogspot :

  1. Login ke blogger.
  2. Masuk ke menu utama blog atau Dashboar.
  3. Pilih menu selanjutnya, Design/ Rancangan
  4. Kemudian, pilih Page Elements,
  5. Setelah itu, pilih posisi atau letak yang diinginkan (di bawah header, sidebar, ataupun footer).
  6. Lanjutkan dengan meng-klik “Add a Gadget”.
  7. Pada tampilan selanjutnya cari atau pilih gadget “HTML/JavaScript”, tambahkan dengan menekan tanda plus (+).
  8. Pada tampilan “Configure HTML/JavaScript”, buat nama widget kita pada kolom “Title”, kemudian ketik atau paste-kan kode HTML pada kotak “Content”. Sebagai contoh, saya mencoba memasukkan kode HTML nya seperti ini:
    <span style="display:inline-block;width:160px;height:30px;text-align:center;border:#000 1px dotted;font-family:Arial,Helvetica,sans-serif;font-size:11px;background-color:#FFFFFF;"><strong style="display:block;padding:0px;margin:0px;">SEO Services & Tools</strong><a href="http://www.submitexpress.com/" title="Submit Express - Search Engine Optimization Services" style="font-family:Arial,Helvetica,sans-serif;font-size:11px;">Submit Express</a></span>
  9. Untuk membatalkan klik “BACK”, dan Jika sudah yakin, klik “SAVE”.
  10. Kemudian lihat hasilnya dengan meng-klik “View Blog”, contohnya, kira-kira seperti ini:

    SEO Services & ToolsSubmit Express

  11. Kalau masih ada perubahan atau mengatur letaknya, masuk kembali pada menu “Page Elements-Configure HTML/JavaScript”, setelah selesai, jangan lupa “SAVE” pekerjaan Anda.

  12. Kemudian Saya mencoba untuk memasukkan kode link gambar seperti ini:

    <a href="http://www.activesearchresults.com/"><img src="http://www.activesearchresults.com/images/asrbutton.png" alt="Active Search Results" width="88" height="31" border="0" /></a>
  13. Contoh hasilnya kira-kira akan seperti ini:
Active Search Results

Selanjutnya, silahkan mencoba dengan kreasi Anda sendiri, semoga bermanfaat.Smile

Artikel Lainnya di Blog Ini, Silahkan Baca :

0 komentar: