Home » Blogger » Cara Membuat Tampilan Player Mp3 di Postingan Blogger Keren

Cara Membuat Tampilan Player Mp3 di Postingan Blogger Keren

Posted by Anang_at Saturday, November 7, 2020 0 comments
Cara Membuat Tampilan Mp3 di Postingan Blogger Keren - di postingan kali saya akan membagikan tutorial membuat Mp3 di postingan blogger yang sangat keren atau jaman now. 

Tampilan Mp3 pada postingan ini nanti di sertai gambar yang kalian inginkan dengan cara mengati link gambarnya, warna tema background yang bisa kalian ubah juga. Pokoknya sangat bagus memeprcantik tampilan pada postingan.

Yang harus kita persiapkan sebelum membuat 
  • Membut postinga pada blogger
  • Kode tampilan Mp3 pada postingan
Hasil Gambar Mp3 di Posting Blogger

Cara Membuat Tampilan Player Mp3 di Postingan Blogger Keren berserta gambarnya, sebagi berikut
Buka Dasbor blogger lalu Buat Postingan Baru ubah menjadi Mode Tampilan HTML selanjutnya Paste Kode Mp3 yang sudah saya sediakan, lihat hasilnya.

Kode Mp3
<div id="musik">
  <div class="avatarmusic"><img src="https://i.pinimg.com/236x/e5/f9/b1/e5f9b11222ef36a681f7453a80064ee0.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.dropbox.com/s/gljtsf1yz8j4zd9/Happy%20Asmara%20-%20Ajari%20Aku%20Membencimu%20Hanyaswara%20%28Koplo%20Version%29.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 */
#musik {
  background:#069c88;  font-size: 14px;
  color: #FF69B4;
  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>
Keterangan
1. Ubah link gambar dengan kesukaan kalian
2. Ganti link Mp3 dari DropBox atau penyimpanan online lain

Panduan gambar Cara Membuat Tampilan Player Mp3 di Postingan Blogger Keren


Hasilnya

avatar
Melukis Senja

Budi Doremi

Dengan adanya tampilan Mp3 pada postingan blog ini pastinya penggujung akan terasa nyaman denga tampilanya. Semoga Cara Membuat Tampilan Player Mp3 di Postingan Blogger Keren bisa membatu mempercantik pada artikel kalian, Trima kasih.
Categories:

Related Post:



0 Comments:

Post a Comment