Membuat Tooltips Pada Sebuah Objek

Hai sobat blogger semua, Apa kbar ? Semoga makin sukses yach !!!

Kali ini saya akan memposting bagaimana cara Membuat Tooltips Pada Sebuah Objek.








Jika anda yang masih penasaran bagaimana preview dari tutor kita kali ini !!! lihatlah gambar dibawah ini :

Bagaimana, Masih bingung ? Ok, Coba anda arahkan pointer anda ke sidebar blog saya ini, nanti akan muncul tooltips yang berwarna hijau !!! (waduh bingung jelasinnya - hehehehehe....)

OK, Jika sobat tertarik maka ikuti cara saya berikut tentang cara "Membuat Tooltips Pada Sebuah Objek" pada template blogger :

1. Login pada Blogger
2. Masuk ke bagian Layout, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada Expand Widget Templates.
3. Pilih salah satu script dibawah (utk menentukan warna tooltipsnya) lalu Copy script dibawah. Lalu, Paste salah satu Script dibawah Setelah kode </head>


Berikut Pilihan Sesuai Warna Blog Anda :

Warna Hijau Seperti Blog saya :          

<script src='http://khamardos.googlecode.com/files/tooltips.js' type='text/javascript'/>

Warna Biru :        

<script src='http://khamardos.googlecode.com/files/tooltips-blue.js' type='text/javascript'/>

Warna Kuning :         

<script src='http://khamardos.googlecode.com/files/tooltips-yellow.js' type='text/javascript'/>

Warna Hitam :         

<script src='http://khamardos.googlecode.com/files/tooltips-dark.js' type='text/javascript'/>

Warna Merah seperti ICT-SMANSA's Blog :         

<script src='http://khamardos.googlecode.com/files/tooltips-red.js' type='text/javascript'/>

--------------------------------------------------------------------------------------------------------------

Lalu Berikut Cara Pemakaiannya :

- Untuk format pemakaian umumnya adalah sebagai berikut :

<div title="header=[:: Judul Tooltips ::] body=[:: Isi Tooltips ::]"> Objek yang akan disorot oleh tooltips </div>

   Hasilnya seperti ini :

Pada keterangan "Objek yang akan disorot oleh tooltips" , anda bisa mengubahnya dengan kode gambar, flash, atau objek lainnya selain teks !!! Sekarang, Tinggal anda yang membuat tutor ini menjadi menarik !!!

- Setelah paham pemakaiannya, pergi ke Tata Letak  -  Elemen Laman  -  Tambah Gadget  -  +HMTL/Javascript (Lalu paste kode yang barusan anda edit tersebut!!!)

Note :

'' Copy Kode diatas barusan, lalu paste di mana saja, Misalnya saja di Widget HTML/JAVASCRIPT, Di Edit HTML pada Tata Letak, Maupun di Postingan anda sendiri pada format HTMLnya!!! (sesuai kreasi anda).''

--------------------------------------------------------------------------------------------------------------

Jika ada pertanyaan silahkan bertanya di form komentar- Jangan Lupa Komentarnya Yach !!!

HAPPY BLOGGING SOBAT !!!

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tampilan Halaman Label Hanya Judul Postingan
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog