Membuat Tooltip Chord Gitar Blog Untuk Pemula

Tooltip gitar itu apa sih? penjelasan sederhananya saat kita mengarahkan mouse (Hover) pada kunci gitar maka akan tampil gambar kuncinya. Contoh website besar seperti tabs.ultimate-guitar.com, e-chords.com, chordtela.com.

Contoh Tooltip Chord gitar

Itulah yang dinamankan tooltip kunci gitar. Nah bagaimana cara membuatnya?

Cara membuat tooltip pada blogger sangatlah mudah, kalian hanya memerlukan gambar chord dan mencantumkannya pada setiap postingan kunci gitar.

Cara setting tooltip pada blogger.

Memasang tooltip bisa kita lakukan pada berbagai platfrom blog, baik itu blogger.com ataupun wordpress.org.

Kali ini saya hanya membuat artikel memasang tooltip chord pada blogger, dan akan saya pisahkan bagian setting template blogger untuk tooltip blogger dan membuat artikel chord gitar dengan kunci gitar yang muncul (tooltip). Jadi simak tutorialnya sebagai berikut.

Baca : Menemukan link mati secara instans

Cara setting template blogger untuk tooltip kunci gitar.

1. Log in Blogger.
2. Lanjut ke Template, Edit HTML, dan cari kode </head>
3. Masukkan Kode CSS berikut

<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>

4. Simpan dan done.

Baca : Custom adblock dengan background anime favorite.

Jika sudahb selesai setting template blogger untuk tooltip chord, kalian bisa melanjutkannya dengan tutorial membuat postingan tooltip kunci gitar dibawah ini.

Membuat artikel kunci gitar dengan visual kuncinya juga (tooltip).

1. Masuk blogger
2. Buat postingan baru.
3. Pilih mode HTML. (Harus mode HTML jika tidak akan error).
4. Masukkan kode berikut ini sebagai kunci gitarnya agar tooltip muncul saat hover kursor.

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

Catatan :

1. Ganti tulisan berwarna merah dengan chord yang sesuai lagunya dan kode chord berikut

   
      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
   

2. Perhatikan huruf besar dan kecil, karena sangat berpengaruh pada tooltip.

5. Jika ada yang tidak pas chord dan liriknya bisa gunakan kode spasi berikut.

   
        atau  
   

6. Done.

Baca : Membuat tombol keren hanya dengan CSS3.

Sekian tutorial membuat tooltip chord pada blog. Kalian bisa melakukan tutorial diatas khusus untuk blog kunci gitar, walaupun nantinya penulisan postingannya akan memakan waktu tetapi jika pelanggan puas blog pun ramaikan.

Sekian dari saya, terima kasih telah berkunjung.