Cara Membuat Tool Tips Jquery di Blog

Cara Membuat Tool Tips Jquery di Blogger, bagi anda yang kepengen blognya tampil keren gak ada salahnya kalo Mencoba Tootips keren Jquery ini. Trik ini di populerkan oleh helperblogger jika anda ingin melihatnya silahkan lihat demo dibawah ini sobat....



View Demo


Langkah langkah menerapkan Tootips Jquery di Blog :

Masuk blogger »» Rancangan »» Edit Html »» centang Expand Widget Template.
Kemudian Paste Kode berikut diatas kode ]]></b:skin>

.tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
        white-space: nowrap;
        border-bottom: 1px dotted #777;
}

.tooltip-content {
        opacity: 0;
        visibility: hidden;
        font: 12px Arial, Helvetica;
        text-align: center;
        border-color: #aaa #555 #555 #aaa;
        border-style: solid;
        border-width: 1px;
        width: 150px;
        padding: 15px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        margin-left: -76px;

        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        -moz-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-transition: bottom .2s ease, opacity .2s ease;
        -moz-transition: bottom .2s ease, opacity .2s ease;
        -ms-transition: bottom .2s ease, opacity .2s ease;
        -o-transition: bottom .2s ease, opacity .2s ease;
        transition: bottom .2s ease, opacity .2s ease;
        }

.tooltip-content:after,
.tooltip-content:before {
        border-right: 16px solid transparent;
        border-top: 15px solid #fff;
        bottom: -15px;
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -10px;
}

.tooltip-content:before {
        border-right-width: 25px;
        border-top-color: #555;
        border-top-width: 15px;
        bottom: -15px;
}

.tooltip:hover .tooltip-content{
        opacity: 1;
        visibility: visible;
        bottom: 30px;
}

Kemudian Tambahkan kode berikut sebelum atau diatas kode </head>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src='http://cayun-code.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>

Notes : Kalau dalam template anda sudah ada kode yang berwarna merah jadi anda tidak perlu lagi menambahkannya, cukup tambahkan kode yg dibawahnya aja.

Kemudian Save Template.

Untuk menerapkannya dipostingan anda bisa memakai cara berikut ini :

<b data-tooltip="Ganti ini dengan isi tootips anda">Kata Anda Disini</b>

Semoga bermanfaat ya sobat, jangan lupa komentarnya sobat demi kemajuan blog kita bersama...
Thank's...^_^...
Artikel Terkait di Bawah posting

Tutorial Blogger

• Cara Memasang Emoticon Terbaru | 2012
• Cara Memasang Tanda Tangan Di Blog
• Cara Memasang Fitur Back To Top Pada Bogspot | 2012
• Cara Membuat Blockquote Dengan CSS
• Newsticker berita pemberitahuan berjalan
• Cara Memasang Donate Paypal Di Blog
• Tutorial Pendaftaran Adf.ly dan Cara Mendapatkan Dolarnya | 2012
• Cara Mencari Blog Lain Di Satu Tempat (Daerah) Tertentu
• Cara Memasang Google Translate di Blog | 2012
• Cara Mendaftarkan Blog di Mesin Pencari | 2012
• Cara Membuat dan Memasang Feed Burner Di Blog | 2012
• Cara Mengetahui Seberapa Berat Blog
• Cara Membuat Tombol Reply Pada Blogspot | 2012
• Tips dan Cara Membuat Horizontal Navigasi
• Tips Meringankan Dan Mempercepat Loading Blog
• Tips Menghilangkan Nav Bar | Blogger

Tips Memperindah Blog

• Cara Membuat Permalink di Blogspot
• Cara Memasang Emoticon Terbaru | 2012
• Cara Memasang Tanda Tangan Di Blog
• Cara Memasang Fitur Back To Top Pada Bogspot | 2012
• Cara Membuat Blockquote Dengan CSS
• Newsticker berita pemberitahuan berjalan
• Cara Membuat Widget Menghilang Dan Berpindah Di Blog | 2012
• Cara Membuat Mouse Diikuti Teks Memutar Diblog | 2012
• Cara Membuat Link Bergoyang dan Bercahaya Di Blog | 2012
• Cara Membuat Link Berkedip Warna Warni Di Blog | 2012
• Cara Membuat Nomor Urut Pada Kotak Komentar Blogspot | 2012
• Cara Membuat Efek Gambar atau Photo Memutar dan Membesar saat di sorot Mouse | 2012
• Cara Membuat Tombol Reply Pada Blogspot | 2012
• Cara Memasang Daftar Isi Accordion-2012 Di Blogspot
• Cara Membuat Sudut Halaman Blog Menggulung (Page Peel)