Browse » Home » » Membuat Efek Tooltip Sederhana

Membuat Efek Tooltip Sederhana

Membuat Efek Tooltip Sederhana adalah tema saya kali ini, sudah agak lama tidak update postingan di karenakan memang belum ada bahan untuk saya publikasikan, dan akhirnya tanpa tak sengaja terpikir untuk berbagi tentang tutorial Tooltip tersebut.
Baiklah mari sekarang kita mulai saja bagaimana cara pasang Tooltip pada Blog.
Langkah-langkahnya adalah sebagai berikut:
*Langkah yang pertama.
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah ketemu, silahkan Copy Kode CSS dibawah ini dan Pastekan persis di atas kode ini ]]></b:skin>

a.tooltip {position:relative}
a.tooltip span {
display:none;
padding:4px 5px 4px 6px;
z-index:100;
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5A30pxXsNQ380MZ7I_P0GwKDosybxPwgT3yuacHsLUE43hz6Lqz7orlkVFs8OmIP8wD4h76SUfVgrXk6JQDE5sySTwSIiqSkXQJXTfJMh4D7f20qcsok3nn165kmYmMJKnlGIvUIo8vEH/s320/nav.gif) repeat-x;
color:#FFFFFF;
text-decoration:none;
width:100%;
height:auto;
text-align:center;
-moz-border-radius:5px;
border:1px solid #999999;
}
a:hover.tooltip {
font-size:99%;
cursor:pointer
}
a:hover.tooltip span {
display:block;
position:absolute;
-moz-opacity:0.9;
top:auto;
left:auto;
right:-20px;
bottom:30px;
line-height:14px;
font-size:12px;
font-weight:normal;
}

@- Jika sudah jangan lupa klick SAVE TEMPLATE / SIMPAN TEMPLATE
@- Nah... langkah yang pertama sudah selesai.

* Langkah berikutnya agar efek tooltip muncul, sobat hanya cukup menyisipkan kode yang berwarna MERAH TEBAL di link yang mau sobat beri efek Tooltip, dan contoh kodenya seperti di bawah ini.

<a class="tooltip" href="http://LINK ARTIKEL BLOG ANDA">JUDUL ARTIKEL BLOG ANDA<span><strong>JUDUL ARTIKEL BLOG ANDA</strong></span></a>

@- Dan hasil dari kode di atas adalah seperti ini » » JUDUL ARTIKEL BLOG ANDAJUDUL ARTIKEL BLOG ANDA

@- Tambahkan link gambar, jika sobat menginginkan efek tooltip disertai dengan gambar, sobat cukup menambahkan kode link gambar yang berwarna PINK, dan contoh kodenya seperti dibawah ini.

<a class="tooltip" href="http://LINK ARTIKEL BLOG ANDA">JUDUL ARTIKEL BLOG ANDA<span><center><img src="http://GANTI DENGAN LINK GAMBAR ANDA"/></center><strong>JUDUL ARTIKEL BLOG ANDA</strong></span></a>

@- Hasil efek tooltip yang disertai dengan gambar » » JUDUL ARTIKEL BLOG ANDA
JUDUL ARTIKEL BLOG ANDA


@- Nah... selesai sudah saya berbagi cara membuat efek tooltip sederhana hanya dengan kode CSS saja, monggo... monggo... silahkan dicoba semoga bermanfaat.
@- Mohon maaf jika dalam postingan ini ada banyak kekurangannya, harap maklum kalau saya juga masih belajar.
@- Sukses selalu buat SAHABAT BLOGGER semua.

Cara membuat tooltip, tooltip, pernak pernik blogspot, free template, widget blogspot

14 Comments To Membuat Efek Tooltip Sederhana

mantap...thx sob,,nice blog

http://caraindra.blogspot.com
°l||l°
Ai mengatakan pada
 
°l||l°
blog yang keren. . keren. . keren. . dan keren. .
g ada lawan lah pokoknya. .

bagi donk bozz template yang beginian. .
saya pengen kali nie. .

::terima kasih::
°l||l°
Muhammad Chandra mengatakan pada
 
°l||l°
Templat saya biasa saja kok mas chandra, iya nanti saya akan coba publikasikan template ini, untuk sekarang saya masih belum bisa di publikasikan karena masih ada banyak kesalahan di template ini, sabar ya mas chandra... hehe..
Sukses selalu buat mas chandra.
°l||l°
nwi mengatakan pada
 
°l||l°
jangan lupa ya publikasikan template ini. .
tapu untuk saya aja donk. .
hahahahahaha. . .
°l||l°
Muhammad Chandra mengatakan pada
 
°l||l°
susah dimengerti triknya bossssssss
°l||l°
Kang surinder mengatakan pada
 
°l||l°
bukmark dulu bang :D
°l||l°
ureh mengatakan pada
 
°l||l°
@-surindersurisahni : coba di ulang sekali lagi boss..?
mohon maafnya kalau saya kurang baik dalam menata kata-
kata didalam menerangkan tutorial tersebut bosss...?
harap maklum kami dalam tahap belajar.....
°l||l°
nwi mengatakan pada
 
°l||l°
keren memang sobat, simple dan sangat efektif untuk mempublikasikan elemen link penarik pengunjung, yang saya tanyakan kira2 pengaruhnya ke load nya berpengaruh banyak atau tdk?walaupun menggunakan css yang keren, karena sudah endut punya saya..
nice share saya follow Anda
°l||l°
riz mengatakan pada
 
°l||l°
@-riz : " Kalau para Master Blogger bilang CSS tidak terlalu banget terhadap load, dan yang terpenting pada penempatan CSS di blog kita jangan ngacak agar saat di loading berjalan mulus, yang suka bikin load Blog kita berat adalah kebanyakan Javascript, Gambar yang berukuran terlalu besar dan masih banyak lainnya lagi, jadi pinter2nya kita saja ngakalin Blog biar pada saat di loading ngga berat " itu kata para Master Blogger, saya sendiri juga pakai CSS tersebut di atas sob, sialhkan di coba teman. Sukses selalu sob riz.
°l||l°
nwi mengatakan pada
 
°l||l°
Trims infonya...... di coba...
°l||l°
d'ara mengatakan pada
 
°l||l°
Maksih gan Tutornya sangat berguna,Udah beberapa kali ane coba tutor yg lain Sumpah Ga bisa d mengerti,tpi pas Dah Di Coba Punya agan Sangat Berguna dan berarti buat Dava...
Sekali lgi mksh,..
SemOga Tuhan Membalas Semua ke Baikan Yg Agan Lakukan Selama ni,..
Klo Da waktu Sempatin Ber kunjung k http://www.davasiappatahhati.co.cc/
Blog yg masih pemulan
°l||l°
Unknown mengatakan pada
 
°l||l°
waah.. tengs banget nih gan tutorialnyah..
emang betulan saya lai perlu yang bginian ;)

skalian mau silaturahmi ah..
kalo da waktu kunjung balik ya gan ke sini ;)
°l||l°
Anonymous mengatakan pada
 
°l||l°
Cacad Banget
°l||l°
Anonymous mengatakan pada
 
°l||l°
thanks tutornya gan.. comment back ya..
°l||l°
Bryan Kirana Gaston mengatakan pada
 
°l||l°

Send Your Comment Here

Pernak Pernik Blogger | Copyright 2010 | Template Design © By IMS | Powered By Blogger