Menampilkan tips (tooltip) di widget Blog Archive - Blogger

Jika blog anda mempunyai lebar sidebar terlalu sempit dan widget Blog Archive terletak di situ maka teks link arsip blog akan bertumpuk-tumpuk karena lebar tak tercukupi. Atau mungkin teks link arsip blog menggunakan font berukuran kecil hingga untuk membaca setiap link harus memelototkan mata? Mengapa tidak anda coba menggunakan tooltip agar semua daftar posting di arsip blog terbaca dengan mudah?! Banyak keuntungan yang diperoleh dengan menampilkan tips di arsip blog. Selain pengunjung merasa lebih nyaman, andapun akan lebih mudah melakukan penataan widget archive. Mungkin saja widget tersebut dapat anda tambahkan properti css white-space:nowrap; agar teks link tidak bertumpuk ketika ruang archive sempit? Atau mungkin saja memang anda perlu memperkecil ukuran font-nya agar terlihat rapi?! Dalam gambar disamping (letakkan cursor di atas gambar untuk perbesar!) kita bisa lihat salah satu masalah yang terjadi saat widget blog arhive mempunyai lebar terlalu sempit. Setiap daftar posting menjadi bertumpuk sehingga daftar arsip tampak berderet begitu tinggi.

Ada dua kemungkinan berkaitan dengan upaya menampilkan tips di widget Blog Archive:

1. Menggunakan tootip defaul browser.
   Tooltip akan ditampilkan sesuai browser yang digunakan untuk membuka blog. Jika menggunakan cara ini anda hanya perlu melakukan sedikit modifikasi di widget Blog Archive dan tooltip langsung bisa terlihat.
2. Menggunakan jQuery Simple Tooltip atau tooltip yang lain.
   Cara ke dua memungkinkan kita untuk melakukan berbagai perubahan pada tampilan tooltip. Anda bisa rubah ukuran font, ketebalan font, warna font (color), mengatur ukuran box tooltip, memberi warna atau menampilkan berbagai variasi pada background tooltip. Cara ini juga akan memberi keindahan pada blog dan memberi kesan eksklusif.

D E M O

Setelah demo terlihat, arahkan cursor anda pada setiap link daftar arsip blog yang terletak di sidebar kanan (Blog Archive).

Demo Tooltip Arsip Blog

Kita akan buat terlebih dahulu agar Blog Archive mampu menampilkan tips di setisp daftar link-nya, setelah itu anda bisa menentukan pilihan terbaik yang cocok menurut anda!

Cara membuat tooltip di widget Blog Archive

1. Login ke Blogger.
2. Setelah halaman Dasbor (Dasboard) terbuka, cari dan klik Rancangan (Design).
3. Pilih dan klik Edit HTML.
4. Lakukan Backup Template.
5. Klik Expand Widget Template.
6. Cari kode :
   

   <li><a expr:href='data:i.url'><data:i.title/></a></li>

7. Ganti dengan kode berikut:
   

   <li><a expr:href='data:i.url' expr:title='data:i.title'><data:i.title/></a></li>

8. Klik Simpan Template (Save Template).
9. Buka Blog dan lihat hasilnya.

Tooltip Blog Archive dg Simple jQuery Tooltip

Jika anda menggunakan metode kedua ini untuk menampilkan tooltip di widget Blog Archive, maka disamping terlihat lebih cantik, menarik serta bebas untuk melakukan pengaturan tampilan tooltip, andapun bisa memanfaatkan tooltipnya pada link-link lain di luar widget Blog Archive. Yah ...., tentu saja akan jauh lebih menarik dan blog semakin cantik.

Cara membuat

1. Tambahkan class="GRtipz" pada kode perubahan yang terlihat di atas, sehingga kode perubahan bentuknya seperti berikut:
   

   <li><a class='GRtipz' expr:href='data:i.url' expr:title='data:i.title'><data:i.title/></a></li>

2. Buat Simple jQuery Tooltip. Panduan dan tutorialnya bisa anda buka melalui link tutorial di bawah ini:
   Panduan membuat Simple jQuery Tooltip

Catatan/Keterangan:

1. Anda bisa mengikuti panduan cara backup template dan cara mencari kode html di template dengan membuka "Special Tutorials" yang terletak di deret menu sebelah kiri.
2. Bagi yang blognya sudah menggunakan tooltip, anda bisa lakukan sedikit perubahan kode agar tooltip dapat berfungsi pada widget Blog Archive.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Senin LEGI, February, 27, 2012

» Happy Blogging - gubhugreyot «