Thursday, 2 May 2013

Cara Membuat Tooltip Sederhana Dengan CSS di Blog

Membuat Tooltip Sederhana Dengan CSS
Cara Membuat Tooltip Sederhana Dengan CSS - Ya. Kali ini saya akan berbagi Cara Membuat Tooltip Sederhana Dengan CSS. Seperti apa tooltip itu? coba perhatikan dan sentuh link berikut :


Langkah pertama Login ke www.blogger.com
Pilih Template > Edit HTML lalu cari kode ]]></b:skin>
Kemudian letakkan kode dibawah ini diatas kode ]]></b:skin>
.tooltip{position:relative; display:inline-block; white-space:nowrap}
.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:auto; 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}
Setelah itu sisipkan kode ini di bawah kode ]]></b:skin>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='https://lioneldandy.googlecode.com/files/DANDYtooltip.js'
type='text/javascript'></script>
Langkah terakhir, klik Save Template / Simpan Template

Cara utk penggunaan Tool Tip ini sangat sederhana, anda tinggal menaruh kode anda yg ingin disisipkan tooltip dengan data-tooltip="Title"  contoh :

<a class='DANDYtext' href='#test' data-tooltip='Test Tooltip | Xpress Community'>Test Tooltip | Xpress Community</a>
Atau
<a href="Link" data-tooltip="Isi untuk judul nya (tooltipnya)">Judulnya</a> 
Nah data-tooltip='Test Tooltip | Xpress Community' itu untuk Tooltip / Titlenya ...

Demo

Sekian dari saya, semoga artikel ini Bermanfaat untuk sobat.

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

13 komentar

jadi pingin coba terapkan di blog saya
makasih tutorialnya

weeew nice sob thanks atas caranya insyaallah akan ane coba thanks yo search by google ::: naufalthedarkness ::::

waw... tips baru nih,,,, pengen coba namun takut templateku rusak...
tetap nice...

rusak ? kenapa rusak? kan bisa di backup dulu :-D

Jarang pake Tooltip :v
karena kgk ngerti mksd tooltip sebenarnya apa :3

kalo blom tau, apa itu tooltip ?
dicari aja digoogle, pasti ada :v
#ahkakhakhka


keren nih artikel nya .. makasi udah share :)
blogwalking yuk sob ..

pengen nyoba , tapi ga ngerti tooltip apaan :v

a mastah pura pura gak tau :v
http://sch-xp.blogspot.com

kalo pemasangan di blockquote yag apa caranya?

kalo pemasangan di blockquote itu bisa memakai css ::before dan ::after sob...
tutornya cari aja digoogle :D

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.
EmoticonEmoticon