Memasang Lagu Pilihan Sendiri di Blogger (Valid HTML5)

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Pernah tidak anda mengunjungi sebuah blog dan mendengarkan sebuah lagu dilantunkan secara otomatis ketika anda membuka blog tersebut? Nah dalam posting kali ini saya akan mencoba membagikan sebuah tips sederhana tentang cara memasang lagu pilihan sendiri di Blogger. Banyak orang menganggap bahwa metode memasang lagu pada blog merupakan hal yang dapat mengganggu tingkat SEO sebuah blog dan mengganggu pengunjung, namun bagi saya sendiri hal tersebut sah-sah saja, hanya saja yang mungkin perlu jadi bahan pertimbangan adalah hal tersebut akan sedikit menguras data internet pengunjung sebuah blog dan berpotensi memperlambat proses loading halaman blog.

Namun itu bukanlah masalah besar, bagi saya mendengarkan sebuah lagu sambil membaca artikel sebuah blog adalah hal yang cukup menyenangkan. Anda bisa mencobanya melalui halaman demo yang saya sediakan berikut ini.


Pada dasarnya disini kita hanya menggunakan tag HTML 5 yaitu tag audio. Lalu kemudian disisipkan di blog, baik itu langsung pada HTML posting blog maupun dengan memasang widgetnya di blog. Baiklah langsung saja kita mulai bagaimana cara memasangnya.
  1. Pertama anda harus mengerti dimana kode embed pemutar lagu tersebut akan dipasang, jika ingin memasangnya di widget blog, silakan buka dashboard blogger anda kemudian pilih Tata Letak lalu pilih Tambah Gadget.
  2. Tetapi jika ingin memasangnya langsung hanya di posting blog, silakan ganti mode penulisan posting dari Compose ke HTML kemudian tambahkan kodenya.

Kode Embed Lagu

Dasar

Silakan tambahkan kode berikut ditempat yang anda inginkan.
<audio controls>
  <source src="url-of-audio-file" />
  Jika anda tidak bisa melihat kontrol audio, browser anda tidak mendukung
</audio>

Hasilnya :


Autoplay

Untuk mengatur agar autoplay, cukup tambahkan kode autoplay dalam tag audio, sehingga jadinya seperti kode berikut ini.

<audio controls autoplay>
  <source src="url-of-audio-file" />
  Jika anda tidak bisa melihat kontrol audio, browser anda tidak mendukung
</audio>

Loop

Lalu untuk mengatur agar setelah lagunya habis maka akan diputar ulang (disebut looping) cukup tambahkan kode loop pada tag audio, sehingga kodenya menjadi seperti berikut ini.

<audio controls loop> 
  <source src="url-lagu-anda" /> 
  Jika anda tidak bisa melihat kontrol audio, browser anda tidak mendukung
</audio>

Selanjutnya silakan ganti url-lagu-anda dengan URL lagu yang ingin anda pasang pada kode tersebut, kode seperti apakah yang dipasang itu? Berikut akan saya jelaskan. Dan untuk mencoba melihat hasilnya sebelum dipasang di blog anda, silakan coba pasang kodenya pada halaman berikut.


Kode URL Lagu

Ada beberapa metode yang dapat kamu gunakan untuk mendapatkan URL lagu yang bisa kamu pasang di blog kamu. Seperti mengupload file lagu ke file hosting yang tidak menerapkan temporary link seperti, GitHub, Soundcloud, 4shared, Google Drive, Mediafire, dll, serta cara terakhir dengan menggunakan IDM. Berikut caranya.

Soundcloud

Silakan cari atau upload lagu pilihan anda di soundcloud. Setelah itu buka alamat lagu tersebut, silakan download lagu tersebut, maka anda akan mendapatkan URLnya. Jika muncul tombol download pada lagu tersebut silakan klik kanan lalu salin alamat tautan tersebut, itulah URLnya.

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

4shared

Jika menggunakan 4shared, hampir sama dengan sebelumnya silakan cari atau upload lagu yang ingin anda pasang. Setelah itu setelah proses download muncul anda boleh membatalkannya lalu klik kanan pada perintah untuk mengulang download, lalu salin alamat tautannya.

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Cara umum berlaku untuk semua

Untuk cara berikut ini bisa anda gunakan asal lagu tersebut bisa di download, caranya mudah, cukup download saja lagu tersebut. Jika menggunakan IDM anda bisa langsung mendapatkan URL lagunya.

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Jika tidak ada tombol download, silakan klik tombol download Popup IDM yang biasanya muncul.

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Jika tidak menggunakan IDM, cukup langsung download saja lagu tersebut, kemudian pada jendela download browser anda sudah bisa mendapatkan URL lagunya.

Cara Mudah Memasang Lagu Pilihan Sendiri di Blogger dengan HTML 5

Selanjutnya setelah mendapatkan URL dari lagu yang ingin dipasang silakan salin dan tempel URL tersebut pada kode embed yang ada diatas pada bagian url-lagu-anda. Anda juga bisa mencoba beberapa URL yang saya peroleh dari Playlist Wikipedia berikut ini

http://upload.wikimedia.org/wikipedia/commons/3/3c/01_-_Vivaldi_Spring_mvt_1_Allegro_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/4/4e/02_-_Vivaldi_Spring_mvt_2_Largo_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/f/fa/03_-_Vivaldi_Spring_mvt_3_Allegro_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/1/19/04_-_Vivaldi_Summer_mvt_1_Allegro_non_molto_-_John_Harrison_violin.ogg
http://upload.wikimedia.org/wikipedia/commons/6/63/Corelli-Trio_Sonata_11-1.ogg
http://upload.wikimedia.org/wikipedia/commons/a/a6/Corelli-Trio_Sonata_11-2.ogg
http://upload.wikimedia.org/wikipedia/commons/0/0a/Corelli-Trio_Sonata_11-3.ogg
http://upload.wikimedia.org/wikipedia/commons/d/d5/Martinu_-_Sonata_for_cello_and_piano_1-1.ogg
http://upload.wikimedia.org/wikipedia/commons/c/cf/Martinu_-_Sonata_for_cello_and_piano_1-2.ogg
http://upload.wikimedia.org/wikipedia/commons/3/36/Martinu_-_Sonata_for_cello_and_piano_1-3.ogg
http://upload.wikimedia.org/wikipedia/commons/0/00/Martinu-_Concerto_for_2_Pianos_and_Orchestra-1.ogg
http://upload.wikimedia.org/wikipedia/commons/9/94/Martinu-_Concerto_for_2_Pianos_and_Orchestra-2.ogg
http://upload.wikimedia.org/wikipedia/commons/e/e8/Martinu-_Concerto_for_2_Pianos_and_Orchestra-3.ogg
http://upload.wikimedia.org/wikipedia/commons/6/69/Bartok_-_Op.4b_-1.ogg
http://upload.wikimedia.org/wikipedia/commons/4/48/Bartok_-_Out-of-Doors_Suite2.ogg
http://upload.wikimedia.org/wikipedia/commons/c/c8/Debussy_-_Mazurka.ogg
http://upload.wikimedia.org/wikipedia/commons/e/e0/Monteverdi-cor_mio_mentre_vi_miro.ogg
http://upload.wikimedia.org/wikipedia/commons/b/b0/Monteverdi_-_cruda_amarilli.ogg
http://upload.wikimedia.org/wikipedia/commons/2/21/Festa-ogni_belta_madonna.ogg
http://upload.wikimedia.org/wikipedia/commons/2/2d/Festa_-_si_come_sete_bella.ogg
http://upload.wikimedia.org/wikipedia/commons/f/fe/Festa_-_una_donna.ogg
http://upload.wikimedia.org/wikipedia/commons/f/fc/Home_on_the_range.ogg

Mengatasi temporary link

Dengan menggunakan cara upload ke file hosting biasa, kemungkinan kamu akan mendapatkan temporary link, dimana pada suatu waktu link tersebut bisa tidak berfungsi lagi. Untuk mengatasi hal tersebut kamu bisa upload lagu ke GitHub dan mendapatkan linknya melalui link Download di repository.

Itulah beberapa langkah yang dapat anda coba untuk memasang lagu pilihan sendiri di blogger. Anda bisa mencoba membuat kreasi anda dengan kode-kode di atas dan semoga bisa bermanfaat. Anda dapat menyampaikan tanggapan anda melalui kotak komentar yang ada di bagian bawah halaman ini, sistem komentar blog ini menggunakan layanan Disqus namun anda tidak harus memiliki akun untuk dapat berkomentar, silakan gunakan komentar sebagai tamu (guest comment). Atau anda juga dapat membuat kiriman melalui halaman contact blog ini, jika tidak sedang sibuk admin akan segera menjawab kiriman anda. Terima kasih dan sampai jumpa.

Sumber :
http://blog.haekalfikri.net/2013/02/cara-mengambil-url-mp3-dari-4shared.html
http://www.bloggerbuster.com/2012/07/how-to-add-music-player-in-blogspot.html
https://en.wikipedia.org/wiki/Wikipedia:Sound/list/playlist

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel