Cara Menciptakan Tooltip Chord Kunci Gitar Di Blog

Memasang ToolTip Chord Kunci Gitar Di Blog

Tutorial Cara Membuat ToolTp Chord Kunci Gitar Di Postingan Blog. Makara Ketika Mouse Di tujukan ke Kunci gitar maka secara otomatis nanti ada title tooltip, hover Chord Kunci Gitar menyerupai di website www.chordtela.com ....

Cara membuatnya sangat gampang kita hanya mengguakan css untuk menampilkan kunci gitar chord menyerupai di blog www.chordtela.com

Tapi kalian harus sabar dalam pembuatan postingannya, sebab nanti kita akan memasang sebuah isyarat pemanggil biar Chord Kunci Gitarnya sanggup di tampilkan saat mouse di dekatkan..

Kira-Kira nanti tampilannya menyerupai berikut, silahkan dekatkan cursor kalian ke kunci gitar berikut ini...
  C        G    Am        G
Denting piano kala jemari menari


Nah bagi kalian yang ingin membagikan Lirik lagu Beserta Kunci Gitar, Chord Kunci Gitar Di artikel kalian, silahkan ikuti tutorial singkat berikut ini....

Tutorial Cara Membuat ToolTip Chord Kunci Gitar Di Blog

• Login Ke blogger.com

• Lanjutkan ke sajian Template, Edit HTML, Cari Kode </head>

• Kalo sudah ketemu, masukan css berikut di atasnya...

 <style type="text/css"> .tbi-tooltip{font-family:Candara,Tahoma,Geneva,sans-serif;outline:none;cursor:help;position:relative;text-decoration:none;border-bottom:1px dotted #000} .tbi-tooltip span{margin-left:-999em;position:absolute;color:#000} .tbi-tooltip:hover span{font-family:Trebuchet MS,Calibri,Tahoma,Geneva,sans-serif;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:36px;height:70px;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;-moz-box-shadow:0 0 9px #000000;-webkit-box-shadow:0 0 9px #000000;box-shadow:0 0 9px #000000} .tbi-tooltip:hover img{border:0;margin:-10px 0 0 -55px;float:left;position:absolute} .tbi-tooltip:hover em{font-family:Candara,Tahoma,Geneva,sans-serif;font-size:1.2em;font-weight:bold;display:block;padding:0.2em 0 0.6em 0} .custom{padding:0.5em 0.8em 0.8em 2em} .tbi-A{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/A-chord.jpg)} .tbi-B{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/B.1.gif)} .tbi-C{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/C-chord.jpg)} .tbi-D{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/d-chord.jpg)} .tbi-E{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/E-Chord.jpg)} .tbi-F{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/F-chord.jpg)} .tbi-G{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/G-chord.jpg)} .tbi-Bm{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/b-minor-chord01.gif)} .tbi-Cm{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/c-minor-chord01.gif)} .tbi-Dm{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/d-minor-chord01.gif)} .tbi-Em{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/e-minor-chord01.gif)} .tbi-Fm{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/f-minor-chord01.gif)} .tbi-Gm{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/g-minor-chord01.gif)} .tbi-Am{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Am-chord.gif)} .tbi-Bb{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Bb-chord.jpg)} .tbi-Ccis{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/C_.png)} .tbi-Dcis{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/D+CIS.jpg)} .tbi-Fcis{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Fcis-chord.jpg)} .tbi-Gcis{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/gciss.jpg)} .tbi-Acis{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Acis-chord.jpg)} .tbi-Bbm{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/bbm-chord.jpg)} .tbi-Ccism{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Ccism-chord.jpg)} .tbi-Dcism{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/D_m.png)} .tbi-Fcism{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/F_m.png)} .tbi-Gcism{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/G_m.png)} .tbi-Acism{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Acism-chord.png)} .tbi-A7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/general.jpg)} .tbi-B7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Btujuh-Basic.png)} .tbi-C7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Ctujuh-Chord.jpg)} .tbi-D7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Dtujuh-Basic.png)} .tbi-E7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Etujuh-Chord.jpg)} .tbi-F7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Ftujuh-Chord.jpg)} .tbi-G7{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/Gtujuh-Chord.jpg)} .tbi-GB{border:1px solid #2BB0D7;background:url(https://raw.githubusercontent.com/mastamvan/backup/kuncigitar/GB-Chord.jpg)} </style> 

• Kalo sudah, tinggal save template...

• Buat postingan gres kemudian masuk tab HTML biar yummy dalam penulisannya..

• Sekarang kalian tinggal melaksanakan sanksi pada postingannya dengan memakai isyarat berikut ini...

 <a class="tbi-tooltip">A<span class="custom tbi-A"></span></a> 

Silahkan sesuaikan atau Ganti Tulisan, Kunci / Huruf A dengan isyarat Chord Kunci Gitar Berikut...
Ingat, Dalam penulisan Huruf Kapital mempengaruhi, kalo tidak sesuai tooltip chordnya ga akan tampil..



 A B C D E F G Bm Cm Dm Em Fm Gm Am Bm Ccism Ccism Dcism Fcism Gcism Acis Bbm Ccism Dcism Fcism Gcism Acism A7 B7 C7 D7 E7 F7 G7 GB 

• Barang kali dalam penulisan ada yang error menyerupai spasi yang tidak pas antara Kunci Gitar Dan lirik, silahkan coba gunakan isyarat spasi berikut ini, sesuaikan saja

   


Sehingga alhasil nanti menyerupai berikut...


 &nbsp;&nbsp;&nbsp;<a class="tbi-tooltip">A<span class="custom tbi-A"></span></a> lirik Lagu Disini Example                    A jangan Disini Tapi Disini 

• Mungkin itu saja tutorialnya, tinggal publikasikan

• Kalo ada yang kurang paham silahkan tanya di komentar aja ya :)

• Ane galau mau ngasih klarifikasi apa lagi

Cukup sekian dan terima kasih, semoga artikel wacana Tutorial Cara Membuat ToolTip Chord Kunci Gitar Di Blog menyerupai pada blog / website www.chordtela.com ini bermanfaat :)
jangan lupa share ke yang lainnya :)