Berita Terbaru :

Google Translate

BlogUpp!

Custom Search
Browse: Home / Cara Membuat Tool Tips Jquery di Blog

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

2 comments:

PT Bintang Wangi Indotrans mengatakan...

bagus euy jadinya...

makasih atas tutorialnya ya...

Terima Kasih PT Bintang Wangi Indotrans Atas Kunjungan Dan Komentarnya..
by Infoteknomedia-admin
ando_aja mengatakan...

@Davin Mboir:terima kasih sobat sudah ingin berkomentar dan mencoba tutorialnya.... Thank's :10




:25 :26 :27 :28 :29 :30 :31 :32
:33 :34 :35 :36 :37 :38 :39 :40
:41 :42 :43 :44 :45 :46 :47

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda yang tidak di terbalas. Mohon gunakan kata-kata yang sopan dalam memberikan komentar. Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan. dan Terima Kasih Atas Kunjungan serta Komentar Anda.
Poskan Komentar Anda Di Bawah ini :

 

Followers

Komentar Baru

widget by infoteknomedia
Buy me a cup of coffee

About Me

Copyright 2012 Teknologi Dan Media Informasi | by admin | Supported by infoteknomedia