Membuat Blog Kunci Gitar di Blogspot

Salah satu blog dengan niche musik yang memiliki pengunjung abadi adalah blog kunci (chord) gitar. Baik itu lagu Mancanegara maupun Indonesia, serta dari berbagai macam genre musik.

Untuk membuat blog kunci gitar lagu bisa menggunakan platform WordPress atau Blogger. Jika di wordpress kita tinggal mendownload plugin yang telah tersedia, misalnya saja Plugin ChordPress seperti yang saya gunakan pada blog ini.

 

Cara Membuat Blog Kunci Gitar dengan Blogger

Pada artikel ini saya akan berbagi cara membuat blog chord lagu menggunakan platform blogger/blogspot. Seperti yang kita ketahui untuk menambahkan “plugin” pada blogger, semua script ditambahkan secara manual didalam pengaturan HTML template. Memang agak sedikit ribet jika dibandingkan menggunakan WordPress.

Blog kalian ini nantinya akan menampilkan chord dari lirik lagu serta pilihan transpose nada dasar. Langsung saja ke cara pembuatannya, disini kita akan menambahkan kode CSS dan Java Script ke dalam template blog.

Kode CSS

Tempatkan kode CSS berikut diatas kode </head> pada template blog kalian.

<style>
span.c {
font-weight: bold;
color: #2159D6;
}

.transpose-keys {
margin: 10px 0;
overflow: auto;
font: normal 11px sans-serif;
}
.transpose-keys a {
display: block;
float: left;
width: 2.25em;
text-align: center;
margin: 0 .25em .25em 0;
color: #333;
background: #eee;
text-decoration: none;
padding: .4em 0;
border: solid 1px transparent;
outline: none;
}
.transpose-keys a.selected {
background: #2159D6;
color: #FFF;
}
</style>

 
Kode JS

Tempatkan kode Java Script diatas kode </body> pada template blog kalian. Unduh kode JS disini.
 
Posting Artikel

Untuk membuat sebuah artikel baru kalian harus menggunakan mode HTML View untuk mengetik lirik dan chord lagu, berikut ini contoh penulisannya.

<pre data-key="E">

E
Bintang kecil di langit yang biru
B
Amat banyak menghias angkasa
                  A
Aku ingin terbang dan menari
E        B           E
Jauh, tinggi ke tempat kau berada

</pre>

Demikianlah tutorial mengenai pembuatan blog dengan niche kunci/chord lirik lagu menggunakan platform blogger/blogspot. Contoh blog yang menggunakan script ini adalah otaktransparan.blogspot.com. Semoga artikel ini bermanfaat. Sekian.