.
Home » » Cara membuat tooltip di blog

Cara membuat tooltip di blog

Written By Admin on Selasa, 06 Desember 2011 | 1:10 AM

Sering sekali saya mengunjungi blog-blog para master, dan ketika saya menyorot link atau menu mereka ada tittle yang sangat indah contoh seperti ini



  • Cara membuat tool tips di blog
    Cara Memmbuat TOOLTIP





  • Apabila sobat blogger berniat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

    Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini..dan letakan diatas kode ]]></b:skin>



    li.sfhover .tooltips, li:hover .tooltips {
    display:block;
    }
    .tooltips {
    margin:6px 6px 0 6px;
    padding:15px 10px 15px;
    position:absolute;
    width:250px; >
    display:none;
    background:url(
    http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) bottom repeat-x;
    opacity: 0.8;filter:alpha(opacity=80);zoom:1;
    border:1px solid #FFFFFF;
    -moz-border-radius:10px;
    }
    .tooltips {
    margin-top:-50px;
    margin-left:-290px;
    }
    .tooltips:hover {
    display:none!important;
    }
    .tooltips p {
    font-size:12px;
    font-family:Rockwell;
    font-weight:bold;
    color: #0060C8;
    text-align:center;
    margin:0 15px 0 0;
    }

    Ket :

    background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna merah

    border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

    -moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

    opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

    margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
    margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

    font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan  sobat blogger mania. jika sudah selesai jangan lupa simpan template
    Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..


    <li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>
     
       
    Ket :
    > Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya maka tooltips-nya tidak akan berfungsi...  


    Contoh Pengunaannya... yang digunakan pada widget HTML/Javascripts.. (bisa juga sobat gunakan pada postingan  



    <li><a href='http://fajar7siblings.blogspot.com/2011/08/cara-memperlebar-kolom-dan-halaman-blog.html'>Cara Memperlebar Kolom dan Halaman Blog</a><div class="tooltips"><p>   Cara Memperlebar Kolom dan Halaman Blog</p></div></li>

    Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian widget artikel menu education for all di sebelah kiri Blog ini..
    Share this article :

    0 komentar:

    Posting Komentar

    Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

    Komentar Blogger Sejati

    Saya adalah

    Foto saya
    Bekasi, Jawa Barat, Indonesia
    Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
     
    Support : Rizkygunawan1@gmail.com | Facebook | Twitter
    Copyright © 2011. Rizgun(dot)com - All Rights Reserved
    Template Modify by Rizgun Blog
    Proudly powered by Blogger