Cara Membuat ToolTip Chord Kunci Gitar Di Blog

Memasang ToolTip Chord Kunci Gitar Di Blog

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




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




Tapi kalian harus sabar dalam pembuatan postingannya, karena nanti kita akan memasang sebuah kode pemanggil agar Chord Kunci Gitarnya dapat di tampilkan ketika mouse di dekatkan..




Kira-Kira nanti tampilannya seperti 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 menu 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 baru lalu masuk tab HTML biar enak dalam penulisannya..

• Sekarang kalian tinggal melakukan eksekusi pada postingannya dengan menggunakan kode berikut ini...



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




Silahkan sesuaikan atau Ganti Tulisan, Kunci / Huruf A dengan kode 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 seperti spasi yang tidak pas antara Kunci Gitar Dan lirik, silahkan coba gunakan kode spasi berikut ini, sesuaikan saja



 




Sehingga hasilnya nanti seperti 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 bingung mau ngasih penjelasan apa lagi

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Membuat ToolTip Chord Kunci Gitar Di Blog seperti pada blog / website www.chordtela.com ini bermanfaat :)


jangan lupa share ke yang lainnya :)