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}
Adding music player in Blogger website is very simple and very helpful to stay your audience longer on your webpages.
$ads={1}
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>
<html>
<head>
<title>HTML CSS Audio Player</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="player">
<div class="imgBx">
<img src="image_url_here">
</div>
<audio controls>
<source src="Audio_url_here" type="audio/mp3">
</audio>
</div>
</body>
</html>
$ads={2}
Conclusion
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