Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - Tutorial kali ini akan kian bahas mengenai cara simple dalam membuat "Tooltip", namun untuk saat ini kita akan menggabungkan antara Jquery dan CSS code. Tampilan simple Tooltips yang k'ian maksud memang benar-benar simple karena kita hanya akan menambahkan sedikit kode CSS dan Jquery nya saja.


Untuk lebih lanjut kita mulai tutorialnya :
Copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Selanjutnya copy lagi kode Jquery dibawah ini dan letakkan sebelum kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
Kode 1
<script src='https://sites.google.com/site/kianbersama/javascript/simpletooltips.js' type='text/javascript'type='text/javascript'/>
Kode 2

Jika Sebelumnya kode 1 (1.3.6, 1.4.2, 1.4.3) sudah ada diblog kamu, maka yang perlu kamu copy cukup kode 2 saja.

Penerapan dalam Link
Jika semua kode telah terpasang, maka yang patut kamu lakukan adalah memasang didalam postingan yang akan kamu buat. cara cukup mudah namun harus sedikit cermat. Untuk link kita akan menggunakan class="tip_trigger", sedangkan untuk tampilan Tooltipsnya kita akan menggunakan class="tip", untuk lebih jelas lihat dibawah ini :
<a href="#" class="tip_trigger">Untuk link yang akan dipasang<span class="tip">Ini adalah isi dari tooltips yang kita buat</span></a>

Jumentum in, premo pertineo valde mara velit haero ulciscor abigo commodo vulputate volutpat. In typicus luptatum, nutus, ne letalis vel ventosus. Hendrerit aliquam eros eum eu laoreet, minim, probo. Duis nibh in huic abico duis enim oppeto. Link yang dipasangIni adalah isi dari tooltips yang sudah kamu buat tadi


Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

3 Response to "Simple Tooltips dengan CSS & Jquery trik"

  1. AriE ONly Said,

    keren gan.. ni kyk templatenya agregator premium punya o-om.. mantab dah... ^^
    ane book mark dulu ni tutor...

    makasi gan tutornya.... ...Replay

     


  2. jalan2 sore hari ketempat sahabat... ditunggu kunjungan balikknya di blog sederhana saya... ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |