موزیک باکس ورژن 3 (لطفا پیوند کنید برو بچ)

برو بچ نظرتون چیه کد این رو هم بزارم؟😍

 

هم پلیرش یه جوریه که اصن شبیه باکس موزیک مجزاست و هم اون بخش 

سه نقطه سمت راستش واسه دانلودشه 😍👍

*******

و خفن ترین چیزش اینه که توی تمام قالبا درست نمایش داده میشه!

و این که نیازی به فعال بودن جاوا اسکریپت نداره!

 

***

راستی کدش نیازی به آموزش ویدیویی نداره 👍😂

*** 

خب بریم این کد باحال رو بهتون بدم ولی قبلش

دموش و شکل نهاییش اینجوری میشه 😍 :

 

Music Name

Music Singer

خب بریم سراغ این که کدش رو بهتون بدم : (نسخه عادی)

<p>اگر میخواهید متنی بنویسید </p>
<section class="mainbox-music-farhan" style="background: #fff;padding: 10px 15px;max-width: 85%;border-radius: 15px;box-shadow: 0 0 6px 3px #ddd;margin: 10px auto;direction: ltr;box-sizing: content-box;">
 <div class="flc" style="display: flex;justify-content: space-between;">
 <div class="header-pics-music" style="background: url(لینک تصویر آهنگ);width: 100px;height: 100px;border-radius: 100px;background-size: 100% 100%;overflow: hidden;">
 <audio src="لینک خود آهنگ" controls="controls" class="audio-p1" style="position: relative;left: 55px;filter: sepia(1) hue-rotate(287deg) opacity(0.9) drop-shadow(0px 0px 0px pink);height: 77px !important;"></audio>
 </div>
 <div class="song-info-and-download" style="width: calc(100% - 140px);padding: 5px 22px 5px 10px;background: #efefef;border-radius: 3px;position: relative;direction: ltr;">
 <h6 class="name-music-p1" style="margin: 0;font-size: 15px;font-family: cursive;color: #099583;">Music Name</h6>
 <p class="music-singer-p2" style="margin: 0.5rem 0;font-family: monospace;color: #474747;font-weight: 600;font-size: 13px;"> Music Singer </p>
 <div class="download-container" style="width: 20px;height: 20px;position: absolute;overflow: hidden;border-radius: 100px;top: -3px;right: -5px;box-shadow: 0 0 2px 3px gainsboro;">
 <audio src="لینک دانلود آهنگ" controls="controls" class="dwa" style="position: absolute;left: -264px;height: 20px;"></audio>
 </div>
 </div>
 </div>
 </section>
<p>اگر میخواهید متنی بنویسید</p>

کد نسخه (پخش اتوماتیک) :

<p>اگر میخواهید متنی بنویسید </p>
<section class="mainbox-music-farhan" style="background: #fff;padding: 10px 15px;max-width: 85%;border-radius: 15px;box-shadow: 0 0 6px 3px #ddd;margin: 10px auto;direction: ltr;box-sizing: content-box;">
 <div class="flc" style="display: flex;justify-content: space-between;">
 <div class="header-pics-music" style="background: url(لینک تصویر آهنگ);width: 100px;height: 100px;border-radius: 100px;background-size: 100% 100%;overflow: hidden;">
 <audio src="لینک خود آهنگ" controls="controls" autoplay="autoplay" class="audio-p1" style="position: relative;left: 55px;filter: sepia(1) hue-rotate(287deg) opacity(0.9) drop-shadow(0px 0px 0px pink);height: 77px !important;"></audio>
 </div>
 <div class="song-info-and-download" style="width: calc(100% - 140px);padding: 5px 22px 5px 10px;background: #efefef;border-radius: 3px;position: relative;direction: ltr;">
 <h6 class="name-music-p1" style="margin: 0;font-size: 15px;font-family: cursive;color: #099583;">Music Name</h6>
 <p class="music-singer-p2" style="margin: 0.5rem 0;font-family: monospace;color: #474747;font-weight: 600;font-size: 13px;"> Music Singer </p>
 <div class="download-container" style="width: 20px;height: 20px;position: absolute;overflow: hidden;border-radius: 100px;top: -3px;right: -5px;box-shadow: 0 0 2px 3px gainsboro;">
 <audio src="لینک دانلود آهنگ" controls="controls" class="dwa" style="position: absolute;left: -264px;height: 20px;"></audio>
 </div>
 </div>
 </div>
 </section>
<p>اگر میخواهید متنی بنویسید</p>

 

خب دوستان بریم آموزشش خب آموزش خاصی نداره :

در مرحله اول کد رو کپی کنید بعدش برید به بخشی که پست مینویسید ، دکمه منبع رو بزنید که توی تصویر پایین هست :

 

اگر هم احیانن از ادیتور زیر استفاده میکنید میشه این بخش :

 

 

بعد از اون کد رو کپی پیست کنید و حالا فقط به جالی لینک تصویر آهنگ لینک تصویر رو بزارید به جای لینک خوده آهنگ لینک آهنگ و به جالی لینک دانلود آهنگ هم لینک خوده آهنگ خب .

***

تبریک میگم شما به طور کاملا رایگان یه باکس موزیک حرفه ای دارید 😍💗 لذت ببرید گایز!