Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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).


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 «

2 komentar:

  1. pertama lihat blog ini... hmmmmmm .... q jadi kagum sekali mas...", semuanya penuh dengan kreatifitas., membuat hati jadi iri...

    BalasHapus
  2. mas gubhugreyot saya buat arsip blog kok cuma satu yang muncul cuma halaman beranda saya mas gmn cara nya tuh untuk menampilkan lebih dari tiga artikel mohon bantuan nya ....
    oh ya artikel yang mas buat bikin saya menjadi segar bugar
    kirim ajah ke sini mas http://blog-cassiopeia.blogspot.com

    BalasHapus

 
GR | Edited by | gubhug reyot