আসসালামু আলাইকুম,
কেমন আছেন? ডিসেম্বরের ছুটিতে আছেন বোধহয়।

আচ্ছা গানের সাইট বানাতে চান?

প্রচুর খরচ! হোস্টিং কিনো, ডোমেইন কিনো, হেন করো, তেন করো।
রাখেন ভাই, গুগোল এতো সুবিধা দেয়, নাকের সামনে থাকলেও তো দেখেন না।
মানে?
গুগোল ড্রাইভ, গুগোল সাইট, গুগোল হোস্ট, ব্লগস্পট
কিভাবে ইউজ করে বানাবো? এগুলিতো ব্লগ বানানোর জন্য।
বুদ্ধি খাটিয়ে গানের সাইটও বানানো যায়।

প্রথমে পছন্দের নামের ব্লগস্পট ব্লগ খুলুন। একটি গুগোল একাউন্ট এজন্য মাস্ট লাগবে।
গানের সাইট, তাই সুরেলা নাম দিতে পারেন(!)
ব্লগস্পট সাইট খুলতে চাইলে কিঞ্চিত এইচটিএমএল কোড ও সিএসএস জানা প্রয়োজন।
এজন্য w3schools.com এর সাহায্য নিতে পারেন। সেখানে সব ব্যাখ্যা করা আছে ও প্র্যাকটিস প্যাড আছে।

টেম্পলেট

এখন একটা সুরেলা টেম্পলেট দরকার।
যেকোনো টেম্পলেট লাগাতে পারেন। গানের সাইটের টেম্পলেট লাইট বা কম ডাটা খরচ হয়, এমন হওয়াই ভালো।
আমি সাজেস্ট করবো Le Tour টেম্পলেট টি। এটি ডাউনলোড করতে আপনাকে ফেসবুকে লগড ইন থাকতে হবে, কারন এটি ফেসবুকে হোস্ট করা। এটির সিএসএস অসাধারণ।
ডাউনলোড করে নিন

এছাড়া অন্যান্য সাইট থেকেও পছন্দ মতো টেম্পলেট ডাউনলোড করে ইন্সটল করতে পারেন।

এখানে সাইটের তালিকা ও রিভিউ দেয়া আছে

http://designscrazed.org/
এই সাইট টি থেকে আপনারা ২০১৫ সালের সেরা ৫৮ টি ব্লগার থিম ডাউনলোড করতে পারবেন।এগুলো ভালো মানের ও সুন্দর।থিমে আছে অ্যাড এর জন্য আলাদা জায়গা।

http://www.mybloggerthemes.com/
এই সাইট এ আপনারা ১-৪ কলামের ব্লগার থিম পাবেন।SEO উপযোগি মাগাজিন,পত্রিকা, ইত্যাদি ভালো মানের থিম পাবেন।

http://btemplates.com/
এই সাইটে ব্লগিং উপযোগি থিম পাবেন।কিন্তু এগুলো SEO উপযোগি এবং অ্যাড এর জন্য আছে আলাদা জায়গা। এখানে পাবেন ব্লগিং,গান,অনলাইন শপ,ফটোগ্রাফ্‌, ফ্যাশন, ডিজাইন,মাগাজি্‌ন,ইত্যাদি থিম। আছে আলাদা কলামের থিম।

http://www.soratemplates.com/
এই সাইটে পাবেন ভালো খেলাধুলা, সিনেমা বিষয়ক থিম।এছাড়া অন্য সব তো আছেই।

http://www.freshdesignweb.com
এই সাইটে ব্লগিং উপযোগি থিম পাবেন। এগুলো অনেকটা ওয়ার্ডপ্রেস থিম এর মত। এখানে আছে ৬০ টি থিম।

http://www.bloggertemplatestore.com/
থিম এর জন্য এটি অনেক ভালো সাইট।

কিছু ফ্রি থিম বা টেম্পলেটের সাইট,

• http://www.designsrazzi.com http://www.themexpose.com
• http:// http://www.deluxe.templates.net/
• all-free-download.com/
• http://www.lovely.templates.com/
• http://www.bloggercandy.com
• http://www.cssauthor.com
• http://www.templateism.com/
• bestbloggertemplates.net/

টেম্পলেট ইন্সটল করতে না পারলে এই টিউনে তাহমিদের ডিরেকশন দেখুন।

হোস্ট

এখন ঠিক মতো যদি টেম্পলেট ব্লগে সেটআপ দিতে পারেন তবে আমরা কাজের দ্বিতীয় ধাপে আসি,

গান কোথায় ও কিভাবে হোস্ট করবেন।
মিউজিক ভিডিও হলে ভিমিও, ইউটিউব ইত্যাদি সাইটে হোস্ট করতে পারেন।

তবে এমপি৩ ফাইল গুগোল ড্রাইভে, জিই ডট টিটি সাইটে হোস্ট করতে পারেন।

গুগোল ড্রাইভে ফাইল হোস্ট করার নিয়ম এখানে ছবি সহ পাবেন, আর নিচে তো বলেই দিচ্ছি।

1. প্রথমে আপনার কাঙ্ক্ষিত ফাইলে রাইট ক্লিক করুন। এবং Share ক্লিক করুন।Advance ক্লিক করুন
2. Change ক্লিক করুন এবং পাবলিক সিলেক্ট করুন
3. Public করে দিন এবং সেভ করে দিন
4. এখন লিঙ্ক কপি করে নিন।

এখন,

এই লিঙ্ক গুলো হয় অনেকটা এরকম,
https://drive.google.com/file/d/0Bz8X6FgnifH3cDBwVFNFZlpqbTg/view?usp=sharing

এটাকে বানাতে হবে এরকম,
http://googledrive.com/host/0Bz8X6FgnifH3TF9HWFpDZTlSSWs/

মানে মাঝের হাবিজাবি লিঙ্কের অংশটা http://googledrive.com/host/xxxxx এই xxxxx এর জায়গায় বসিয়ে দিতে হবে।

আর জিই.`টিটি সাইটে হোস্ট করতে পারেন।
কিভাবে করবেন তা আমি এই টিউনে আগেই ব্যাখ্যা করে রেখেছি।

তাছারা এখানে দেখুন,

দাঁড়ান! আগে একটা লিঙ্কের নমুনা দেই। আর কিভাবে লিংক বের করবেন তা বলে দেই !

http://ge.tt/api/1/files/8E8IZRH2/0/blob?download

HighLight করা লিঙ্কটি কপি করে নিন। তাহলেই ডাইরেক্ট লিঙ্ক পাবেন।

২ জিবি শেষ হলে ?
নতুন ইমেইল দিয়ে নতুন আইডি খুলে নিন।

তো MP3 ফাইলের ডাউনলোড লিঙ্ক তো পেলেন, Live Stream ও Download Bar বানাবেন কিভাবে ?
এক উত্তর, অডিও ট্যাগ।
চেনেন না ? ভাববেন না টিউন শেষ।
বলে দিচ্ছি।

ইম্বেডিং ট্র্যাকস

অডিও ট্যাগ পারেন?
আপনি যদি অভিজ্ঞ (মানে অনেকটাই জানেন ডিজাইনিং সম্পর্কে) তবে ইউনিক জেপি প্লেয়ার ইউজ করতে পারেন। অথবা অডিও ডট জেএস।

কিন্তু অনাভিজ্ঞ হলে অডিও ট্যাগই ভরসা।
অডিও ট্যাগ হল সরাসরি এইচটিএমএল কোড দিয়ে কোন প্রকার গ্রাফিকেল কাজ ছাড়াই ওয়েব পেজে অডিও প্লেয়ার আনার ব্যাবস্থা।

নমুনা দেখুন,
<audio controls>
<source src="host link" type="audio/mp3">
</audio>
এখানে কন্ট্রোলস (Controls) ট্যাগ দিয়ে পুরো কন্ট্রোল বার ভিসিবল বা দৃশ্যমান করা হয়েছে।

সোর্স (Source) ট্যাগে src="host link" এর স্থানে আপনার গানের হোস্টেড লিঙ্ক দিয়ে দিন। আপনার এইচটিএমএল প্লেয়ার তৈরি।

ফলাফল আসবে এরকম,

উপরে যে কোড লিখলাম, তার সোর্সে আপনার গানের ডাইরেক্ট লিঙ্ক পেস্ট করে দিন।
এবার কোডটি এইচটিএমএলে পেস্ট করে দিন।

দেখুন, সুন্দর একটি সাউন্ড প্লে বার আসে পড়েছে।
গান যতবার বাজান হবে, ততবার ডাউনলোড বাড়বে।

প্লেবারে ইচ্ছা মতো স্টাইল যোগ করতে পারেন, মানে সিএসএস আপ্লাই করতে পারেন। ডেমো

CSS Code,

audio {
background:#ff0000;
box-shadow: 0px 2px 2px #ffffff;
border:#488A13 1px solid;
opacity: .75;
}
audio:hover{
background:#002200;
opacity: .9;
}

অথবা,

audio {background:linear-gradient(lime, #ff0000);

box-shadow: 0px 2px 2px #ffffff;
border:#488A13 1px solid;
opacity: .75;
}
audio:hover{
background:#002200;
opacity: .9;
}

আর জাভা স্ক্রিপ্ট ইউজ করতেই পারেন, মানে জাভা স্ক্রিপ্ট অডিও প্লেয়ার।

এখানে পাবেন ডিটেল। এই টিউনেও বলছি সমস্যা নেই।

অডিও ডট জেএস [audio.js]

যদি আপনার ব্লগস্পট সাইট হয়, তবে Templete>Edit HTML দিয়ে <head> ও </head> এর মাঝে নিচের কোড পেস্ট করে দিন।

<script src="http://kolber.github.io/audiojs/audiojs/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>

এখন আপনার কাজ শেষ!    ডেমো
কেবল নিচের মতো করে অডিও ইম্বেড করতে হবে আপনাকে,

<audio
src="http://ge.tt/api/1/files/6VtKUPO2/2/blob?download"
preload="auto">
</audio>

MP3 Player

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" height="20">    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />    <param name="bgcolor" value="#ffffff" />    <param name="FlashVars" value="mp3=http%3A//flash-mp3-player.net/medias/another_world.mp3" /></object>

ডেমো

কমলা হাইলাইট করা স্থানে এমপি৩ লিঙ্ক বসিয়ে দিন।

ডাউনলোড বাটন বানানো

এখন আসি গানের ডাউনলোড বাটন বানানোর কথায়। অনেকে ছবি দিয়ে ডাউনলোড বাটন বানান, সেগুলো আকর্ষণীয় কিন্তু রেস্পন্সিভ নয়।

তাই আমি কিছু সিএসএস ডাউনলোড বাটন দিচ্ছি আপনাদের।

আগে ডেমো দেখে নিন

এখন কোড নিন এবং এটাকে ব্লগের সিএসএস বা <b:skin> ট্যাগের নিচে পেস্ট করে দিন,

a.download{
display: block;
font-size: 2.4vw;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: white;
border-radius: 30px 30px 30px 30px;
background: linear-gradient(#dadad7, white);
text-shadow: 0 -1.5px 0 #000;
box-shadow: 2px 2px 2px black;
cursor: pointer;
font-family: siyam rupali;
text-align: center;
width: 60%;
text-decoration: none;
}
a:hover.download{
background: linear-gradient(yellow, red);
color: black;
}

এখন কেবল আপনাকে ডাউনলোড লিঙ্কের এঙ্কর ট্যাগে একটা class="download" যোগ করতে হবে।

যেমন,

<a href="গানের ডাউনলোড লিঙ্ক" class="download">Download The Song!</a>

এখন একটা পরিপূর্ণ গানের পেজের ডেমো দেখুন,

মা - জেমস

আমার ব্লগ