Thoha Firdaus Seorang yang suka mengajar, nulis di blog, buat video youtube, mencari hal yang baru

Memasang Audio Play di Website tanpa Plugin | Blogger dan WordPress

3 min read

Memasang audio play di website blog wordpress dan blogspot

Dalam membuat postingan artikel di dalam sebuah website, terkarang banyak komponen-komponen penting yang harus kita masukkan, salah satu diantaranya dalah audio. Audio ini bisa dalam bentuk suara orang, lagu, nyanyian, dan lain-lain. Namun sebagian orang harus repot-repot mengunggahnya langsung melalui blog, sehinga jika pengunjung mau mendengarkan audionya biasanya harus mendownload terlebih dahulu. Padahal yang kita harapkan adalah pengunjung bisa langsung mendengarkan audio tersebut tanpa harus repot-repot mendownloadnya dulu.

Pada artikel ini saya memberikan tutorial bagaimana cara agar kita bisa menampilkan audio play langsung melalui blog kita. Saya akan membagi tutorial ini menjadi dua bagian, yaitu menggunakan Blogger dan Menggunakan WordPress. Karena yang sudah kita ketahui dua penyedia blog ini sudah umum dipakai orang banyak orang.

Persyaratan

Ohya dalam tutorial ini kita sama sekali tidak memerlukan plugins untuk diinstal. Namun ada pernyaratan yang harus Anda punyai, yaitu

  1. Akun Google. Jadi asalkan Anda sudah mempunyai akun google atau akun email dari google (gmail), maka syarat pertama sudah terpenuhi. Saya tidak akan memberikan tutorial bagaimana cara membuat akun Google ya..
  2. Audio File. Jelas sudah harus Anda persiapkan file audionya ya, file bisa dalam bentuk .mp3

Tutorial

Membuat file audio bersifat publik

1) Pertama yang perlu Anda lakukan tentu saja masuk di akun google ya, Anda bisa mengunjungi google.com lalu pastikan di pojok kanan sudah ada gambar profil Anda. Jika masih tertulis Login atinya Anda belum melakukan login akun google.

Baca Juga:  Jasa Pembuatan Jurnal dan Prosiding Online

2) Selanjutnya silahkan masuk di akun Google Drive, Anda bisa langsung mengujungi link berikut: drive.google.com.

3) Silahkan upload file Audio Anda dengan menekan tombol Baru  yang terletak di sebelah kiri atas. Kemudian klik Upload File. Anda juga boleh membuat Folder dulu sebelum melakukan upload file, tujuannya agar file .mp3 tidak tercampu baur dengan file-file lainnya.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

4) Jika file audio sudah Anda upload selanjutnya yang harus kita lakukan adalah membuat file tersebut agar terlihat publik, atau dapat diakses oleh siapapun. Jika ini tidak kita lakukan maka file tersebut akan tidak terlihat di blog dan harus meminta persetujuan dulu untuk memplaynya. Caranya adalah silahkan kilk kanan pada bagian audio tersebut, kemudian klik Bagikan.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

5) Jika sudah akan muncul tampilan kurang lebih sepeti gambar di bawah ini, silahkan teman klik saja Lanjutkan, tombol tersebut ada di sebelah kanan bawah (tulisannya agak kecil)

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

6) Selanjutnya pada bagian akses yang semula statusnya pribadi, silahkan ubah dengan cara klik Ubah di sampingnya.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

7) Kemudian Anda klik di bagian paling atas bertuliskan Aktif – Publik di web. Jika sudah silahkan Anda klik simpan, kemudian klik Selesai.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

Mengambil kode/embed kode file audio

Sekarang file audio kita sudah bersifat publik. Selanjnya kita akan mengambil kode/embed, agar kodenya nanti bisa di pasang pada blog kita.

8) Caranya yang pertama silahkan klik kanan lagi pada file audio yang sudah kita buat publik tadi kemudian pilih Pratinjau. Atau ada juga bisa langsung double click pada file yang sudah kita buat publik tadi.

9) Pada pojok kanan atas, ada sebuah menu yang berbentuk titik tiga vertikal, kemudian klik Buka di jendela baru. Jika kurang jelas silahkan lihat gambar dibawah.

Baca Juga:  Cara Translate Video di Youtube Otomatis

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

10) Selanjutnya akan terbuka kembali tampilan yang mirip seperti tadi. Yang kita lakukan tadi adalah untuk mengaktifkan/melihat menu embed/smart item. Maka kemudian silahkan ulangi lagi dengan klik menu titik tiga di kanan atas, namun sekarang kita memilih menu Smartkan item… Silahkan lihat gambar di bawah ini untuk lebih jelasnya.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

11) Jika sudah maka kita akan melihat sebuah kode HTML. Kode HTML ini silahkan Anda copy semua, untuk nanti kita pasang di website/blog kita.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

Memasang kode HTML di blog

Melalui WordPress

1) Pertama silahkan Anda tambahkan post baru, atau bisa silahkan pilih dimana tempat Audio ini akan di tempatkan.

2) Jika sudah silahkan Anda beralih ke mode tesk HTML, caranya adalah klik tombol plus yang dilingkari, tombol ini juga bisanya bisa ditemui di pojok kiri atas ya, kurang lebihnya silahkan lihat gambar. Kemudian Anda search saja dengan menuliskan html, dan klik Costum HTML.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

Untuk Anda yang masih manggunakan mode penulisan Clasic, Anda bisa klik saja Teks di pojok kanan lembar penulisan. Letaknya seperti gambar di bawah ini.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

3) Jika sudah silahkan masukkan kode yang sudah kita copy tadi di langkah ke 11 di atas.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

Yang perlu Anda perhatikan dalam kode ini adalah bagian width dan height. Width adalah ukuran panjang dari tampilan audio, sedangkan untuk Height adalah tinggi dari tampilan audio. Dalam contoh di atas saya memilih panjangnya 600, dan tingginya 70, agar tampilan audio terlihat memanjang.

4) Silahkan Anda publish dan lihat hasilnya.

Melalui Blogspot/Blogger

Cara memasukkan kode HTML melalui blogger ini tidaklah terlalu sulit, dan lebih ringkas. Berikut ini langkah-langkahnya:

Baca Juga:  Daftar 10+ Aplikasi Pembelajaran Daring yang Disarankan Kemendikbud

1) Sama seperti pada cara WordPress di atas, silahkan pilih dimana Anda ingin menampilkan kode audio ini, misal ada di post baru.

2) Jika sudah silahkan pilih mode HTML, letak tombolnya ada di samping kiri ya. Untuk lebih jelasnya lihat gambar di bawah.

Memasang Audio Play di Website tanpa Plugin | Blogger dan Wordpress |

3) Setelah itu silahkan masukkan kodenya di situ. Sama seperti penjelasan di WordPress, Anda harus memperhatikan kode bagian width dan height. Silahkan sesuaikan ukurannya sesuai dengan keinginan. Penjelasan width dan height silahkan lihat bagian WordPress di atas.

4) Silahkan publikasikan pos nya, dan lihat hasilnya.

Kesimpulan

Itu tadi adalah langkah-langkah cara memasang Audio melalui Blog. Cara ini tentu saja akan ebih cepat jika Anda nanti sudah terbiasa. Dengan cara ini juga kita bisa menghemat storage blog kita, dan tidak ribet untuk menambahkan plugins. Untuk hasil yang sudah saya buat, silahkan Anda bisa mengunjungi halaman ini. Mudah-mudahan bermanfaat, jika ada yang perlu didiskusikan silahkan tulisa saja pendapat Anda melalui kolom komentar.

Thoha Firdaus Seorang yang suka mengajar, nulis di blog, buat video youtube, mencari hal yang baru

Tinggalkan Balasan