MEMBUAT TOOLTIP

Kode CSS ZigZagLap Tooltip

.tooltip {
        display:none;
        background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iuRuNxNPohe0Jyq7cJ4lPuSu4hsGDvy3Lkrecfb_5X2X-4REMCPT0E0DSlX8FJdOYk0o5OrShSxR8CDhP95ybQQfroRJMlitz7ivWXGHxV3UD9SU8VqeaOWdwerMOV75HwmjXp8K87M/s200/gubhugreyot.jpg) right bottom no-repeat;
        background-position:96% 93%;
        width:250px;
        font-family:Arial;
        font-size:13px;
        padding:10px 10px 20px;
        color: #00CCFF; 
        text-shadow:1px 1px 1px #000;
        border: 4px solid #555;
        border-radius:10px;
       -moz-border-radius:10px;
       -webkit-border-radius:10px; 
        box-shadow:0px 5px 20px rgba(125,124,250,.9);
       -moz-box-shadow:0px 5px 20px rgba(125,124,250,.9);
       -webkit-box-shadow:0px 5px 20px rgba(125,124,250,.9); 
} 
#jqtips img {
        border:0;
        cursor:pointer;
        margin:0 8px;
}

Javascript ZigZagLap Tooltip

DOWNLOAD zigzaglap

Cara Membuat ZigZagLap Tooltip

• Login to Blogger
• Dashboard
• KLIK link "Design/Rancangan".
• KLIK "Edit HTML".
• Cari kode ]]>. Gunakan Ctrl+F untuk mencari kode tersebut (letaknya di atas atau ). Tutorial tentang Cara Cepat Cari Kode HTML di Template dapat dibaca dengan membuka Special Tutorials (menu sebelah kiri).
• Copy dan pastekan kode CSS di atasnya.
• Download Javascript. Akan lebih sempurna jika javascript tersebut kemudian di upload di file hosting (ripway.com, stashbox.org, yourjavascript.com atau yang lain).
• Simpan Javascript di atas tag pembuka (terletak di ujung atas Edit Templates) dalam bentuk seperti di bawah ini:
Atau dalam bentuk seperti di bawah ini jika javascript tidak di upload:
• Copy dan simpan javascript berikut di atas tag penutup .
• KLIK SAVE Templates/Simpan Template.

Cara Menggunakan Kode tooltip

Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:

Dalam tag a (link berbentuk teks dan gambar):

Tuliskan teks tooltip di sini!">Teks Link

Tuliskan teks tooltip di sini!">

Dalam tag img:

Tuliskan teks tooltip di sini!" />

selamat mencoba bro..........

Diposting oleh Dhanalova
ARTIKEL TERKAIT

MOBILE TEMPLATE DESIGN
Created | By: @ Dhanalova