Cara Membuat Blog di Blogspot untuk Chord Gitar

Hai, kali ini saya mengajak anda membahas tentang Cara Membuat Blog di Blogspot untuk Chord Gitar. Bagi anda yang mempunyai hobi bermain musik seperti bermain gitar mungkin sesekali pernah mencari lirik lagu favorit anda yang dilengkapi dengan kunci gitar atau chord gitar di internet. Mungkin dengan cara anda mengetikannya pada search engine Google seperti "kunci gitar lagu yang anda sukai" atau "chord gitar dan lirik lagu yang anda sukai".

Nah yang akan kita bahas kali ini adalah bagaimana cara membuat website tentang lirik lagu yang dilengkapi dengan gambar kunci atau chord gitar yang muncul secara otomatis ketika pointer kursor mouse anda sorotkan pada bagian lirik lagunya. Silahkan simak langkah-langkah mudah cara membuat blognya berikut ini:

Cara Membuat Blog di Blogspot untuk Kunci Chord Gitar dan Lirik Lagu

Membuat Blog Baru di Blogger

Cara Membuat Blog untuk Chord Gitar dan Lirik Lagu
Cara Membuat Blog untuk Chord Gitar dan Lirik Lagu
Untuk membuat blog baru, silahkan anda lihat langkah-langkahnya yang pernah dibahas di Cara Membuat Blog Gratis di Blogger dengan Template Responsive Keren. Dengan menggunakan template responsive, maka blog yang kita buat akan tetap support meskipun ditampilkan pada resolusi dan ukuran layar yang lebih kecil dari komputer misalnya smartphone, tablet, seperti ipad atau gadget android dan sebagainya. Ini memperluas peluang blog kita bisa dibaca oleh siapa saja dan dimana saja dengan perangkat mobile.

Mempersiapkan Gambar Kunci Gitar atau Chord Gitar Lengkap

Bagi anda yang suka bermain gitar dan memainkan lagu dengan gitar pasti tahu bahwa ada banyak kunci gitar atau chord gitar yang sering digunakan dalam mengiringi atau memainkan lagu. Untuk melengkapi gambar kunci gitar atau chord gitar yang akan kita pergunakan pada blog, kita bisa mengambilnya dari gambar-gambar chord gitar di internet ataupun buku gitar yang anda miliki. Saya lebih memilih mencarinya di internet karena dengan pencarian Google Image saja sudah sangat banyak gambar chord yang bisa kita download kemudian kita crop dengan ukuran yang akan kita sesuaikan nanti pada blognya. Bisa juga kita ambil gambar chordnya dari software Guitar Pro seperti yang saya coba di tutorial ini.

Gambar Chord Gitar dari Software Guitar Pro
Gambar Chord Gitar dari Software Guitar Pro

Untuk tambahan saja supaya anda lebih mudah dan praktis dalam mempersiapkan gambar chordnya, chord gitar itu bisa kita susun mulai dari nama chord gitar yang pokok yaitu C, C#,D, D#,E, F, F#, G, G#, A, Bb, B. Selanjutnya anda bisa mengembangkannya lagi pada setiap nama kunci gitarnya misalnya pada chord gitar C dengan rincian: C, C7, C5, C6, C7M, C7sus2, C7sus4, Caug, Cdim, Cm6, Cm7, Cm7M, Cm, Csus2, Csus4, Cadd9.

Selain itu anda juga harus menyiapkan beberapa gambar kunci gitar yang disebut dengan slash chord atau sering kali kita melihatnya sebagai kunci gitar yang penulisannya dilengkapi garis miring, misalnya D/F#, G/B , A/C#, C/E dan mungkin ada chord gitar lain yang dipakai pada lagu-lagu tertentu tidak tercantum di sini. Karena setelah saya lihat di software Guitar Pro pun saya tidak menemukan daftar slash chord. Jadi silahkan anda lengkapi secara khusus supaya blog lirik lagu dan chord gitarnya terkesan lebih komplit dan profesional.

Ini adalah contoh sebagian gambar chord gitar yang akan kita gunakan nanti sebagai gambar kunci gitar otomatis yang muncul pada bagian lirik lagu yang kita sorot dengan kursor mouse.

 
G
G
 
Em
Em
 
Am7


 
A7M
 
D
D
 
Bm7
Bm7


Setelah menyiapkan gambar chord gitar secara lengkap, simpanlah file gambarnya dalam sebuah folder dengan memberi nama pada setiap gambar sesuai dengan chordnya. Ini untuk memudahkan anda mencari file gambar chord ketika akan melakukan  insert picture ke postingan blog.

Gambar Chord Gitar Lengkap untuk Blog
Gambar Chord Gitar Lengkap untuk Blog

Mengedit Template Blog untuk Menampilkan Gambar Chord Otomatis pada Posting Lirik Lagu

Untuk menampilkan gambar chord gitar secara otomatis pada posting lirik lagu, kita bisa mengakalinya dengan menambahkan kode di dalam template blog yang sudah kita buat. Kode ini sebenarnya hanyalah sebuah perintah untuk menampilkan gambar pada teks posting blog yang disebut dengan Image Tooltip. Jadi rahasianya adalah bagaimana kita membuat image tooltip yang memanggil gambar chord gitar ketika pointer kursor mouse diarahkan pada teks lirik lagu.

Sederhana dan mudah bukan?. Baiklah kita mulai lakukan edit template blognya. Maksud edit template di sini adalah menambahkan saja kode script image tooltipnya ke dalam template blog.

Copy kode script teks dibawah ini, dan paste di atas kode <head> di dalam template blog.


Untuk memanggil gambar chord dengan Image Tooltip, kita harus membuat teks nama chord dengan menggunakan kode script di bawah ini:


Mohon maaf jika bahasanya kurang bisa dipahami, saya agak kesulitan mencari kata-kata yang pas :). Tapi untuk lebih jelasnya saya buatkan saja video tutorialnya mulai dari memasukan gambar chordnya, cara memasukan kode image tooltipnya, cara memanggil gambar chord pada postingan dengan contoh lirik lagunya. Mudah-mudahan tutorialnya bisa lebih mudah untuk dipahami. Silahkan lihat video di bawah ini:



Video Tutorial Cara Membuat Blog di Blogspot untuk Chord Gitar 


Jadi dapat kita rangkum dari video tutorial di atas yaitu:
  1. Membuat halaman atau page untuk kumpulan gambar chord gitar lengkap.
  2. Menambahkan kode atau script image tooltip di dalam template bloge dengan cara masuk ke menu edit html template.
  3. Memanggil gambar chord gitar pada posting lirik lagu dengan kode script image tooltip.

Demikian tutorial Cara Membuat Blog di Blogspot untuk Chord Gitar yang bisa saya sampaikan, mudah-mudahan bisa bermanfaat bagi anda yang memang hobi bermain musik gitar bahkan mudah-mudahan bisa menginspirasi anda juga untuk membuat sebuah personal blog tentang lagu-lagu atau pengalaman bermain gitar anda. Salam Netter :)

Terkait dengan pembahasan Cara Membuat Blog atau Website dengan Blogspot, kami rekomendasikan juga kepada Anda untuk melihat beberapa tautan di bawah ini.
  1. Penerbit Andi - Blockspot Hacking, Modifikasi Blogspot Dan Aksesoriesnya/200083842 Baca Selengkapnya
  2. Buku KOMPUTER / TEKNOLOGI / CODEIGNITER / VISUAL BASIC / WEEBLY / MICROSOFT WORD / MICROSOFT EXCEL / SQL SERVER / JARINGAN WIRELESS / WOW COMMERCE / JAVA / BLOGSPOT / BLOGGER / VISUAL STUDIO / ANDROID Baca Selengkapnya
  3. Buku KOMPUTER / TEKNOLOGI / PEMOGRAMAN / MICROSOFT WORD / MICROSOFT EXCEL / MICROSOFT POWER POINT / MICROSOFT ACCESS / WORDPRESS / BLOGSPOT / VISUAL BASIC / MYSQL / AUTOCAD Baca Selengkapnya
  4. Template Blogger Biolink Builder Multifungsi | Template Blogspot Baca Selengkapnya
  5. Blogger Pro : Cara Buat Blog Gratis dengan Blogspot untuk Jualan Baca Selengkapnya
  6. Template Blogger Biolink Simpel Mudah digunakan | Template Blogspot Baca Selengkapnya
  7. Blogger Template cocok untuk sekolah atau madrasah | Template Blogspot Baca Selengkapnya
  8. BUAT TOKO ONLINE TERMUDAH DAN TERMURAH DENGAN BLOGSPOT Baca Selengkapnya
  9. Blogger Template Landingpage Support Blog | Template Blogspot Baca Selengkapnya
  10. Trik Lengkap Mempercantik Blogger Blogspot - Buku Oleh Lea Willsen Baca Selengkapnya
  11. Ori Buku Meningkatkan Finalsial Dosen,Guru,dam Mahasiswa dengan Blogspot & Google Adsense Baca Selengkapnya
  12. Blogger Template Mirip IG Keren untuk Blog | Template Blogspot Baca Selengkapnya
  13. Blogger Template Untuk Arsitek atau Konstruksi | Template Blogspot Baca Selengkapnya
  14. Template Landingpage Builder Versi Premium Blogger / Blogspot Baca Selengkapnya
  15. Template Landingpage Support Blog | Template Blogspot Baca Selengkapnya
  16. Template Biolink Builder Multifungsi Blogger / Blogspot Baca Selengkapnya
  17. Original buku 50 trik modifikasi blogger-blogspot Baca Selengkapnya
  18. BUKU KOMPUTER / ORIGINAL / TEKNOLOGI / TEKNOLOGI INFORMASI / PEMOGRAMAN / MEMBUAT WEBSITE / BLOGSPOT / DATABASE DESIGN #7F Baca Selengkapnya
  19. BLOGGER BLOGSPOT LANDINGPAGE BUILDER - TEMPLATE WEBSITE DESIGN GRATIS - BONUS BIOLINK PELUANG CUAN PASTI CUAN GRATIS BONUS Baca Selengkapnya
  20. Blogspot Landing Page Builder - Template Design LP Blogspot Blogger + BONUS Baca Selengkapnya
  21. Blogspot Landing Page Builder - 1 Tema Untuk Semua Jenis LP Baca Selengkapnya
  22. BIOLINKSPOT Template BioLink Blogger Blogspot Baca Selengkapnya
  23. AUTO BLOGSPOT Tool AutoPosting di Blogger Baca Selengkapnya
  24. Template blogger Arsitek atau Konstruksi | Template Blogspot Baca Selengkapnya
  25. Template Online Shop Blogspot Terbaik Tanpa Cart Baca Selengkapnya
  26. BLOGGER BLOGSPOT LANDINGPAGE BUILDER - TEMPLATE WEBSITE DESIGN GRATIS - BONUS BIOLINK PROMO!!! Baca Selengkapnya
  27. BTB Bundle Blogspot Theme Premium Baca Selengkapnya
  28. Buku Trik Lengkap Mempercantik Blogger - Blogspot Baca Selengkapnya
  29. AUTO POSTING BLOG GRATISAN BLOGGING BLOGGER BLOGSPOT PROMO!!! Baca Selengkapnya
  30. Buku Murah Original - Buku Jago Blogspot Baca Selengkapnya
  31. original buku jago blogspot-pedoman cepat jadi blogger Baca Selengkapnya
  32. Blogger Blogspot - Lea Willsen Baca Selengkapnya
  33. TEMPLATE TEMA BLOGGER BLOGSPOT DETIK KOMPAS HIPWEE JALANTIKUS TRIBUN DLL FULL BONUS PELUANG CUAN DIGITAL FREE BONUS PASTI CUAN Baca Selengkapnya
  34. Template Blog Median UI Terbaru | Piranti Lunak Template Blog | Blogger dan Blogspot Baca Selengkapnya
  35. membangun website toko online dengan template blogspot premium situs profesional Baca Selengkapnya
  36. Buku Sukses Berdagang Di Facebook Dan Blogspot Baca Selengkapnya
  37. BUNDEL THEME BTB Bundle Blogspot Theme Premium Bundel Theme Baca Selengkapnya
  38. BTB - BUNDEL THEMA TEMPLATE BLOGSPOT FOR BUSINESS Baca Selengkapnya
  39. Blogger Blogspot untuk Pemula Kreatif Baca Selengkapnya
  40. Template Online Shop Blogspot Terbaik Tanpa Cart Baca Selengkapnya
  41. AUTO POSTING BLOG GRATISAN - BLOGGING BLOGGER BLOGSPOT - DIGITAL MARKETING ONLINE PELUANG USAHA Baca Selengkapnya
  42. Original - 1 Jam! Membuat Blog dengan Blogspot - Blogger Pemula Baca Selengkapnya
  43. BTB BUNDLE TEMPLATE BLOGSPOT LANDINGPAGE PLUS BONUS - Baca Selengkapnya
  44. E-Course BUNDLE THEME BLOGSPOT Baca Selengkapnya
  45. BLOGGER BLOGSPOT LANDINGPAGE BUILDER Baca Selengkapnya
  46. Buku original: Website canggih dan praktis dengan blogspot Baca Selengkapnya
  47. Step by Step BLOGSPOT. Baca Selengkapnya
  48. Auto Posting Blogspot Baca Selengkapnya
  49. Buku Trik Lengkap Mempercantik Blogger-Blogspot plus CD * Lea Willsen Baca Selengkapnya
  50. Buku BLOGSPOT. Baca Selengkapnya
  51. Blogspot Landing Page Builder Baca Selengkapnya
  52. step by step toko online dengan blogspot dan wordpress Baca Selengkapnya
  53. Step by Step Toko Online dengan Blogspot dan Wordpress (ORI) Baca Selengkapnya
  54. Buku Obral Murah - Buku Gaul Bareng Blogspot... yul Baca Selengkapnya
  55. BIOLINKSPOT Template BioLink Blogger Blogspot Baca Selengkapnya
  56. BUKU MENJADI KAYA DAN TERKENAL DENGAN BLOGSPOT Baca Selengkapnya
  57. Template blogger / blogspot Portofolio Support Pricing Table dan Form WA Baca Selengkapnya
  58. 1 Jam Membuat Blog dengan Blogspot Baca Selengkapnya
  59. Buku Blogspot Hacking : Modifikasi Blogspot dan Aksesorisnya - Original Baca Selengkapnya
  60. Meningkatkan Finansial Dosen Guru dan Mahasiswa dengan Blogspot & Google Adsense Baca Selengkapnya
  61. 76 Trik Rahasia Blogspot. Menguak Rahasia Blog Paling Beken di Dunia, Membuat Kerja Anda Lebih Cepat, Efektif dan Efisien. Baca Selengkapnya
  62. Buku SUKSES BERDAGANG di Facebook dan Blogspot Baca Selengkapnya
  63. BUKU BLOGSPOT UNTUK CORPORATE Baca Selengkapnya
  64. 1 Jam Membuat Blog dengan Blogspot . vrf3/c Baca Selengkapnya
  65. Trik Lengkap Mempercantik Blogger-Blogspot + Dvd Baca Selengkapnya
  66. Buku Tips Dahsyat Mengubah Tampilan Blogspot Baca Selengkapnya
  67. Blogger Blogspot untuk Pemula Kreatif BONUS CD Elexmedia Komputindo Baca Selengkapnya
  68. website canggih dan praktis dengan BLOGSPOT Baca Selengkapnya
  69. Website canggih dan praktis dengan Blogspot Baca Selengkapnya
  70. buku tokoonline dengan gerai bisnis blogspot Baca Selengkapnya
  71. Buku blogger blogspot Baca Selengkapnya
  72. BUKU ORIGINAL - MEMBUAT BLOG DENGAN BLOGSPOT Baca Selengkapnya
  73. ORI BLOGSPOT TOP SECRET Baca Selengkapnya
  74. BTB BUNDLE TEMPLATE BLOGSPOT LANDINGPAGE PLUS BONUS - Baca Selengkapnya
  75. Buku Jago Blogspot Baca Selengkapnya
  76. BUNDLE SCRIPT AUTO GENERATE CONTENT WEBSITE WORDPRESS BLOGSPOT MOVIE MUSIK ARTIKEL LOWONGAN KERJA WALLPAPERS DIGITAL MARKETING ONLINE PELUANG CUAN GRATIS BONUS PREMIUM Baca Selengkapnya
  77. Website canggih dan praktis dengan blogspot Baca Selengkapnya
  78. Blogspot - Teguh Wahyono Baca Selengkapnya
  79. Solusi Hemat Jasa Pembuatan Website Company Profile (Profil Usaha UMKM), Penawaran Produk/Jasa, Tipe Landing Page Blogspot/Blogger Marketing Pemasaran 4.0 5.0 Baca Selengkapnya
  80. BLOGGER BLOGSPOT LANDINGPAGE BUILDER - TEMPLATE WEBSITE DESIGN GRATIS - BONUS BIOLINK - TOOL BISNIS Baca Selengkapnya
  81. [PROMO] Registrasi Domain ID Web Hosting Murah 1 Tahun cPanel TLD COM/CO/NET Blogger Blogspot Wordpress GoogleSites Email Bisnis Custom Kustom Website Baca Selengkapnya
  82. Paket 240 Tema Blogger Template Premium Blogspot Theme Baca Selengkapnya
  83. Blogspot Builder Website Landing Page Lifetime Baca Selengkapnya
  84. LinkMagz Blogspot LinkMagz WordPress Theme Original Themeforest Resmi Terbaru Baca Selengkapnya
  85. Paket 500+ Template Premium Blogger Blogspot Blog Baca Selengkapnya
  86. BLOGGER BLOGSPOT LANDINGPAGE BUILDER - TEMPLATE WEBSITE DESIGN GRATIS - BONUS BIOLINK - TOOL BISNIS Baca Selengkapnya
  87. FirstLight - A Responsive Template Blogger Blogspot First Light Premium Baca Selengkapnya
  88. Website Blogspot Landing Page Builder Lifetime Baca Selengkapnya
  89. Koleksi 240 Premium Tema Blogger Template Blogspot Theme Baca Selengkapnya
  90. Bundle 500+ Template Blogger Premium Blogspot Blog Baca Selengkapnya
  91. JKTJO Template BlogSpot Mirip Marketplace Orange Sebelah Baca Selengkapnya
  92. Blogspot Landing Page Template - Satu Tema Untuk Semua Jenis LP jkt Baca Selengkapnya
  93. 3 Desain Template siijo - Template Toko Online Blogspot mirip sidia Baca Selengkapnya
  94. Buat Website Murah Gak Pake Mahal Domain COM ID Web Hosting cPanel Email Bisnis 1 Tahun TLD Wordpress Blogger Blogspot Google Sites Landing Page Sekolah Online Shop Blog. Baca Selengkapnya
  95. BUKA BLOG Template Toko Online Mirip Marketplace Sebelah Blogspot Baca Selengkapnya
  96. LANDIGGER V.1 – LANDING PAGE TEMPLATE BLOGSPOT Baca Selengkapnya
  97. Toko WA Blogger Template v1.6 - TokoWhatsApp blogspot Baca Selengkapnya

7 Responses to "Cara Membuat Blog di Blogspot untuk Chord Gitar"

  1. untuk penerapan ke wordpress gimana bos...

    ReplyDelete
  2. Itu Biar lebih simple "kode Pemanggil gambarnya" dimasukin kedalam template semua, bagaimana hasilnya..

    apakah bisa muncul gambarnya?
    apakah mempengaruhi kecepatan loading blog?
    atau malah tidak muncul?

    Mohon Bantuannya

    ReplyDelete
  3. ijin coba gan kebetulan saya punya blog Chord Gitar , makasih triknya ...

    ReplyDelete
  4. Kalau saya sendiri untuk blog kord gitar malas pakai gambar agak ribet gitu. Mendingan pakai pre saja. Blog : chordrf.com

    ReplyDelete