Tooltip juga bisa menghemat ruang blog kita jadi kita bisa pasang banyak iklan ,karena tooltip bekerja pada saat kursor berada di atas teks atau gambar tertentu.
Berikut cara-cara membuat tooltip :
DEMO JAVASCRIPT-nya SUMBER: Css globe
- jquery.js
- main.js
Langkah ke 1 pasang kode di bawah ini di pada bagian head HTML
Kodenya :
<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>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
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{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
Contoh :
<head>
PASANG KODE DI SINI
</head>
Langkah ke 2 pasang kode di bawah ini pada bagian body HTML
Kodenya :
<a href="http:/karman-goes74.blogspot.com" class="screenshot" rel="http://i823.photobucket.com/albums/zz154/faturahman74/SMILE.jpg" title=" HAPPY BLOGING ">HAPPY BLOGING</a>
Contoh :
<body>
PASANG KODE DISINI
</body>
Keterangan :
- Klik kanan pada kedua file javascript-nya lalu save setelah itu upload di file hostingan kalian NB : untuk cara upload file javascript bisa lihat disini
- Ganti kedua URL javascript yang berwarna merah dengan URL javascript yang kalian upload tadi.
- Ganti URL yang berwarna biru dengan URL yang akan kalian akan jadikan tooltip.
- Ganti URL Fhoto yang berwarna Orange dengan URL fhoto kalian,URL fhoto ini yang akan di jadikan penjelasan link, NB : untuk cara upload Fhoto bisa lihat disini
- Ubah teks yang berwarna pink dengan penjelasan anda,teks ini akan muncul bersama gambar.
- Ubah teks yang berwarna ungu.teks ini yang akan berisi link dan akan memunculkan gambar ketika kursor ditempatkan di atas teks ini.
Selesai
Tulisan ini hanya sebatas sharing dari seorang pemula untuk pemula,Jika ada yang kurang di mengerti kita bisa sharing di kolom komentar di bawah ini ,semoga bermanfaat.and happy blogging.
Tidak ada komentar :
Posting Komentar