Ok sobat pada saat ini seocips.com akan membagikan widget pemutar musik di blog ala seocips. Jadi seperti ini setelah jalan-jalan di google mencari artikel tentang pemutar music yang bagus tapi hingga berjam-jam belum juga mendapatkan hasil yang memuaskan.

Bermaksud ingin memutar lagu di blog dengan lagu pilihan sendiri tapi tidak ketemu artikel yang cocok akhirnya saya memutuskan mencoba membuat widget pemutar music sendiri dan jadilah widget pemutar music yang sederhana ini.

Ok berikut ini adalah penampakan widget ini :


Baiklah saya akan membagikan widget ini dalam dua versi yang tidak autoplay dan yang auto play. Ok dan berikut ini adalah widget musicnya dan cara memasangnya :

1. Widget Musik Tidak AutoPlay

1. Sediakan link music anda. Anda dapat mencoba menguploadnya di file host atau tempat upload file music lainya. atau silahkan upload file music anda ke Goolge site ( baca ; cara upload file music ke google site ) Intinya anda harus memiliki link music anda.
2. Login ke blogger.com
3. Pilih Tataletak, pilih gadget, pilih HTML/Javascript
4. Copy code script lagu sesuai keinginan anda yang saya sediakan dibawah ini ke kolom kosong tersebut.

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("http://2.bp.blogspot.com/-qw6rGjjCP8k/U4iI2EltVdI/AAAAAAAABrk/516Zq1J3I9c/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("http://1.bp.blogspot.com/-t53_0pN7CTs/U4iNEcvuPsI/AAAAAAAABr4/hgh0zklo0SI/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='http://3.bp.blogspot.com/-TZAs-N1Hews/U4h-QT36cyI/AAAAAAAABrE/kjyEfbjkdPA/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 berwarnah merah silahkan ganti sesuai keinginan dan Kode berwarna biru di atas ganti dengan link music milik sobat.

2. Widget Musik Otomatis ( Autoplay )

1. Sediakan link music anda. Anda dapat mencoba menguploadnya di file host atau tempat upload file music lainya. atau silahkan upload file music anda ke Goolge site ( baca ; cara upload file music ke google site ) Intinya anda harus memiliki link music anda.
2. Login ke blogger.com
3. Pilih Tataletak, pilih gadget, pilih HTML/Javascript
4. Copy code script lagu sesuai keinginan anda yang saya sediakan dibawah ini ke kolom kosong tersebut.

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("http://2.bp.blogspot.com/-qw6rGjjCP8k/U4iI2EltVdI/AAAAAAAABrk/516Zq1J3I9c/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("http://1.bp.blogspot.com/-t53_0pN7CTs/U4iNEcvuPsI/AAAAAAAABr4/hgh0zklo0SI/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='http://3.bp.blogspot.com/-TZAs-N1Hews/U4h-QT36cyI/AAAAAAAABrE/kjyEfbjkdPA/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 autoplay>
<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 berwarnah merah silahkan ganti sesuai keinginan dan Kode berwarna biru di atas ganti dengan link music milik sobat. OK sekian mengenai widget pemutar musik blog Blogger, semoga bermanfaat.
24 Komentar untuk "Widget Pemutar Musik Untuk Blog"

kalau lagunya lebih dari satu gimana gan ?

Mantap Gan Widgetnya, udh ane pasang di blog ane.. mampir ya di risandrooid.blogspot.com (lagi belajar bikin blog)

Bisa upload lagu lagi terus tambahkan ke widgetnya, atau bisa juga pakai widget yang berikutnya ( sesudah artikel ini )

upload lagu dimana bang?
di 4shared bisa bang?

Saya upload lagunya di Google Site bro.
http://www.seocips.com/2014/05/cara-upload-file-musik-ke-google-site.html

Info yang saya cari-cari selama ini...Mantab Gan!! (h) Makasih postingannya...n Slam kenal.

oh iya gan saya mau tanya nih mang ni gak ada swfnya ya... trs klw di tinggikan gambarnya ko playnya gak mau ikut ke bawah trs playnya gak bisa di panjangin ya gan.. mohon bantuannya gan secepatnya (k) download2satu.blogspot.com

Yang lainya bisa diubah sesukanya kecuali yang yang playnya [-(

info blog ini memang sangat membantu, khususnya saya sebagai pemula. tq gan.

thanks gan :d , ijin ganti background + warnanya ya ?

mantap gan., udah sya pasang di blog sya, ni sya lgi blajar ngoprek blog.,
mau tanya gan, ntu kan lgunya cuma 1 yah, kalo dibuat pilihan playlistnya gmna gan bisa kgak ?
thanks...

cara menambah lagu biar jadi satu playlist gimana gan ???

Terima kasih Mas.... sambilan browsing denger hiburan jadinya....

tambah pengetahuan lagi,,terima kasih gan,.. melototin web sambil dengerin music.. sukses selalu"?

Alhamdulillah tambah pengetahuan,.. maw nanya sob, bila ingin menambahkan lagu lebih dari satu atau playlist, gimana ya.. terima kasih"?