> > Cara membuat tooltip terbang

Cara membuat tooltip terbang

Unknown

: 15.16 9 comments

Hallo shobat blogger jumpa lagi nich semoga masih ada kemauan untuk mencoba dan ngak putus asa .Berawal dari kunjungan ke blog tetangga akhirnya aku temukan yang aku cari cari ..yaitu sebuah tooltip yang bisa zigzag sekaligus terbang tanpa mengurangi isi sekaligus link sumber masih tercantum , dengan sedikit modivikasi ,akan aku co share buat sobat sobat blogger yang berkeinginan memperindah tampilan blog untuk melihat Demonya silahkan menuju ke sini


Nah untuk cara membuat nya :
  1. Login ke blogger
  2. masuk rancangan Edit HTML [jangan lupa download lengkap dulu template takut ada kesalahan]
  3. Cari kode <head> lalu masukkan kode di bawah ini tepat di bawah kode <head>
    4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://kangmahfid.googlecode.com/files/zigzag-tooltip.js' type='text/javascript'/>
  4. Lalu cari kode]]></b:skin> lalu masukkan kode Css di bawah ini tepat di atas kode ]]></b:skin> 
    5. .tooltip{
      display:none;
      background:#333 url(http://a1star.com/images/
    shimmering-multistars.gif) 
    right bottom repeat;
      background-position:96% 93%;
      width:250px;
      font-family:Arial;
      font-size:13px;
      padding:10px 10px 20px;
      color: #00CCFF; 
      text-shadow:1px 1px 1px #000;
      border: 4px solid #555;
      border-radius:10px; 
      box-shadow:0px 5px 20px rgba(125,124,250,.9);
} 
#zigzag img{
      border:0;
      cursor:pointer;
      margin:0 8px;
}
  5. Nah untuk yang terakhir cari kode</body> dan masukkan kode di bawah ini tepat di atas kode </body> berikut kode nya :
    6. <script type="text/javascript">
$("#zigzag a[title]").tooltip({effect: 'bouncy'});
$("#zigzag img[title]").tooltip({effect: 'bouncy'});
</script>
  6. Lalu Save template
    7. Untuk pemasangan di postingan ataupun di HTML java script gunakan kode seperti di bawah ini :
    <div id="zigzag"> <a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a> </div>
 Note : tidak semua template bisa menggunakan  zigzag lap ini [sepengetahuan penulis ]
Oke selamat mencoba dan tooltip nya bisa terbang...
Judul Artikel :Cara membuat tooltip terbang
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat tooltip terbang Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
Label:

9 komentar

avatar
Balas
Fajrin delete 22 Maret 2012 pukul 16.39

info yang bagus
follback yah..??

avatar
Balas
Diah Ayu delete 5 Mei 2012 pukul 23.19

izin copas....gan

avatar
Balas
Batikrock delete 17 Mei 2012 pukul 12.52

gan punya saya kok gak bisa terbang jug? pdahal langkah2 dri 1-6 udah...mohon bantuannya

http://ngasar.blogspot.com/

avatar
Balas
kang jalal delete 17 Mei 2012 pukul 17.05

makasih script nya ..Karina ...berhasil...http://radarbalunglor.blogspot.com/

avatar
Balas
Unknown delete 24 Juni 2012 pukul 10.09

@Fajrin Ilham Hartanto Oke langsung ke TKP

avatar
Balas
Unknown delete 24 Juni 2012 pukul 10.10

@Dhajal Capeng Setelah meluncur ke TKP semua scripts dan kode css nya ternyata telah di hapus jadi aku ngak bisa koreksi

avatar
Balas
Unknown delete 24 Juni 2012 pukul 10.11

@Diah Ayu silah kan

avatar
Balas
Unknown delete 24 Juni 2012 pukul 10.12

@kang jalal setelah menuju ke TKP ternyata memang berhasil...

avatar
Balas
Nurfani delete 28 Juni 2012 pukul 12.43

Oke lah bos saya ikut memperbaiki yang bolong :) Artikel diatas juga menurut saya sangat bermanfaat. Terus share yang beginian ya?

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

Konversi