.:: Blackc0de Forum ::.
Would you like to react to this message? Create an account in a few clicks or log in to continue.

-=Explore The World From Our Binary=-
 
HomeIndeksLatest imagesPendaftaranLogin

 

 Cara Membuat Tool Tips Jquery di Blogger

Go down 
PengirimMessage
Jiban
Corporal
Corporal
Jiban


Jumlah posting : 159
Points : 390
Reputation : 7
Join date : 09.07.11

Cara Membuat Tool Tips Jquery di Blogger Empty
PostSubyek: Cara Membuat Tool Tips Jquery di Blogger   Cara Membuat Tool Tips Jquery di Blogger Icon_minitimeSun Jul 15, 2012 9:28 pm

Cara Membuat Tool Tips Jquery di Blogger, wah baru sempat posting disini lagi, setelah kemarin udah update tentang Threaded Comment styles dengan CSS yang masih segar dalam ingatan kita semua.
bagi anda yang kepengen blognya tampil keren gak ada salahnya kalo Mencoba Tootips keren Jquery ini. Trik ini di populerkan oleh helperblogger.

Langkah langkah menerapkan Tootips Jquery di Blog :

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

Code:
.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/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>


Nb : 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, tapi jangan lupa dukung terus Sumber Berita Cerita Inspirasi Motivasi Dunia Terbaru - Beritama.com

Original Articles by : How To Add jQuery Tool Tips To Blogger Very Easily ?
oleh Blogging
Kembali Ke Atas Go down
 
Cara Membuat Tool Tips Jquery di Blogger
Kembali Ke Atas 
Halaman 1 dari 1
 Similar topics
-
» Cara membuat read more pada blogger
» Cara Mengganti Cursor Blogger
» membuat jquery objek dock
» Cara Memberi Efek Pada Gambar Postingan di Blogger
» Cara terbaru mengatur kustom domain dari Intuit di Blogger

Permissions in this forum:Anda tidak dapat menjawab topik
.:: Blackc0de Forum ::. :: Webmaster :: Blogspot-
Navigasi: