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



Update berita dan informasi terbaru tentang dunia pendidikan serta download berbagai berkas file edukasi seperti download gratis aplikasi untuk pendidikan, media pembelajaran, perangkat pembelajaran, berkas administrasi sekolah, administrasi guru dan kepala sekolah, operator sekolah dan lain-lain. Selengkapnya Anda bisa lihat pada daftar dan kategori/label posting di bawah ini.





3 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