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

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

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

Em

Am7

A7M

D

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

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

Posted by Atep Tedi Rahayu

Tweet