Cara Membuat Tooltip Chord Gitar

FANSUBLOGGER - Untuk kamu yang punya blog yang menyediakan Chord Guitar untuk musik-musik terbaru ataupun yang lain. Sekarang kamu bisa memakai Tooltip Chord ini untuk membantu para pemula yang membaca Chord Lagu.

Tooltip Chord ini berfungsi untuk memberikan informasi atau gambar tentang Chord yang akan di tekan. Atau lebih gampangnya, Tooltip Chord ini berfungsi untuk menampilkan chord yang akan kamu mainkan.

Ok kita langsung aja ke Cara Pembuatan nya.

Cara Pembuatan

Langkah Pertama : Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas ]]></b:skin> atau </style>

Untuk mempermudah pencarian gunakan tombol kombinasi CTRL + F pada keyboard dan tulis kodenya di kolom pencarian lalu tekan Enter

div#tipDiv {
    font-family: "courier new";
    padding: 4px;
    color: #000;
    font-size: 11px;
    line-height: 1.2;
    background-color: #EEE;
    border: 1px solid #BBB;
}

Langkah Kedua : Yaitu dengan memasang Javascript berikut di atas </head> atau </body>

<script src="http://yourjavascript.com/21194024561/tooltip-chord-by-fansublogger.js"/> 
<script src="http://yourjavascript.com/11643495266/chord-by-fansublogger.js"/>

Format Penulisan

<a href="#" class="showTip Em">Em</a>

Format penulisan diatas hanya untuk contoh.

Pengaturan

Jika kalian ingin memasang chord yang lain. Contoh: Am 
Kalian tinggal mengganti "showTip Em"  Menjadi "showTip Am" begitu juga dengan Chord yang lain.

Daftar Chord yang Bisa Dipakai

Am,A#m,Bm,Cm,C#m,Dm,D#m,Em,Fm,F#m,Gm,G#m,A,A#,B,C,C#,D,D#,E,F,F#,G,G#,A7,B7,C7,D7,E7,G7,AMaj7,BMaj7,CMaj,DMaj7,EMaj7,Amaj7,Bmaj7,Cmaj,Dmaj7,Emaj7,E5,F5,F#5,G5,G#5,A5,A#5,C#,C#5,D5,D#5,A/C#,D/F#,E/G#,G/B

Style Tooltip Lain

Dengan meengganti CSS pertama dengan CSS di bawah ini:

div#tipDiv {
    font-family: "courier new";
    padding: 4px;
    color: #FFF;
    font-size: 11px;
    line-height: 1.2;
    background-color: #222;
    border: 1px solid #BBB;
}

UPDATE!!!!!!!!
Karena ada yang request. Cara nambahin chord yang lain yang tidak ada di daftar diatas. Caranya seperti ini. Walaupun agak ribet karena kalian harus ngedit Scriptnya lagi.

Buka script ini http://yourjavascript.com/11643495266/chord-by-fansublogger.js
lalu save page tersebut dan buka dengan Notepad.
Lalu edit script tersebut. Format edit chord seperti di bawah ini.

Note: Jika kalian ingin menambahkan chord baru. Kalian harus menambahkan tanda koma ','. Di samping chord yang lain.

Format penulisan chord dalam script.

'A#5':'<div style="margin:5px;">
|---|---|---|---|---|xE<br/>
|---|---|---|---|-o-||A<br/>
|---|---|-o-|---|---||D<br/>
|---|---|-o-|---|---||G<br/>
|---|---|---|---|---|xB<br/>
|---|---|---|---|---|xe</div>

Keterangan yang bisa di edit

'A#5' = Itu chord yang mau kalian buat baru
'xE' = itu artinya senar tersebut tidak usah di petik
'|---|---|---|---|---|-o-|' = nah bagian ini yang harus kalian perhatikan. editlah sebagaimana chord yang ingin kalian tambahkan kedalam daftar chord.

Setelah kalian selesai meng-edit script tadi. Kalian Upload script nya. Bebas mau dimana saja. Kalau saya disini aja biar ga ribet http://www.yourjavascript.com

Semoga Artikel Cara Membuat Tooltip Chord ini bermanfaat. Sukses untuk para Blogger