Cara Menambahkan Musik pada Blog

Kita mungkin pernah mengunjungi suatu web atau blog, ketika kita masuk maka akan ada musik atau mp3 yang diputar di web atau blog tersebut. Kadang kita tidak mengetahui bagaimana cara menghentikan musik itu apalagi jika musik itu kurang enak di dengar. Dan mungkin ada diantara anda para bloger pemula khususnya
yang ingin memasang pemutar musik mp3 pada blognya, tapi tidak tau caranya. disini saya akan membahas bagaimana cara memasang pemutar musik auto play (otomatis mp3 berputar) dan non auto play (tidak memutar secara otomatis)

langkah langkah

1. masuk ke google sites
2. pilih ceate yang berwarna merah

3. pilih template
4. kemudian masukkan nama blog / web anda, misal saya menuliskan disini dunia komputer dan game88
5. kemudian klik i'm not robot untuk memverifikasi, setelah semua selesai lalu klik create yang berwarna merah, hasilnya seperti ini, kita telah membuat akun google site

 kemudian klik ceate page yang gambarnya kertas bertanda plus di atas kanan
akan muncul tampilan seperti ini kemudian masukkan nama halaman ke box name your page, bebas mau apa saja misal saya disini menamai dengan nama " lagu pilihan "

setelah selesai maka klik create akan tampil gambar seperti ini

disana ada tulisan add files, itu untuk mengupload lagu atau musik mp3 yang akan kita jadikan musik pada blog kita, untuk mengupload klik add files, cari musik yang kita inginkan kemudian tunggu sampai penguploadan selesai . pada sebelah kanan lagu anda tanda panah ke bawah, klik kanan pada tanda panah itu kemudian pilih "copy link location ", paste kan di notepad dulu agar kita nanti tidak susah mencarinya jika nanti digunakan.
contoh link yang saya dapatkan

https://sites.google.com/site/duniakomputerdangame88/lagu-pilihan/edcoustic%20feat.%20inteam%20-%20kau%20ditakdirkan%20untukku.mp3?attredirects=0&d=1

hapus kode ?attredirects=0&d=1

maka akan menjadi seperti ini

https://sites.google.com/site/duniakomputerdangame88/lagu-pilihan/edcoustic%20feat.%20inteam%20-%20kau%20ditakdirkan%20untukku.mp3

kode untuk memasang lagu di blog, saya dapatkan kode ini dari www.seocips.com

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBGHVjyX4O_eQD8o0R0HTzYsMOEhZJf9djgJfZdqC6U1Z-jmOwAFOnqJ2ZnEX0QfhmLdqGq-USYB20UkNI_HLqxLhW4nolu5POwu1maujaj2KMJJcFqBKnzHf532P8ggz9cvsY_eaA6gw/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTDPEK7nV37CHy7y5ImW55mz1XrT_33FOiAiJ95ve0tWCDdYw50IGA_Tl1OOAOPvEi4LX39-7gV-yCpLiuYx82Cwrh_QtqYEnrP_YNJm7V0aLdWWfDegZbG5kVs0gdBK1pm7h-IPQA-OA/s130/loading....gif") no-repeat top right;
}
</style>
<div class='seocipsmusic'>
<div class='seocipsxpmusic'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;'><img alt='small rss seocips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2V5RpGve2PCkNMJAbdkr4r85RNqF4Bj1Q-v0sMq8n1ga6Y-tpCAukZQxH2tB-CrrNwjSMrgI6m4cPqSMi5T2mx6MAd6eu-KK9wdj13mgvZJTiCoebmdPDtY_dTaaAtCdzPThd-PnRMFhB/s20/Audio-File-icon.png' title='Music'/> Music MP3</div>
<div style='font-weight:bold; padding:10px 10px;'>Ayo bro dengerin music ini !!!</div>
<audio controls>
<source src="https://sites.google.com/site/socipshotmusic/musicdjseocips/dj%20seocips.com-%20Hotmusic3.mp3" />
</source></audio>
<div style='padding-right:5px'>Widget <a href='http://www.seocips.com' target='_blank'> by seocips.com</a></div>
</div></div>

kode yang berwarna biru silakan dengan kata kata yang anda inginkan
kode berwarna orange ganti dengan url musik kita yang tadi kita paste di notepad

kemudian masuk ke dasbor blog
pilih template, klik edit html
jika ingin memasang di header blog
pada menu cross columm javascript/html klik edit kemudian paste kan kode tersebut diatas menu blog.
jika ingin memasang sebagai widget, pilih tata letak kemudian pilih tambah gadget, pilih html/javascript, paste code diatas, kemudian pilih simpan.

Catatan :
- jika ingin menjadikan auto play maka pada kode " <audio controls> "ditambah autoplay menjadi   <audio controls autoplay>
- jika ingin menjadikan non auto play maka biarkan saja kodenya seperti ini " <audio controls> "
- jika ingin pemutar musik tanpa gambar maka hapus kode ini

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBGHVjyX4O_eQD8o0R0HTzYsMOEhZJf9djgJfZdqC6U1Z-jmOwAFOnqJ2ZnEX0QfhmLdqGq-USYB20UkNI_HLqxLhW4nolu5POwu1maujaj2KMJJcFqBKnzHf532P8ggz9cvsY_eaA6gw/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTDPEK7nV37CHy7y5ImW55mz1XrT_33FOiAiJ95ve0tWCDdYw50IGA_Tl1OOAOPvEi4LX39-7gV-yCpLiuYx82Cwrh_QtqYEnrP_YNJm7V0aLdWWfDegZbG5kVs0gdBK1pm7h-IPQA-OA/s130/loading....gif") no-repeat top right;
}


demikianlah cara memasang pemutar musik auto play dan non auto play,
semoga bermanfaat....!!!