Cara Membuat ToolTip Chord Kunci Gitar Di Blog

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
    • 
&nbsp;

    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 :)
29 komentar
  1. UnknownNovember 3, 2016 at 7:45 PM

    Gan kok Chord Gitarnya disebelah liriknya ? bukan diatas liriknya ?

    ReplyDelete
  2. UnknownNovember 3, 2016 at 9:25 PM

    Bro, kok kunci gitarnya disebelah lirik, bukan diatas lirik, kenapa ya ?

    ReplyDelete
    Replies
    1. Mas TamvanNovember 3, 2016 at 11:09 PM

      Magsudnya gimana gan?
      Tooltipnya d sebelah kiri n agan pengen d atas?

      Delete
  3. UnknownDecember 7, 2016 at 7:48 PM

    thanksss banget gaan,, work in my blog

    ReplyDelete
    Replies
    1. Mas TamvanDecember 7, 2016 at 10:00 PM

      Iya gan, Sama-sama :)
      Thank Juga atas Pemberitahuannya (y)

      Delete
  4. AnonymousJune 30, 2017 at 1:49 AM

    wuihh... mantap makasih mas ilmunya.

    ReplyDelete
  5. Kepo InfoJuly 24, 2017 at 5:53 AM

    Sekarang kalian tinggal melakukan eksekusi pada postingannya dengan menggunakan kode berikut ini maksudnya gimana?

    ReplyDelete
    Replies
    1. Mas TamvanJuly 24, 2017 at 8:47 AM

      jadi gini gan, itu kan banyak kuncinya, nah kunci gitar itu d masukin ke dalam kode yang udah d sediakan...
      Misak Kunci A ↓

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

      Contoh lagi Kunci A Minor ↓

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

      Intiny agan tinggal memasukan kunci gitarnya di sebelah
      <a class="tbi-tooltip"> dan di sebelah custom tbi-

      Sehingga hasilnya seperti ini ↓

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

      Delete
    2. Kepo InfoJuly 24, 2017 at 4:43 PM

      Sip gan responnya cepet. Mau nambahin koreksi sih ntah kenapa ane tadi nyoba praktekin saya taruh kodenya di atas [/head] ga muncul, alhasil saya coba taruh di atas [head] baru muncul. barang kali ada yg kek ane.

      Btw thx ya

      Delete
    3. Mas TamvanJuly 24, 2017 at 7:13 PM

      Sip gan, lebih baik kalo css taronya d dalam markup head
      <head>

      Disini

      </head>
      Atau Cek ↓
      https://mastamvan.blogspot.co.id/2017/03/memasukan-css-style-di-post-blog-tidak.html

      Delete
    4. Kepo InfoJuly 24, 2017 at 11:19 PM

      Ok lah gan. Sy mau nanya lagi nih. Kalo mau nambah tooltip gambarnya gimana? kan itu blm lengkap, kalo mau nambahin gmn? terus upload gambarnya biar kebaca juga. Soalnya rada awam kalo di github

      Delete
    5. Mas TamvanJuly 25, 2017 at 12:07 AM

      Upload gambarnya bisa di blog gan
      Nanti bikin CSS baru dengan kode ↓
      .tbi-KUNCI{border:1px solid #2BB0D7;background:url(LINK_IMAGE)}

      Tinggal Sesuaikan Tulisan KUNCI dan LINK_IMAGE,
      Kalo udah tinggal gabungin n save

      Delete
  6. simbahnurJuly 29, 2017 at 7:46 PM

    Kalau untuk menghilangkankan garis titik-titik kecil dibawah huruf chordnya itu gimana caranya min?

    ReplyDelete
    Replies
    1. Mas TamvanJuly 29, 2017 at 8:55 PM

      Hapus border pada css .tbi-tooltip

      Atau tambahin css ini ↓

      .tbi-tooltip{
      border: none !important;
      }

      Delete
  7. UnknownAugust 18, 2017 at 9:36 AM

    gan kalau mematikan link pada showtip atau tooltip itu skripnya gmana?

    maksudnya, kalau di sentu tulisan akan muncul gambar saja,, walaupun diklik tetap pada laman disitu

    Mohon bantuannya ya,, thx sblumnya

    ReplyDelete
    Replies
    1. Mas TamvanAugust 18, 2017 at 9:41 AM

      Jangan pake tag a. Pake span aja, contoh ↓

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

      Delete
    2. Mas TamvanAugust 18, 2017 at 9:43 AM

      Atau biar lebih simpl ↓

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

      Delete
  8. AnonymousSeptember 5, 2017 at 7:17 PM

    gan saya kan pake kode < pre > di awal kode.. biar tooltip ga terkena < pre > gimana ya?

    ReplyDelete
    Replies
    1. Mas TamvanSeptember 5, 2017 at 7:23 PM

      Hapus <pre>nya, atau tambahin class terus kasih css style

      Delete
  9. Rido AlfathSeptember 26, 2017 at 5:19 AM

    thank bro Ilmunyaa

    ReplyDelete
  10. Jox KincaiDecember 14, 2017 at 8:39 PM

    chord D# atau Eb nya tidak muncul, bos.. apa mungkin saya salah ngetik html? tapi selebihnya ok semua, bos

    ReplyDelete
    Replies
    1. Mas TamvanDecember 19, 2017 at 9:04 PM

      Saya coba masih aman gan, mungkin cara pemasangannya yg belum pas :)

      Delete
  11. Made In MaduraJanuary 28, 2018 at 12:36 AM

    antara kedua head itu kan ada kode, kodenya harus di hapus apa gimana gan?

    ReplyDelete
  12. Made In MaduraJanuary 28, 2018 at 12:37 AM

    antara kedua head tersebut kan ada kode tu, kodenya harus dihapus apa gimana gan?

    ReplyDelete
    Replies
    1. Mas TamvanJanuary 29, 2018 at 1:40 AM

      Cukup tambahkan kode Chordnya d atas </head>, tanpa menghapus kode lain gan.

      Delete
  13. Made In MaduraJanuary 28, 2018 at 7:41 AM

    disini kan ada gambar chord yg gak ada gan, spt Asus2. trus cra masukinnya gimana?

    ReplyDelete
    Replies
    1. Mas TamvanJanuary 29, 2018 at 1:38 AM

      Bikin Gambar seperti yang sudah saya buat, lalu agan upload ke penyedia hosting. selanjutnya tinggal menambahkan CSS seperti di atas.

      Delete
  14. Ana BJune 7, 2018 at 12:49 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  15. chordseven7.comOctober 11, 2018 at 6:25 PM

    Sob? Kalau matikan link chordnya kn jadi tak berwarna..nh gmna tu cranya supaya teks chordnya tetap berwarna,tpi linknya off??

    ReplyDelete