Di hari yang cerah ini blog Oto Website akan share tentang Tooltip yang bertema Tutorial Mudah Tooltips dengan CSS3 dan jQuery. Sebelumnya bagi anda yang tidak tahu dengan Tooltip Anda bisa melihatnya sedikit penjeasanya di tutuorial Cara Membuat Tooltip Preview Image Dengan jQuery. Ehm sedikit pemberitahuan sebelumnya blog ini juga pernah membahas tentang Tooltips juga yang berjudul Cara Membuat Tooltip Otomatis Semua Title. Mungkin tidak perlu berlama-lama lagi untuk lebih jelasnya tentang Tutorial Mudah Tooltips dengan CSS3 dan jQuery anda bisa melihat demonya lansung dengan menekan tombol berikut ini.





1. Login ke akun blogger anda.

2. Pada Dasbor klick ➨ Rancangan ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang sobat copy kode CSS3 berikut dan paste atau letakkan di atas kode tadi.
.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}

.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: 150px;
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;
}

6. Masih di dalam Edit Temlpate, sekarang letakkan kode jQuery berikut di atas kode </head>




<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='http://btsnts.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>
NB : Hapus kode yang saya beri warna merah bila di template Anda sudah terinstal jQuery 1.7.1
7. Simpan Template.

8. Terakhir, untuk menerapkannya di blog Anda, Anda harus menggunakan kode pemanggil, dan kode pemanggilnya adalah berikut ini :

<b data-tooltip="Teks tooltips">Teks di postingan</b>
NB : Ganti Teks tooltips dengan teks yang akan muncul sebagai Tooltips
Ganti Teks di postingan dengan teks yang akan berada di postingan.
Selesai atau Finish !

Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article kali ini!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top