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.

Postingan terkait:

13 Tanggapan untuk "Cara Membuat Tooltip Sederhana Dengan CSS di Blog"

  1. jadi pingin coba terapkan di blog saya
    makasih tutorialnya

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

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

    ReplyDelete
    Replies
    1. rusak ? kenapa rusak? kan bisa di backup dulu :-D

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

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

      Delete
  5. izin praktek sob . .

    ReplyDelete

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

    ReplyDelete
  7. pengen nyoba , tapi ga ngerti tooltip apaan :v

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

      Delete
  8. kalo pemasangan di blockquote yag apa caranya?

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

      Delete

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.