Creating Tooltip For Guitar Cords On Blog
Friday, April 20, 2018
How to create tooltip for a guitar key (Guitar Cords) inside a blog?
If you have a music blog like a song lyrics and guitar cords blog, you can use this tutorial to display the tooltip guitar key in cords of the song lyrics in your music blog.
Steps to Make Guitar Cords Tooltip
First, put the following css above </b:skin>
/* Tool tip Guitar Cord */
.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:80px;-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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZeQasg8x6QSjR3WGW739JLZQ6CErQBieaGh2DEzBCfRGgvvxLNDKk5rJdk5gkx4Z_aQ3icqq4-MyEHwvoQj_-8pcq3nho15E_nDB9SaoVmCs2E70aeThBrPr8evcZlUlLQN5J366Cdi6/s1600/A.png)}
.tbi-B{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWvYWoKscN8Nw-sSwXdHD8Tq2L0APwpav0My-GkG-M5CdkTb7Z8gsP-MNaclpDrjpwBGvZYZR1656584IuS8H6WUorFGqxm0V43bOP4Q40U3f1dLVLzMqBQjZWRU5kn1VCqb0tRDo6nBg/s1600/B.png)}
.tbi-C{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyG6plWaJBmU7zq4amA_kG3TCyQ1jPOhsHNGuTOozxEoFrR-gzs5cidle2bDMOafyhmstPCJjzTFfuYQ49C4zpg03v1mxlElKcf0VtX8MKO65gn8wx4f8YYuqe7uKlgrFMnKrzqSBzSCV_/s1600/C.png)}
.tbi-D{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3B9CxwLYXxzxZDZhlBbe0bn760KHy-emwL2qV_bsalKp6-a8U349ftU_5bxBQdiTKfHaFKh4MrWN8msCnEa1bKxVrh_Q5HSnLvvJwjPkzGIPVrVAVC99UXxsx5c9tYM2-pnA1Dq0OSyed/s1600/D.png)}
.tbi-E{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxm9-0WKpEpfGuX919oBnWbCzu43ddCTmQ48AnNcb5xHCmL8p6gH-mPIKxihnC3rAS-25I8uC6-tfWPjFxhE6k8C4VZ3Bsiyt-4bAIrD4AOkOMjX5gWtFvwYW6GVozrBsVzklPCKl6zeW/s1600/E.png)}
.tbi-F{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicF62410eeiQUd3Z3QU4oVIpHZX07So1eFV-ZXwmcFVRfeGiGyeJti3HFKRRdoUYrntN_syvm1mY0j_0Oauxjg6yhv1OhUrir1Z5NrBcrP0Ti7FTpLNa_4so8BuGeR4hyphenhyphenSn4hp6_yLQyPd/s1600/F.png)}
.tbi-G{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBSdrXi0ymm-AaIbtt8Ip77KKdkXwZ_DW_x7LJtotW4DhEB5nyUya3M_4cOzjZf0dvaUegAp-QsYF1qmvRLCkrzPje8-auUUvkbYa1vyqM5EqkLBX0z8pFXtjrEPsb-WO3czt9_xp_p9P/s1600/G.png)}
.tbi-Bm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSN1BtxgFY0k0k2BRRJ5AkAbXxX2J5yC0-v7DDO8aPKvXHwZZcGWjj24UVGiGqV68HavYzxPjqo5pWXlykfNupwpSP-X6z5YfyTqKFqLl4S1kB6Ky91qgyWNzVdD6WlGF3Pz0EJmCNU4_/s1600/Bm.png)}
.tbi-Cm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YTepAL0ODpfOv1C69HDOU083cWTlYhGN0NTB5E4FJ27AJqo4d7kbbtKUr4eh6xfqFvJNpHCxLlvKO3WMdQgVJ8VAls6zqdT6gIxPSdaIzcOIBLMMcULvns-y-2eKEp2bCqB1EpKpKh8C/s1600/Cm.png)}
.tbi-Dm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBEm_DDW8E_SaMQomJKFvmjvMR0LdA0lzeZ7MaFxj4C1WgOikeXDNwkj-bmD-6ad83YuvefdqD1MWQbMfbnS7DfqR8TYUKxtDqs3abr3KztaWGZoCDHbHh2QChVkBf4iKxXRwsBLgZsHd/s1600/Dm.png)}
.tbi-Em{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv58M0G5j6ToVL3nkQwbuQYKfyiYcXj_lVhRalHHd8KCXjY3i4htVKzCT_M-Xv4vkhwjh69UvBRIINXGxX9k_PFKIn05LS-HFGhaWQ-Pmvz5ccjzcjYchet0WeuEfKDOfou5TfkgwKQFja/s1600/Em.png)}
.tbi-Fm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQb8kw03KKbvxFKNUyRbJNc2uWf3cR6h4kI4JaoHJKXI4OBSYgYt1r7dTGYG8FZPRfZqcWRERHZG8JEHD-pgrQeukPG70XG9hP-KtSvWd0LAW8Xip03YG9jaZksq30YEfe9aKORxaCo77H/s1600/Fm.png)}
.tbi-Gm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_0qfq8PkS0oqwVEpV5-L1fjGmDfcmUZm3YrjZrsc-B5I8G5Jn7CSOpQWO58SqYVyYs_xV8lIB-vBvGEZWtxw4zSQ51bg3n4DA8vx5-7xeD91HYqo7TL3BjYQM68T_A6MNsA1wQZ0mbP8/s1600/Gm.png)}
.tbi-Am{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXiOqze_bZLs7HJzIlfsCtza3yoa1Nbu1bclJxSbdsZYBkOsjpbDnVhvoqr52ghYPTGUSGwvJr9no4X-6H1MC8uJ-0WkIUDXqgBHOYMh72530fZ1wFZx7EzYD7p_3mc2ZmxO0LFiMWH6G/s1600/Am.png)}
.tbi-Bb{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUVyBBFBMNWnRUZuFu1xxic3ewIVERHTvqv5yNyiIJe9wOW2BrtumhbsPDwtrWVT8nRYsSVThIgdbNXcK74pR8pf-uTHRmoqUlgiO0GXFIUvgQjfN741z5Jngff-OgS8zWPE4Jldbbug/s1600/Bb.PNG)}
.tbi-Ckres{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpIUqAO6pHUduR1hviaNrgABlRWH3DIGnEXH8AH4VEZMyASivj96OYK9jDVUdroedKmWnUTAF3yuhJXZWLrVOlwY-HdgIovd5-kFdAl9SyE1HdEclgMahymzlduwJSJN9EtzE1snzdhLU/s1600/C%2523.PNG)}
.tbi-Dkres{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLoUSv6oStItSYDZJjqW8D2bzR_DQZDNukngoOhZYNEqqVtrXm0cffaaz9Th52jCjbBa8_jWhkQjTMSpYAXTiqS0o7yHR3lfz3_RHcAsvF6J_H4lweeW9TIjRRkAhcyTKnOTmVr77eUI/s1600/D%2523.PNG)}
.tbi-Gkres{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrBpwZAJBDbjhxFFAoyDLCracKufOWkFH6j7o43TC99CSFpSdaX1zpVL2VDNMgSUA1vrPVKySprFn8ptABuHAlbCl7KJD4GUWFSyHAGF5xG9ti27sYDFITABG8mH_Ays9OknZKfmCGtX4/s1600/G%2523.PNG)}
.tbi-Akres{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK0qnYXLuXMD1Jsnhs_0-GAMYZ9nHYHt_gpvgnUQyrUPQWtGsvG6hzFdbAno-stPFieenT2rw1EAAca6hYTYWXiTJKaJuDXwE2iDSvAo24B93wlwZCp7fwjxibn7tGJYaqn3Jeg9f5G54/s1600/A%2523.PNG)}
.tbi-Ckresm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJxC3VfgRLRysnRr0jS7O6o8unXRv405hXJABhIPZs8fLrefVTHqqSskgacyynrEQp3t7vNqznGp8kQZ16YRZusQmS-0mb6ITROQHgOVBZGqkhSTJ1OjD4Z6EIG4FUK2YFhVy8L5P1Hw/s1600/C%2523m.PNG)}
.tbi-Gkresm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1g43TADEwv07Vjs0A_gRnApKjnifw0g2fEkKwvGJFafgxXYpAFNnSI591hn42ga6NxiwC0at-FQnM8Udd0ALcn-DplD7qTjStC1ggR7WlUMaqde1p6zHED1Mti2GV1MfJoH9AOzqobc/s1600/G%2523m.PNG)}
.tbi-Akresm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-66r4bl5m1CDtvWSlmqzgYWU2ACyrfxd3OY-WI1Gi3kdkfVk4i8p38E3L0pHxKsyByyMZNei0NPkCyrPPxXQhyphenhyphenU0p7cl7obREiUHUnADID7L2QewJZiNzK-hHY_YNgN-ejTtUYkfiTVc/s1600/A%2523m.PNG)}
.tbi-A7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimiO8gDFAWGLbPhwtcaMep_7jCfpqwuzcRd7oFXvolDtCZd5T-3ltLmph_KhljeOTdiTV916MO84Sl0zpyyfT7OyCX_QwBbrsCPuWztTWrZxZzElU8pyHtmxzgmMAYL6IIufVapHgQ26Lo/s1600/A7.png)}
.tbi-B7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiiC8KSXKUjjm6mhZkpR3jBooCwLZXYVXlEIeJcwXgbhpx6J5lkY9VxrFMjDOmfRWL-XwdqWik2xdvCEt7QMhSIpsBcrIF4iXCf_xct1c7qm4VoJE6HgMocAfvzl-74o3ESIUgz_cfThRq/s1600/B7.png)}
.tbi-C7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WB2d_o8R13nsjAmNdjrVyGzfCbOxRYpmo_CHjAyR728YOY7EsxRrZpY8B5b4y0S8UyrRScilv8L7TSnDPE87NjI5xQuZdhJhz1pJ0bznQ9G7Kpl_nFXpbXXnbj29AVNQdyk2uQ9AKkCG/s1600/C7.png)}
.tbi-D7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVLRhOd3k1mUeDP3eN2pGIg_fSg7P_ndpqJRi6WCIOnZALwkok0IdkclZMS2ICkYr9LSPc_LCPKbhLk0pEeJ9jf5DJO9TVZxYpXwmY3876UAqW5Rm0bZUZtcakVQMKygAbAA_M8Ivb7tW/s1600/D7.png)}
.tbi-E7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrMAyNGlxBCZAhZ_khRI5XnnXeCoa5NM2e5ilN6p_ayjWWweBR7OsUfYOxCKfUJwBW9hbMVoKWzlXTu6jvO22k0koREa1iHYUDsP_z_ad60Yll9iKxgOTYpfFBEMv04B1I5eIluoeWPes/s1600/E7.png)}
.tbi-F7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wWDopdZLbUELc3dZomziUzVuBDIGJM8DlL0925j7yIpM9AkEA_E4olSTsciqpAImst6XjS-vot8pHfw2Se0-yX17I5VTS26rDjweMUrvbbcNYInsJ7RJS7zzjF-EfFQZsgVIKOwe4c_0/s1600/F7.png)}
.tbi-G7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SxQrSWSYKU7McCHow5Op29QUvjqJj0TxibLolO2GvSWtZUL1uZddiO81wujdYqYHxkeRHAFOaFeLywliuPvLG8kxiTVOMhRXm4n_30hoJB4t83_U-rZf5vALZ7h6Jl5LGUTxHhzoMo_0/s1600/G7.png)}
.tbi-Dm7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Y5QFRxvRU_tGA8yPTEWDQAxp7-olxhV0CVrZwY7s1l9ujxyem1-ZSc__Lypb6J7Mp4_r_l_tVxj3Zy7cnwvR9wcJJEkfsD95qoPOl9lNcAwbK01jV8joarxx1fj62kTTmG7PmsoSUEs/s1600/Dm7.PNG)}
.tbi-Bbm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycb7Zuxksv6lFuAcqw09VJc7Zyl8AYqEa9jSQ1VP45e3yx-vRMZtjc5K9G1cWxXAt5XFr41NPLn3QrPLcZSULsdoR7iuS8oR-BeNxtDHrbnf3qPLwHToHOH-9jQ4zEI6gs5DGNgFmCGM/s1600/Bbm.PNG)}
.tbi-Dkresm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbIL5zl16xMoqSGn8kdxAdQss-a6XZobMvntlNDKxABb-pUjCms4EOkQCFL1nK9ti9eVKMFwWcrYCCiYryo2XZvoAoI_Pi-cNi5Bw9s34Mz6uxNTcIQ3MzcL5ZAoSOKQC3WzEJJaj2WFs/s1600/D%2523m.PNG)}
.tbi-Fkres{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIMEXI8v8nLHtSmp6XWQmhwW9ZgtorxHJrJW1uH5HyvhBQdSpCNKKlfetqPpadnWzf6OcapMWxgMA7ddAgPEbkYupn5olOFzp40cUi1-ZwUagiqOIMehprDUc4drKd8IktDuS8I4oO2gg/s1600/F%2523.PNG)}
.tbi-Fkresm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyy0ncqq4mJUpB5hUoT8cJmij9JDlnyg7m63SvdiI3hS6m8XR1QRlwi80LS-hRQFErt6KTGT9Gr_AtqRG9EHhyphenhyphenZyJUsoI9hiS_nb0sc61fiX7_kEsDVziTnotuSYmUPduzBF85SROpuOvw/s1600/F%2523m.png)}
.tbi-Abm{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGQ6ia1ut6eki6yZvDBwGHUzWRqja7smG4TwhsAXAB2Y7attku63yPMNm-mQ-M3J1QdlOfpbY_AOtRC9ok1omAgy3BjfWlwfVGz5pEZ4LaRvTMvkBxVm1wbxvviMXhK9lCH_DGn93OBj6w/s1600/Abm.png)}
.tbi-Cmaj7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqGWfZhLqE4CwsTlmaslT8ZLPOa27ToBFoCqG8Fjmm7Dena46HUhwQ362rqFwRVWiEyOO8W8UGhhD2dfXBuwFLBYnAZHMBAoLaTezTITmlmixrkb1bIDJH7BxWM_abmkAMwrg_EYUHqaf/s1600/Cmaj7.PNG)}
.tbi-Am7{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwArC6RjBqR1WteiemENHUE66SYdhD4Wazge2Pl90m0thYpnlUhLB7yuk-9EXwDCy4TD-qZYZ4jvmyyvFYokOyFf6h-vm6hrQ5MLjP4257-8Kj-Xfqr07iA2LpaNlUnoLGqmQ4tKhzhLM/s1600/Am7.PNG)}
.tbi-Ab{border:1px solid #2BB0D7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMGENCcaf0sswrnQj6h8ExO66TRnpu5qh37AvFWQfVBg4OgM4aUG-E_Sg2MfKc99jlerb1tF-qpXGK3reAjDqMV6lzfOpUY0w3mSFrJmim81DCjJraDUvtrOoV3aSniikF_LOGrht_41Y/s1600/Ab.PNG)}
Second, use the css tooltip guitar chords code below to replace the guitar cords in your blog. More details see the following example:
Reff
Dear God-Avenged Seven Fold
G D Em
Dear God the only thing
D
I ask of you
C
is to hold her when
G
I'm not around,
D
when I'm much too far away
G D Em
We all need.. that person
D
who can be true to you
C
But I left her when
G
I.. found her
Dear God the only thing
D
I ask of you
C
is to hold her when
G
I'm not around,
D
when I'm much too far away
G D Em
We all need.. that person
D
who can be true to you
C
But I left her when
G
I.. found her
Because we use bootstrap put the following css under the <head> code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
To call the code in the first step above, use the code below according to the guitar cord
<a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZeQasg8x6QSjR3WGW739JLZQ6CErQBieaGh2DEzBCfRGgvvxLNDKk5rJdk5gkx4Z_aQ3icqq4-MyEHwvoQj_-8pcq3nho15E_nDB9SaoVmCs2E70aeThBrPr8evcZlUlLQN5J366Cdi6/s1600/A.png">A<span class="custom tbi-A"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimiO8gDFAWGLbPhwtcaMep_7jCfpqwuzcRd7oFXvolDtCZd5T-3ltLmph_KhljeOTdiTV916MO84Sl0zpyyfT7OyCX_QwBbrsCPuWztTWrZxZzElU8pyHtmxzgmMAYL6IIufVapHgQ26Lo/s1600/A7.png">A7<span class="custom tbi-A7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXiOqze_bZLs7HJzIlfsCtza3yoa1Nbu1bclJxSbdsZYBkOsjpbDnVhvoqr52ghYPTGUSGwvJr9no4X-6H1MC8uJ-0WkIUDXqgBHOYMh72530fZ1wFZx7EzYD7p_3mc2ZmxO0LFiMWH6G/s1600/Am.png">Am<span class="custom tbi-Am"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWvYWoKscN8Nw-sSwXdHD8Tq2L0APwpav0My-GkG-M5CdkTb7Z8gsP-MNaclpDrjpwBGvZYZR1656584IuS8H6WUorFGqxm0V43bOP4Q40U3f1dLVLzMqBQjZWRU5kn1VCqb0tRDo6nBg/s1600/B.png">B<span class="custom tbi-B"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiiC8KSXKUjjm6mhZkpR3jBooCwLZXYVXlEIeJcwXgbhpx6J5lkY9VxrFMjDOmfRWL-XwdqWik2xdvCEt7QMhSIpsBcrIF4iXCf_xct1c7qm4VoJE6HgMocAfvzl-74o3ESIUgz_cfThRq/s1600/B7.png">B7<span class="custom tbi-B7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSN1BtxgFY0k0k2BRRJ5AkAbXxX2J5yC0-v7DDO8aPKvXHwZZcGWjj24UVGiGqV68HavYzxPjqo5pWXlykfNupwpSP-X6z5YfyTqKFqLl4S1kB6Ky91qgyWNzVdD6WlGF3Pz0EJmCNU4_/s1600/Bm.png">Bm<span class="custom tbi-Bm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WB2d_o8R13nsjAmNdjrVyGzfCbOxRYpmo_CHjAyR728YOY7EsxRrZpY8B5b4y0S8UyrRScilv8L7TSnDPE87NjI5xQuZdhJhz1pJ0bznQ9G7Kpl_nFXpbXXnbj29AVNQdyk2uQ9AKkCG/s1600/C7.png">C7<span class="custom tbi-C7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyG6plWaJBmU7zq4amA_kG3TCyQ1jPOhsHNGuTOozxEoFrR-gzs5cidle2bDMOafyhmstPCJjzTFfuYQ49C4zpg03v1mxlElKcf0VtX8MKO65gn8wx4f8YYuqe7uKlgrFMnKrzqSBzSCV_/s1600/C.png">C<span class="custom tbi-C"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YTepAL0ODpfOv1C69HDOU083cWTlYhGN0NTB5E4FJ27AJqo4d7kbbtKUr4eh6xfqFvJNpHCxLlvKO3WMdQgVJ8VAls6zqdT6gIxPSdaIzcOIBLMMcULvns-y-2eKEp2bCqB1EpKpKh8C/s1600/Cm.png">Cm<span class="custom tbi-Cm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3B9CxwLYXxzxZDZhlBbe0bn760KHy-emwL2qV_bsalKp6-a8U349ftU_5bxBQdiTKfHaFKh4MrWN8msCnEa1bKxVrh_Q5HSnLvvJwjPkzGIPVrVAVC99UXxsx5c9tYM2-pnA1Dq0OSyed/s1600/D.png">D<span class="custom tbi-D"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVLRhOd3k1mUeDP3eN2pGIg_fSg7P_ndpqJRi6WCIOnZALwkok0IdkclZMS2ICkYr9LSPc_LCPKbhLk0pEeJ9jf5DJO9TVZxYpXwmY3876UAqW5Rm0bZUZtcakVQMKygAbAA_M8Ivb7tW/s1600/D7.png">D7<span class="custom tbi-D7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBEm_DDW8E_SaMQomJKFvmjvMR0LdA0lzeZ7MaFxj4C1WgOikeXDNwkj-bmD-6ad83YuvefdqD1MWQbMfbnS7DfqR8TYUKxtDqs3abr3KztaWGZoCDHbHh2QChVkBf4iKxXRwsBLgZsHd/s1600/Dm.png">Dm<span class="custom tbi-Dm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxm9-0WKpEpfGuX919oBnWbCzu43ddCTmQ48AnNcb5xHCmL8p6gH-mPIKxihnC3rAS-25I8uC6-tfWPjFxhE6k8C4VZ3Bsiyt-4bAIrD4AOkOMjX5gWtFvwYW6GVozrBsVzklPCKl6zeW/s1600/E.png">E<span class="custom tbi-E"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrMAyNGlxBCZAhZ_khRI5XnnXeCoa5NM2e5ilN6p_ayjWWweBR7OsUfYOxCKfUJwBW9hbMVoKWzlXTu6jvO22k0koREa1iHYUDsP_z_ad60Yll9iKxgOTYpfFBEMv04B1I5eIluoeWPes/s1600/E7.png">E7<span class="custom tbi-E7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv58M0G5j6ToVL3nkQwbuQYKfyiYcXj_lVhRalHHd8KCXjY3i4htVKzCT_M-Xv4vkhwjh69UvBRIINXGxX9k_PFKIn05LS-HFGhaWQ-Pmvz5ccjzcjYchet0WeuEfKDOfou5TfkgwKQFja/s1600/Em.png">Em<span class="custom tbi-Em"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicF62410eeiQUd3Z3QU4oVIpHZX07So1eFV-ZXwmcFVRfeGiGyeJti3HFKRRdoUYrntN_syvm1mY0j_0Oauxjg6yhv1OhUrir1Z5NrBcrP0Ti7FTpLNa_4so8BuGeR4hyphenhyphenSn4hp6_yLQyPd/s1600/F.png">F<span class="custom tbi-F"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wWDopdZLbUELc3dZomziUzVuBDIGJM8DlL0925j7yIpM9AkEA_E4olSTsciqpAImst6XjS-vot8pHfw2Se0-yX17I5VTS26rDjweMUrvbbcNYInsJ7RJS7zzjF-EfFQZsgVIKOwe4c_0/s1600/F7.png">F7<span class="custom tbi-F7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQb8kw03KKbvxFKNUyRbJNc2uWf3cR6h4kI4JaoHJKXI4OBSYgYt1r7dTGYG8FZPRfZqcWRERHZG8JEHD-pgrQeukPG70XG9hP-KtSvWd0LAW8Xip03YG9jaZksq30YEfe9aKORxaCo77H/s1600/Fm.png">Fm<span class="custom tbi-Fm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBSdrXi0ymm-AaIbtt8Ip77KKdkXwZ_DW_x7LJtotW4DhEB5nyUya3M_4cOzjZf0dvaUegAp-QsYF1qmvRLCkrzPje8-auUUvkbYa1vyqM5EqkLBX0z8pFXtjrEPsb-WO3czt9_xp_p9P/s1600/G.png">G<span class="custom tbi-G"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SxQrSWSYKU7McCHow5Op29QUvjqJj0TxibLolO2GvSWtZUL1uZddiO81wujdYqYHxkeRHAFOaFeLywliuPvLG8kxiTVOMhRXm4n_30hoJB4t83_U-rZf5vALZ7h6Jl5LGUTxHhzoMo_0/s1600/G7.png">G7<span class="custom tbi-G7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_0qfq8PkS0oqwVEpV5-L1fjGmDfcmUZm3YrjZrsc-B5I8G5Jn7CSOpQWO58SqYVyYs_xV8lIB-vBvGEZWtxw4zSQ51bg3n4DA8vx5-7xeD91HYqo7TL3BjYQM68T_A6MNsA1wQZ0mbP8/s1600/Gm.png">Gm<span class="custom tbi-Gm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBT4Qh0Xlnh0dDJboWegits7C04sf42pKUP5NyW01M42vfj7haeEKD-6jlLjzNpYGmK4ihpjRIZ9MVcyuIjHAsd_zhd6hkgMrQEZXChx30fKlu5Lgc0pbQIrzWAUGUj8YBvaEXNJ0-t_H/s1600/F%2523.jpg">F#<span class="custom tbi-Fkres"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVl6pAHeXA8d0HFd5l4fyVlnX2fyhVXEPr_9zdqy91ttBn76Vr7pe_Pbd8XOL4MP3xq4eSsGIYcxuSXm-zmgWwzK0vYmoBfwyP-sQxeG2VJXaLSn5KSK5kgvlZvFdL7-YjxMThhG_q7hau/s1600/C%2523m.png">C#m<span class="custom tbi-Ckresm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsTSzx11x4XneusD58VThbcxaT98U1Y9TEUu7zfeos8bf5oObYHZZBI460XRLnb7PCOIDtfp3OWLIIF_ikRw0F25g-MP8e8Nc5dEExdRIgLrRsyjowNge0za49SR8L253xXPKtJxJY0-p/s1600/A%2523m.png">A#m<span class="custom tbi-Akresm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVf08Cb3EIevf3hxQyh4sPvHwBi6eQeUCuf0Vauz_DKp2n1ukKsTtuuuohEjCrPeoQPzZh2HQx7wimJZHkshr_CXdEWplIDXj99t9trmIeIVS4JWF28jpT3yDg8cTNCZP4XDCDG7NMSko/s1600/G%2523.jpg">G#<span class="custom tbi-Gkres"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjy-dcuJoiVEQt9CjaZVEnOStzskng4Y_F7q5fEqOFlEhxg29TsCwkR8GFhT7QZvN47o_aRwTu7Mn12O80dG_5xVpALNeDMtbCMcHweHGkn6AwMm4zXQRlkHGAkLCZAG3Vr6WwcjT0OT4o/s1600/G%2523m.png">G#m<span class="custom tbi-Gkresm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysvgAHi9MaRGOkD3qPbsu8uLTObWF1X5jxcNu-zDKXAsS3lw8bXHkCGn1a_CuUHAOHooGIVTjxFDpz0-rCye_xZ72ngAY9Lp742FzRHg_lTC8nLMfrPE0z8_bOUsVtXtnM5TgpIjsNzsY/s1600/A%2523.jpg">A#<span class="custom tbi-Akres"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCTap7SJgSzOjDHfJc5MGE5Ln7kkweBBmFaEx38zTyGIyn1GggnbXizUbjM0jsIXm2bIxjlUzT5seWuYn0oSB8SGgBBLKOspt6wbswF2SrEKXV6MqL972wi8H3wsK4HNfgAueh2AUFGmEf/s1600/D%2523.jpg">D#<span class="custom tbi-Dkres"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKPlLHqXNmVXavdz5RkjL9TqVJ-Qi_30B2WvBo2z_OS7uSqK2DAWla13scANosnKHtFMt0QFa_K3LnHBF-aJ3azueBAoYlI047g9RvffG4ciupGRkjgAoP52dqe4jaKeX3bd33MX46Y0Or/s1600/Dm7.jpg">Dm7<span class="custom tbi-Dm7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsedct9JtcN_JldS1M1q0n73th4UjedGK0sOtcwaUuw3ybQNEfdDVkRPeUoJ40sApA6UROp_u-BFJx_umUTaoMuWZ0J1lostH6K28cMVg_59u8STrrMQfDrLBzqTSPMRvZaXnfzcVQ_JLk/s1600/Bb.png">Bb<span class="custom tbi-Bb"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg13IGraquaAw43_tEJpiX9lQIXDT2xV2sogneQKq68FYVCs_gsNjPSbQZJVwSKq9pZc9FaqTiEO8xIUi3yTQzaKX7B-SdI7SuX-y25UKrFAZ5YmkTokvE6xmGguqmKgw-6z-7qyWOo5qCI/s1600/C%2523.jpg">C#<span class="custom tbi-Ckres"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgILmZwXpQeMqDePhmIuME3bwDU9oZx7v9p1WuHAGAMJpu9VAwou1GE9crteETzQpEBN0kty4m_ZFBnyQruGupBksjR6VOPMsrf4Sz4HxU6MbQC_YKzPUTWE4of07wjD0SWwJF3LqdBjB4x/s1600/Bbm-.jpg">Bbm<span class="custom tbi-Bbm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFqBTnuK-0VI5bCw-7ChFyU9LdMPZKJWMwI0extcPQZi8WBgihF_-j5YmrOvpWyaJ4QjBAitDsL1kXI5J4Gz3AgU6hBInL69u0SWd5T6zMwrF7jEc3O657lmTbTDZKBo_KnqwmhWb-2lhx/s1600/D%2523m.png">D#m<span class="custom tbi-Dkresm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyy0ncqq4mJUpB5hUoT8cJmij9JDlnyg7m63SvdiI3hS6m8XR1QRlwi80LS-hRQFErt6KTGT9Gr_AtqRG9EHhyphenhyphenZyJUsoI9hiS_nb0sc61fiX7_kEsDVziTnotuSYmUPduzBF85SROpuOvw/s1600/F%2523m.png">F#m<span class="custom tbi-Fkresm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGQ6ia1ut6eki6yZvDBwGHUzWRqja7smG4TwhsAXAB2Y7attku63yPMNm-mQ-M3J1QdlOfpbY_AOtRC9ok1omAgy3BjfWlwfVGz5pEZ4LaRvTMvkBxVm1wbxvviMXhK9lCH_DGn93OBj6w/s1600/Abm.png">Abm<span class="custom tbi-Abm"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTr9Xmt5aqakIXIIRg5i_no1vrgoP6JIxoquZtsvOomPC3WYvv5aPqsd0HoB938r9pokYdIxcK-nRtP1PR8oC_ukVbQr1qcEcAnWYzXp9zSWTKDxHNeqIv7Ut9h7V1IBD2C8RkOICNzEXE/s1600/Cmaj7.PNG">Cmaj7<span class="custom tbi-Cmaj7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwX07tRd6Qn-VOvM0X4SODnJyBQiOE74vWrtxDxxiXpBTPOdPtEtI6M0Q-XUObtiZqqt_3k2MYM3f4z0Asts52oiYD5_V5Xu-4Hx9tuDgz03nY-jvf6m-9UTKTILkjlGRrNe5spfHhLvd2/s1600/Am7.PNG">Am7<span class="custom tbi-Am7"></span></a> <a class="tbi-tooltip" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGChqjEDhfp13KBOiqKNvXPC7s1v3AkGWcH3H_3XHSL6a31v5q329q09bq1V3JQP34uABmrsTpThVkbOE5ZqCBuHnHrHI27BRjepaxEaHYcv8fvUNy6QwAX4RcVk15KEGzhf7mNQxK3nYL/s1600/Ab.PNG">Ab<span class="custom tbi-Ab"></span></a>