How to add a music player to Blogger in 2021

Hello Friends, Are you want to add Music Player Features for your visitors in Blogger Website? If you're answer is Yes! Then this article will be very benificial for you. Today we are going to create Stylish Music Player using HTML and CSS code.

{tocify} $title={Table of Contents}

add a music player to Blogger in 2021

Adding music player in Blogger website is very simple and very helpful to stay your audience longer on your webpages.


Advantages of Adding Music Player

Adding a music 🎼 player in website, with an autoplay feature, is one of the easiest and most efficient ways to get visitors into the right mood for reading your blog. Not many blog owners have realized that by using this simple and free technique they can actually influence their audience to stay longer on their webpage, which means you will have the great advantage of being unique.

How to add a Music Player in Blogger Website

Friends, It is very simple to add a Music player in Blogger. Just follow these simple steps below.....

Step 1. Adding CSS Codes

Search for the code ]]></b:skin> and paste the following CSS codes above it.

* { margin: 0; padding: 0; box-sizing: border-box; } .player { position: relative; width: 320px; background: #f1f3f4; box-shadow: 4px 3px 13px -4px rgba(0,0,0,0.4); } .player .imgBx { position: relative; width: 100%; height: 320px; } .player .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 12px; object-fit: cover; } .player audio { width: 100%; outline: none; }

Step 2. Adding HTML Codes

Now paste the below html codes where you want to add Music Player in your blog.

<!doctype html>

  <title>HTML CSS Audio Player</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <div class="player">
  <div class="imgBx">
   <img src="image_url_here">

   <audio controls>
    <source src="Audio_url_here" type="audio/mp3">



In this way you can add a Music Player in Blogger easily. your music player has been completely created and working properly.

I hope this tutorial for adding a simple music player to your blog has been useful for you. If there are questions or sections that are not understood, please write down questions through the comments.

For more updates on Blogger Templats, Blogging tutorial like this, please Follow this Blog


Debashis is a Young Entrepreneur Blogger having Good Technical skills, He also an Experienced Article Writer. He likes to Share Knowledge and Experience with People. facebook whatsapp telegram instagram

Post a Comment

To be published, comments must be reviewed by the administrator.

Previous Post Next Post