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
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/AVvXsEiFvxJUDYQWvYa5zjceLbbA2t_tYtrSj5dHofbKE33cckDoQFK1zoA7RLqu2kzlZJvrw7LhxfGNHFVXrqVPN6Z0NX_DHSrAhIrogwpYgboWLj9rvyQRBoMKSST_LqTTuDFs0jaMpHBVsVNq/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/AVvXsEhxcAoCVGNLNS8tdDObdo48FaHJLw6fVXiGAJyEgmqkONM-IMJSuPXaHeZgiquCucxuVmqPgs0Arzc8CSjbriCu-83ul658bfKPss-pgpMSTqvcE4pFezQr-65cwIkPigbJtvJnz_WLhciI/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/AVvXsEix5Ip3QCJ6jEmKT0xh-lCWNHSfsIKkYAvTxbPOmgK1qEh-0-JE2GfmPV_mTMZHou4H8CbDndqwc0entNhEZY2I8PmXP2qgqZJ5R8WOd85eP8X3V4s8RoXaGqFhFppeyqUG990iLKxFAE-g/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/AVvXsEiFvxJUDYQWvYa5zjceLbbA2t_tYtrSj5dHofbKE33cckDoQFK1zoA7RLqu2kzlZJvrw7LhxfGNHFVXrqVPN6Z0NX_DHSrAhIrogwpYgboWLj9rvyQRBoMKSST_LqTTuDFs0jaMpHBVsVNq/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/AVvXsEhxcAoCVGNLNS8tdDObdo48FaHJLw6fVXiGAJyEgmqkONM-IMJSuPXaHeZgiquCucxuVmqPgs0Arzc8CSjbriCu-83ul658bfKPss-pgpMSTqvcE4pFezQr-65cwIkPigbJtvJnz_WLhciI/s130/loading....gif") no-repeat top right;
}
demikianlah cara memasang pemutar musik auto play dan non auto play,
semoga bermanfaat....!!!
