Cara Mudah Membuat Tooltip Chord Gitar Dengan Tampilan Terkeren

Cara Mudah Membuat Tooltip Chord Gitar Dengan Tampilan Terkeren

Halo sahabat pecintateknologi. Pada kesempatan kali ini saya akan membagikan cara mudah untuk membuat tooltip chord gitar dengan tampilan terkeren. Untuk yang belum mengetahui apa itu tooltip chord gitar, tooltip chord gitar adalah sebuah petunjuk chord dengan gambaran chord gitar tersebut. Tujuan menggunakan tooltip chord gitar ini adalah untuk memudahkan kita dalam mempelajari gitar dengan mudah.

Untuk kalian yang ingin membuat blog tentang music atau tentang lirik lagu bisa menggunakan tooltip chord gitar terkeren ini. Cara membuatnya sangatlah mudah, tinggal kalian pasang saja di dalam blognya dan sesuaikan dengan liriknya saja. Mari kita bahas keuntungan dan cara memasangnya, apakah mudah atau sulit.

Baca Juga

• Cara Membuat Blockquotes Keren Dan Elegant Pada Artikel Blog
• Memasang Hashtag Label Blog Berwarna Di Bawah Postingan 2019
• Cara Terbaru Mencari Broken Link Pada Blog
• Cara Merubah Domain Blogspot Ke Domain MonoVM
• Solusi Agar Favicon Tampak Di Blog

Cara Mudah Membuat Tooltip Chord Gitar Dengan Tampilan Terkeren

Saya ingin membagikan tips ini karena saya terinspirasi untuk membuat blog tentang music, dan ingin membagikan ke kalian semua siapa tahu membutuhkannya. Saya sendiri sudah pernah memcoba menggunakan tooltip chord gitar ini. Dan hasil tampilannya sangat simple dan keren. Dijamin memuaskan jika menggunakan tooltip chord gitar ini.

Terus apasih kentungan menggunakan tooltip chord gitar ini? Terus bagaimana cara memasangnya di blog kita? Apakah mudah untuk memasangnya?

Keuntungan memasang tooltip chord gitar ini tidaklah banyak. Akan tetapi sangat membantu kita dalam membuat blog tentang music, dengan kita menggunakan tooltip chord gitar ini.

Untuk cara memasangnya sendiri cukuplah mudah tinggal kalian ikuti saja tutorial berikut ini. Untuk itu kalian semua harus memahi langkah - langkah yang saya tuliskan dibawah ini. Langsung saja kita ketutorialnya yaa.

Langkah - Langkah Memasang Tooltip Chord Gitar Dengan Mudah

• Login ke blogger.com Kita terlebih dahulu.
• Cari opsi menu Template, Edit Template, dan cari kode </head>
• Setelah sudah menemukan kode </head>, tinggal kita menaruh kode CSS dibawah ini diatas kode </head>

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

• Jika sudah tinggal kita save template saja.
• Untuk pemasangan CSSnya sudah selesai, tinggal kita tampilkan saja di dalam postingan artikel kita. Untuk caranya cukup mudah, tinggal menyesuaikan saja dengan liriknya.
• Untuk cara menampilkan tooltip chord gitarnya pake kode HTML dibawah ini..

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

Silahkan sesuaikan chord gitar berikut G dengan lirik lagu yang ingin kalian jadikan artikel. Untuk kodenya bisa menggunakan kode dibawah ini. Perlu di ingat dalam penulisan huruf kapitalnya juga berpengaruh, jika tidak sama dengan penulisan tooltip chord dibawah ini akan tidak tampil kodenya.

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

• Jika Chord gitarnya tidak pas dengan liriknya kalian bisa menggunakan kode spasi seperti dibawah ini.

 

• Sehingga hasilnya akan seperti ini.

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

Hasilnya jika chord gitar tidak sesuai dengan lirik nya. Tinggal kita tambahin &nbsp;
Sehingga seperti ini :

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

• Setelah sudah sesuai dengan liriknya tinggal kita Publikasin.
Perlu di ingat. Untuk mengetahui tooltip chord gitarnya sudah pas sama lirik atau belum, kita bisa pratinjau terlebih dahulu sebelum kita mempublikasikan artikel kita. Jangan lupa cek dahulu sebelum publikasikan artikel.

Kesimpulan Cara Mudah Membuat Tooltip Chord Gitar Dengan Tampilan Terkeren

Sebenarnya dalam mengganti tooltip gitar ini kita hanya perlu memperhatikan CSSnya dan kode HTMLnya ketika kita mau memposting artikelnya. Yang terpenting lagi ketika kita menulis lirik di dalam postingan tersebut sebisa mungkin sebelum kita mempublikasikan kita harus melakukan pratinjau terlebih dahulu, untuk apa?

Agar ketika lirik tidak pas dengan tooltip chord gitarnya kita bisa memperbaikinya lagi sampai pas dengan liriknya. Sebenarnya itu saja sih yang perlu di perhatikan, selebihnya kita harus memahi betul - betul untuk tutorial diatas tadi.

Gimana mudah kan? Jika masih belom paham atau belom bisa memakainya bisa tulis komentar dibawah ya. Nanti akan saya bantu sebisa saya.

Cukup sekian tips and tricks sekaligus tutorial Cara Mudah Membuat Tooltip Chord Gitar Dengan Tampilan Terkeren yang bisa saya share ke kalian semua. Untuk artikel berikutnya saya akan buatkan yang lebih menarik lagi. Salam pecintateknologi hehe

Terimakasih kepada Mas Teja untuk inspirasi artikelnya.