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. Kaprikornus 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, alasannya yakni nanti kita akan memasang sebuah instruksi pemanggil semoga Chord Kunci Gitarnya sanggup di tampilkan dikala 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 hidangan 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 instruksi berikut ini...
<a class="tbi-tooltip">A<span class="custom tbi-A"></span></a> 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 instruksi spasi berikut ini, sesuaikan saja
Sehingga karenanya nanti menyerupai berikut...
<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 perihal Tutorial Cara Membuat ToolTip Chord Kunci Gitar Di Blog menyerupai pada blog / website www.chordtela.com ini bermanfaat :)
jangan lupa share ke yang lainnya :)
Comments
Post a Comment