Monday, September 17, 2012

Cara Membuat Tool Tips Jquery di Blogger

Cara Membuat Tool Tips Jquery di Blogger. Bagi sobat-sobat yang mungkin pengen blognya lebih keren. nih saya punya triknya.Trik ini pertama kali di populerkan oleh helperblogger.
Meskipun trik ini jarang digunakan oleh kebanyakan blogger tapi tidak ada salahnya sobat mau mencobatrik ini.

ok langsung ya....

pertama.. monggo lihat dulu DEMOnya

keren sob????? mau tau cara buatnya gak???? hehehehe

nih tak kasih tahu....


Cara Membuat Tool Tips Jquery di Blogger


  • login blog
  • rancangan >> edit HTML
  • cari kode ]]></b:skin>
  • lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>
.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;
}
  • lalu taruh kode dibawah ini tepat dibawah kode ]]></b:skin>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src='http://vikrymadz.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>

  • simpan template

Untuk menerapkannya dipostingan sobat memakai cara berikut ini :

<b data-tooltip="Ganti ini dengan isi tootips sobat">Kata sobat Disini</b>


gimana??? mudah kan????
selamat mencoba ^_^

Related Posts:

  • Cara Melihat Link Asli Dibalik URL PendekCara Melihat Link Asli Dibalik URL Pendek.Layanan penyingkat tautan atau yang jamak disebut "URL Shortener" memang sangat membantu buat kita yang ingin menghemat karakter tautan ketika berbagi dengan kolega kita. Apalagi kala… Read More
  • Eater Eater lihat font klo ingin memakai font ini di blogger caranya gampang kok...1. login blog > rancangan > edit HTML > cari kode ]]></b:skin> 2. lalu masukkan kode dibawah ini dibawah … Read More
  • Trik Optimasi SEO di Paragraf PertamaSebuah langkah sederhana dengan hasil luar biasa serta menghemat waktu kita. Paragraf awal dalam sebuah tulisan blog begitu sangat penting serta menentukanhasil SERP di mesin pencari walaupun terkadang hasil de… Read More
  • Cara Buat Read More Otomatis di BlogCara buat read more ini menggunakan gambar sebagai tombol jadi semakin terlihat menarik, bisa disesuaikan sesuai kebutuhan serta cukup mudah dalam membuatnya, tapi tetap harus di perhatikan dengan baik dan ikuti ketentua… Read More
  • Cara Membuat Efek Zoom pada Image (otomatis)Halo sobat bloggers..... ada tips baru nih, yaitu cara membuat efek zoom pada image (otomatis). Weh gunanya buat apa mas bro and gmn cara kerjanya? ok saya terangin deh, efek zoom pada gambar ini cara kerjanya adala… Read More

0 komentar:

Post a Comment