Monday, December 19, 2016

Cara menambah lagu pada Blog via google sites

Cara menambah lagu pada Blog via google sites


Cara menambah lagu atau musik pada Blog melalui google sites. Daftar dulu untuk membuat akun di sites.google.com lalu upload lagu ke akun anda, kemudian lakukan pemasangan kode script ke blog. Cara lengkap bisa anda baca di artikel kali ini. Silakan ikuti cara menambah lagu atau musik pada Blog melalui sites.google.com berikut ini.

Menambah lagu atau musik pada Blog melalui sites.google.com mungkin lebih baik dan mudah. Jika anda menggunakan hosting lain seperti sound cloud atau lainnya, untuk akun free akan dibatasi dengan 100 download. Di sound cloud jika melebihi 100 maka lagu tidak bisa di download lagi tetapi kalau di google sites tidak. Anda perlu membuat akun terlebih dahulu untuk trik ini.

Langkah menambah lagu atau musik pada Blog melalui google sites silakan masuk ke https://sites.google.com/. Untuk proses pendaftaran dan upload lagu bisa anda baca dilink ini Cara Upload File rar, zip, jpg, mp3, video di site.google.com. Silakan ikuti langkah dan prosesnya.

Setelah berhasil upload, lalu copy kode link lagu tersebut. Dibawah ini contoh kode lagu yang saya upload.

https://sites.google.com/site/bencahalay/Ojo_Dumeh.mp3?attredirects=0&d=1

Selanjutnya anda perlu edit kodenya agar lagu tersebut bisa diputar di blog anda, atau bisa di download. Caranya yaitu dengan menghilangkan kode yang saya beri warna merah (kode ? ke belakang), sehingga tinggal seperti ini;

https://sites.google.com/site/bencahalay/Ojo_Dumeh.mp3

Simpan dulu kode tersebut di notepad, setelah itu kopi salah satu versi kode berikut. Yang harus anda lakukan adalah ganti kode warna merah, dengan kode lagu anda tadi (yang sudah dihapus belakangnya). Untuk kode warna biru ganti dengan kalimat yang anda inginkan.

- Kode versi pertama (autoplay)

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgaxhdGNAvnayIPOsWxKQgTYOdsbAQ1p7SOEJR3haPnJWASkESHUoKvid2sLSV6lTTbuNk6Y5dNcB7PVRhu8iobPdnEhPoXtG7Z0qniNHUeDjg_nR-mhpDFuHgFq_Aw-owqPyNmDLG0FV/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/AVvXsEh6GA1_33QdVCLxlyynzhFfD1MKUOJNe8Savqz1H_9VlMSx7CQh9HhFXh3BVekrgQuC1ikn3qRFwgENx2PaMp7IxIs2qVs68D5HW49Y9WSlgqHbTBUNr5VTaMm0v_C8UZfOSuuCUtZHYYzE/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/AVvXsEj_dm9I9GhDDkhSomNMkYtEurdPTqPV_Mkhxogyqs63YChwA-fAn0X1GnAhYKeZNbpzXApov-0QwXEGsUh_QmCoyP-0eVuH7BHxU3TPLWacs8GcAS9MB8WfcAhvp_7MIGYMuPBn3BSUcWBU/s20/Audio-File-icon.png title=Music/> Music MP3</div>
<div style=font-weight:bold; padding:10px 10px;>Dengerin musik asyik</div>
<audio controls autoplay>
<source src="https://sites.google.com/site/bencahalay/Ojo_Dumeh.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 versi kedua (tidak autoplay)

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgaxhdGNAvnayIPOsWxKQgTYOdsbAQ1p7SOEJR3haPnJWASkESHUoKvid2sLSV6lTTbuNk6Y5dNcB7PVRhu8iobPdnEhPoXtG7Z0qniNHUeDjg_nR-mhpDFuHgFq_Aw-owqPyNmDLG0FV/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/AVvXsEh6GA1_33QdVCLxlyynzhFfD1MKUOJNe8Savqz1H_9VlMSx7CQh9HhFXh3BVekrgQuC1ikn3qRFwgENx2PaMp7IxIs2qVs68D5HW49Y9WSlgqHbTBUNr5VTaMm0v_C8UZfOSuuCUtZHYYzE/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/AVvXsEj_dm9I9GhDDkhSomNMkYtEurdPTqPV_Mkhxogyqs63YChwA-fAn0X1GnAhYKeZNbpzXApov-0QwXEGsUh_QmCoyP-0eVuH7BHxU3TPLWacs8GcAS9MB8WfcAhvp_7MIGYMuPBn3BSUcWBU/s20/Audio-File-icon.png title=Music/> Music MP3</div>
<div style=font-weight:bold; padding:10px 10px;>Dengerin musik asyik</div>
<audio controls>
<source src="https://sites.google.com/site/bencahalay/Ojo_Dumeh.mp3" />
</source></audio>
<div style=padding-right:5px>Widget <a href=http://www.seocips.com target=_blank> by seocips.com</a></div>
</div></div>


- Keterangan: Dua kode versi diatas, untuk tampilan dilayar seperti ini.


- Jika ingin tampilan yang simple seperti gambar ini, gunakan kode dibawah.

 
<div style=font-weight:bold; color:#FF1493; font-size:17px; padding:10px 10px;>Dengerin Lagu Wonogiri...play aza!</div>
<audio controls>
<source src="https://sites.google.com/site/bencahalay/Ojo_Dumeh.mp3" />
</source></audio>
<div style=padding-right:5px>Widget <a href=http://www.seocips.com target=_blank> by seocips.com</a></div>

- Dan jika ingin lagu menjadi autoplay, ganti kode <audio controls> diatas menjadi <audio controls autoplay>

- Setelah membuat kode, lanjut ke langkah cara menambah lagu pada Blog:
  1. Login ke blog > dashboard > ke Tata Letak (Layout).
  2. Tambah gadget (add a gadget) > HTMl/Javascript
  3. Masukkan kodenya (boleh pakai judul/tidak) > Save

Semoga cukup jelas, sekian tips cara menambah lagu atau musik pada Blog melalui google sites.

Go to link Download