Membuat Tooltips Image dan Text Sederhana di iMe

Hey..mau tau gak nih, ada yang baru di iMe, yaitu kita bisa membuat tooltips di artikel-artikel yang kita buat di iMe.
Bagaimana sih caranya, yukk..di simak..
^_^

Sebelumnya tooltips itu adalah tampilan informasi dalam bentuk teks/gambar/link yang muncul ketika kita melakukan mouse over atau jika mouse diarahkan ke teks/gambar/link tersebut. Kurang lebihnya tooltips itu sepeti gambar di bawah ini.

Tooltips Gambar + Text

1.  Masuk ke Dashboard → iTheme2 → Settings, otomatis sudah masuk di bagian General → copas script di bawah ini di dalam kolom Header Code.

general

<script src=”http://dfssdf.googlecode.com/files/tooltipjquery.js” type=”text/javascript”></script>
<script src=”http://dfssdf.googlecode.com/files/tolltipmain.js” type=”text/javascript”></script>

2.   Lalu pilih Styling pada bagian atas sebelah Settings→ di sebelah kiri pilih yang Custom CSS → copy-paste script di bawah ini ke dalam Custom CSS.

css

<style type=”text/css”>
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% “Courier New”, Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}

/* */

#screenshot{                          ——> nama class bisa di ganti sesuai keinginan
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

/* */
</style>

3.  Save all

4.  Kemudian letakkan script berikut ini pada Kata / Gambar yang ingin di beri tooltips di bagian Text.

 text

<a class=”screenshot” rel=”URL Gambar”  title=”Keterangan Gambar“>EXAMPLE</a>

Ket :
screenshot = Nama Class
URL Gambar = alamat  link gambar yang ingin di tampilkan sebagai tooltips
title = keterangan yang akan muncul sebagai tooltips dalam bentuk text

Contoh :

Langkah 1-3 dilakukan sama seperti di atas → Untuk langkah no 4 di ganti menjadi seperti ini :

<a class=”screenshot” rel=”http://images.fanpop.com/images/image_uploads/Emotion-Icon-picks-447611_200_200.jpg”  title=”Love it”>EXAMPLE</a>

Maka hasilnya seperti di bawah ini :

Gambar akan muncul ketika kita mengarahkan kursor pada kata EXAMPLE

tooltips

Tooltips Text

Jika hanya ingin membuat tooltips dengan text saja, tidak perlu mengikuti langkah 1-3, cukup langkah no 4 saja, namun script nya di ganti menjadi seperti ini :

text2

<a title=”Keterangan Text”>EXAMPLE</a>

 

Contoh :

Saya membuat tooltips text dengan script seperti ini :

<a title=”Love it”>EXAMPLE</a>

Maka hasilnya seperti di bawah ini :

 

Love itKata Love it muncul ketika kita mengarahkan mouse pada kata EXAMPLE.

 

Arahkan Mouse anda pada tulisan di bawah ini :

  • Gambar + Text

EXAMPLE

  • Text

EXAMPLE