Saya risikonya merampungkan bikin widget music player yang sanggup memutar lagu MP3 atau audio milik anda sendiri. Dan untuk anda anggota grup musik yang aktif menjalankan google blogger, ini yaitu widget yang mesti anda pasang dengan maksudnya untuk mengiklankan grup musik anda atau sekedar untuk bikin design blog anda lebih keren.
Setelah sebelumnya sukses bikin skin perihal video player keren youtube, sekarang saya menamakan ini dengan nama Widget Music Player Keren. Proses pengerjaan memakai CSS3 dengan tag audio valid HTML5 sehingga akan menjadikannya terlihat bersih, cepat dan lebih kreatif. Sementara untuk cara kerjanya akan memutar audio mp3 yang saya host di dropbox. Kenapa tidak di host di Google Drive? karna GDrive tidak support untuk host audio sementara di dropbox anda sanggup mengunggahnya sebesar apapun ukuran dari file mp3 tersebut tapi jangan melampaui ukuran 10GB per file. Untuk demonya silahkan putar audio dibawah ini.
Welcome in Teach How Blog
Smexi Asisten
Persiapan :
1) Upload lagu Mp3 atau file Audio anda ke folder publik dropbox. Jika anda belum mengenali cara host audio di dropbox silahkan baca bimbingan ini.
Cara praktis hosting file CSS, JS dan Audio di Dropbox
2) Salin arahan dibawah ini lalu paste kedalam acara notepad
3) Ubah semua konten elemen dan atribut didalam arahan tersebut mirip di bawah ini.
https://lh3.googleusercontent.com/avatarmusik.jpg dengan gambar atau foto anda.
Welcome in Teach How Blog dengan judul dari audio anda.
Smexi Asisten dengan nama penyanyi.
https://dl.dropboxusercontent.com/s/yd8pns8g1/Thblog.mp3 dengan link audio yang dihost di dropbox pada no 1.
Jika sudah tamat salin kembali semua arahan yang sudah dirubah
Langkah-langkah :
1) Masuk ke dashboard akun blogger anda lalu klik Tata Letak
2) Klik Tambah Gadget lalu klik Add HTML/JavaScript
3) Masukkan semua arahan kedalam widget tersebut lalu klik Simpan
Widget tersebut akan menjalankan buffering pada dikala pembaca berkunjung tapi tidak menjadikannya autoplay. Sekarang coba anda lihat halaman blog lalu putar dan nikmati musik dari lagu audio MP3 anda sendiri yang sudah dimasukkan dengan memperlihatkan foto anda yang menjadikannya terlihat lebih kreatif. Kudos & Happy Coding!
Sumber https://henponterbaru.blogspot.com
Setelah sebelumnya sukses bikin skin perihal video player keren youtube, sekarang saya menamakan ini dengan nama Widget Music Player Keren. Proses pengerjaan memakai CSS3 dengan tag audio valid HTML5 sehingga akan menjadikannya terlihat bersih, cepat dan lebih kreatif. Sementara untuk cara kerjanya akan memutar audio mp3 yang saya host di dropbox. Kenapa tidak di host di Google Drive? karna GDrive tidak support untuk host audio sementara di dropbox anda sanggup mengunggahnya sebesar apapun ukuran dari file mp3 tersebut tapi jangan melampaui ukuran 10GB per file. Untuk demonya silahkan putar audio dibawah ini.
DEMO
Smexi Asisten
Persiapan :
1) Upload lagu Mp3 atau file Audio anda ke folder publik dropbox. Jika anda belum mengenali cara host audio di dropbox silahkan baca bimbingan ini.
Cara praktis hosting file CSS, JS dan Audio di Dropbox
2) Salin arahan dibawah ini lalu paste kedalam acara notepad
Klik ganda untuk menyalin
<div id="musik"> <div class="avatarmusic"><img src="https://lh3.googleusercontent.com/avatarmusik.jpg" alt="avatar" /></div> <span class="judul">Welcome in Teach How Blog</span><br /><br/><span class="penyanyi">Smexi Asisten</span> <audio controls preload id="audio"> <source src="https://dl.dropboxusercontent.com/s/yd8pns8g17tiu32/Thblog.mp3" type="audio/mpeg" > Maaf browser anda tidak mendukung audio, widget keren ini tidak akan bermain. </audio></div> <style type="text/css" > /* Music Player Keren by Teach How Blog © 2013 */ #musik { background:#069c88; font-size: 14px; color: #EFEFEF; text-align: left; font-family: "Arial", sans-serif; height: auto; border-radius: 8px; overflow: hidden; width: auto; max-width:300px; padding: 10px; } .avatarmusic img{ background-size: 95px;border:none !important; float: left; height: 95px;margin-bottom:10px; width: 95px;border-radius:10%;padding-right:4px; } .avatar img:hover{opacity:.5; } .judul{color:#f4f3f3; font-size:1.2em; font-weight:bolder; } .penyanyi{ color:#f4f3f3; font-size:1em; } </style> 3) Ubah semua konten elemen dan atribut didalam arahan tersebut mirip di bawah ini.
https://lh3.googleusercontent.com/avatarmusik.jpg dengan gambar atau foto anda.
Welcome in Teach How Blog dengan judul dari audio anda.
Smexi Asisten dengan nama penyanyi.
https://dl.dropboxusercontent.com/s/yd8pns8g1/Thblog.mp3 dengan link audio yang dihost di dropbox pada no 1.
Jika sudah tamat salin kembali semua arahan yang sudah dirubah
Langkah-langkah :
1) Masuk ke dashboard akun blogger anda lalu klik Tata Letak
2) Klik Tambah Gadget lalu klik Add HTML/JavaScript
3) Masukkan semua arahan kedalam widget tersebut lalu klik Simpan
Widget tersebut akan menjalankan buffering pada dikala pembaca berkunjung tapi tidak menjadikannya autoplay. Sekarang coba anda lihat halaman blog lalu putar dan nikmati musik dari lagu audio MP3 anda sendiri yang sudah dimasukkan dengan memperlihatkan foto anda yang menjadikannya terlihat lebih kreatif. Kudos & Happy Coding!
