আপনি কি একজন ব্লগার? আপনি কি আপনার ব্লগের দর্শকদের জন্য আপনার ব্লগে একটি Music Player যোগ করতে চান? আপনার উত্তর যদি ❝হ্যাঁ❞ হয়, তবে আজকের পোস্টটি আপনার জন্য। আজকে আপনাদের শিখাবো কিভাবে HTML এবং CSS ব্যবহার করে আপনার ব্লগে একটি সুন্দর Music Player যুক্ত করবেন। তো চলুন শুরু করা যাক।
ব্লগার ওয়েবসাইটে Music Player যুক্ত করা খুব সহজ এবং এই Music Player টি আপনার ব্লগে শ্রোতাদের দীর্ঘক্ষণ ধরে রাখতে খুবই সহায়ক।
Advantages of Adding Music Player
ভিজিটরদের আপনার ব্লগে দীর্ঘক্ষণ রাখার জন্য এবং ব্লগ পড়ার সময় ভিজিটরদের একটু আনন্দ দেওয়ার জন্য আপনি আপনার ব্লগ সাইটে অডিও Music সহ একটি আকর্ষনীয় Music Player যুক্ত করতে পারেন। অনেক ব্লগাররা এটা বুঝতে পারেনা যে, এই সহজ ও ফ্রি ট্রিকটি ব্যবহার করে তারা অনেক ভিজিটরদের তাদের ওয়েবসাইটে বেশিক্ষণ থাকার জন্য প্রভাবিত করতে পারেন। আর আপনি যদি আপনার ব্লগে এটি ব্যবহার করেন, তাহলে আপনিও এই সুবিধা পেতে পারেন।
How to add a Music Player in Blogger Website?
ব্লগারে Music Player এড করা খুবই সহজ। আপনি জাস্ট নিচের স্টেপ গুলো অনুসরণ করুন।
Step 1. Add CSS Codes
Search for the code ]]></b:skin> and copy the following CSS code then paste the 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
এখন নিচের HTML কোডটি কপি করুন এবং আপনার ব্লগের যেখানে মিউজিক প্লেয়ারটি শো করাতে চান, ওই স্থানে কোডটি পেস্ট করুন।
<div class="player">
<div class="imgBx">
<img src="image_url_here">
</div>
<audio controls>
<source src="Audio_url_here" type="audio/mp3">
</audio>
</div> Customization
Alter image_url_here with your page Img URl.
Replace Audio_url_here with your Audio URL. You can Host your audio file in Github.
Demo:
Conclusion
এভাবে আপনি সহজেই ব্লগারে একটি Music Player যুক্ত করতে পারেন। এখন আপনার মিউজিক প্লেয়ারটি সম্পূর্ণরূপে তৈরি হয়েছে এবং সঠিকভাবে কাজ করছে।
আমি মনে করি আপনার ব্লগে একটি সাধারণ মিউজিক প্লেয়ার যোগ করার জন্য এই টিউটোরিয়ালটি আপনার জন্য Helpful হয়েছে। যদি আপনার কোনো প্রশ্ন থেকে থাকে যা বোঝা যায় নি, দয়া করে কমেন্টের মাধ্যমে প্রশ্নগুলি আমাদের জানান।
ব্লগার টেমপ্লেট সম্পর্কে আরও আপডেটের জন্য আমাদের ব্লগটি অনুসরণ করুন।