Monday, July 4, 2011

Memunculkan Tooltip Deskripsi Untuk Blogger

cara mudah membuat tooltipsTooltip telah menjadi sumber daya umum dan digunakan oleh semua situs utama untuk menggambarkan sebuah link atau memberikan lebih banyak bantuan dan informasi pada bagian text . Mungkin beberapa dari anda pasti pernah melihat toltip ini pada saat anda berada di suatu web / blog dan  pada saat itu anda melihat sebuah tanda tanya kecil yang membuat anda bisa melihat sebuah pop up disertai tooltips informasi

Pada kesempatan kali ini saya akan menshare tentang tooltips ini . Cara membuat tooltips di blog anda ini sangat cukup mudah karena hanya memasukkan kode css saja dan mungkin ini bisa membuat anda lebih mudah untuk memiliki tooltips ini di blog anda.

Untuk anda jika ingin melihat demo nya terlebih dahulu , anda bisa mengklik dibawah ini

demo untuk membuat tooltips

Bagaiman anda berminat untuk memunculkan tooltips deskripsi di blog anda ??? jika berminat , ikuti langkah berikut ini :

  • Menambahkan Kode CSS di blog anda :

1. Masuk ke dashboard blog anda > Design > Template designer.

cara memasukkan kode css tooltips

mudah kode css tooltips


2 . Setelah masuk pada bagian template designer pilih advaced > add css > :

masuk pada bagian cheat css

3. Copy paste kode css dibawah ini dan letakkan css tersebut di kolom css seperti gambar diatas .


.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;opacity: .9;
background-color: #ddd;background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;bottom: -8px;
}


Note : Kode css diatas adalah tooltips sederhana yang saya pasang di blog saya tadi dan jika anda ingin mengganti warna tooltipsnya anda bisa ganti kode kode css yang sudah saya tandai dengan warna biru. Jika anda ingin melihat beberapa warna yang bisa anda pakai klik DISINI

4. Jika selesai anda bisa klik aplly to blog disebelah kanan atas pada menu css.

itu dia cara menambahkan kode css tooltips di blog anda . Untuk mengaktifkan tooltips nya anda bisa menyisipkan kode class="tooltip" pada kode link . Berikut ini saya mempunyai contoh menyisipkan kode tersebut :


  • <a href="Link Disini" class="tooltip">ANCHOR TEXT<span>Deskripsi anchor teks dan ini akan muncul pada tooltips</span></a>

Diatas anda bisa lihat dimana kode tooltips dimasukkan , nah untuk memudahkan anda , saya akan membuat contoh lagi dari penyisipan kode diatas .

  • <a href="http://vianjb.blogspot.comclass="tooltip">Cara memasukkan kode css<span>Berikut ini adalah cara memasukkan kode css di blog anda</span></a>

Nah .. diatas adalah contoh saja , di contoh itu saya juga memberikan juga sebuah anchor text dan deskripsi yang nanti akan muncul di tooltips .

Baiklah mungkin cukup sekian tentang css tooltips ini , oh ya tooltips ini anda bisa munculkan dimana saja akan tetapi dalam bentuk kode html bukan dalam bentuk teks , jika anda ingin munculkan didalam postingan maka anda bisa memilih type edit html dan untuk di bagian halaman blog anda , anda bisa memilih html javascript .

10 comments:

  1. koneksi musti cepet nih biar langgengg :D

    ReplyDelete
  2. gak perlu pake tool ini juga bisa kok bosss ,

    ReplyDelete
  3. @ ka damar : maksudnya agan , koneksi musti cepet biar langgeng apa ya !!!

    ReplyDelete
  4. wow ... keren banget dah sob ... thnk tutornya ...

    ReplyDelete
  5. bukan apa2nya karena saya udah stop dengan utak atik template saya !!

    ReplyDelete
  6. well, me too. ganti template dan fitur yang terlalu sering juga tidak bagus bukan? by the way ini tutorial yang sangat berguna

    ReplyDelete
  7. wah setuju mah kalau itu !! oke makasiih sob

    ReplyDelete
  8. oh ya, jangan lupa sering berkunjung ke blog saya, saya sering sekali berkunjung kesini juga. Artikel-artikel kamu keren sekali! (:

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam