Widget Musik memutar lagu di blog dengan lagu pilihan sendiri

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 :

memutar lagu di blog dengan lagu pilihan sendiri

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.

No comments:

Post a Comment