موزیک پلیر ریسه ای حرفه ای مدل پرچمی انگلیسی😍 زود میزارم 👍

 

.

 

F

Music Name

Music Singer

 

سلام دوستان این موزیک باکس واستون نشستم قابل ادیتش کردم ینی میتونید کاملا ادیتش کنید ینی بخش تنظیمات واسش ساختم تا ادیتش کنید همونجور که میبینید تو عکس مناسب تم سفیده توی وبم دارکش کردم شما حتی میتونید تصویر بگذارید یا گیف پذارید پس زمینه حتما ویدیو رو ببینید تا بفهمید حتما برای این که بفهمید چطوری ادیتش کنید یادتون باشه که ویدیوش رو ببینید ... خب اینم از کد هاش اول از همه این کد رو اول سی اس اس تون بزارید ...😍 :

 

:root{
 --pasZamineAsli: white url(#);
 
--pasZamineSanavie: #f7f7f7 url(#);

--rangMarzKolBakhsh: initial;
/*تنظیمات ادیت بخش پرچم ها*/
--rangParchamMusic: white url(#);
--rangParchamDownload: #fcfdfd url(#);
--rangParchamFarhan: #fcfdfd url(#);
--rangKalameDaronParchamFarhan: #eee;
}
.wh0le-pro-music-farhan {background:var(--pasZamineAsli) !important;border-color:var(--rangMarzKolBakhsh) !important;}.matn0-farhan {background: var(--pasZamineSanavie) !important;}.music-play-ofarhan0-button {background: var(--rangParchamMusic) !important;}.download-music-farhan-pro {background: var(--rangParchamDownload) !important;}.Made.By.farhan {background: var(--rangParchamFarhan) !important;color:var(--rangKalameDaronParchamFarhan) !important;}

خب دوستان حالا کافیه به روش های قبل کد های زیر رو توی هر مطلبی که دوس داشتید آهنگ بزارید استفاده کنید 😍👍 کد ها فعلا به دو نسخه عادی و پخش آنلاین گذاشته میشن :

 

نسخه عادی (پخش خودکار نیست)

<p>اگر میخوای متنی بالا بنویسی</p>
<section class="wh0le-pro-music-farhan" data-who-made-it="Made by farhan" style="position: relative; width: 300px; border-radius: 10px; background: #fff; direction: ltr; padding: 0 0px 0px 10px; border: outset; border-top: 0; margin: 10px auto;">
    <div class="img-matn-farhan" style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
        <div class="img0-farhan" style="background: url('لینک تصویر'); width: 90px; height: 90px; border-radius: 100px; background-size: 100% 100%;"></div>
        <div class="matn0-farhan" style="width: calc(100% - 110px); background: #f7f7f7; padding: 0 5px 5px; border-radius: 0 10px 10px 0;">
            <div class="button-cont-farhan" style="display: flex; border-radius: 10px 10px 0 0; margin-bottom: 5px; margin-left: auto; margin-right: auto; align-items: center; justify-content: center;">
                <div class="music-play-ofarhan0-button" style="width: 30px; height: 40px; border-radius: 0 0 25px 25px; background: #ffffff; position: relative; overflow: hidden;">
                    <audio src="لینک آهنگ" style="position: absolute;width: 300px !important;max-width: 300px !important;height: 54px !important;max-height: 54px !important;min-width: 300px !important;min-height: 54px !important;left: -11px;top: -3px;filter: opacity(0.2);" controls="controls"></audio>
                </div>
                <div class="download-music-farhan-pro" style="width: 30px; height: 40px; border-radius: 0 0 25px 25px; margin-left: 15px; background: #fcfdfd; position: relative;">
                    <a href="لینک دانلود آهنگ" style="color: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;">.</a>
                    <div style="width: 20px; height: 33px; border-radius: 100px; position: absolute; bottom: 6px; left: 4.5px; background: url('https://www.pngkey.com/png/full/11-115335_download-icon-png-downloading-icon.png') no-repeat; background-size: contain; background-position: 0; filter: invert(1) contrast(0.8);"></div>
                </div>
                <a href="http://amberboy.blog.ir" class="Made By farhan" style="width: 30px; height: 40px; border-radius: 0 0 25px 25px; background: #fcfdfd; font-size: 30px; margin-left: 15px; text-align: center; font-family: cursive; padding: 0 0 0 3px; color: #eee;"> F </a>
            </div>
            <h6 class="he0farhan" style="margin: 0; font-size: 18px; color: #bdbdbd; font-family: cursive;">Music Name</h6>
            <p class="pa0farhan" style="margin: 0.1rem; font-size: 13px; font-family: cursive; color: #6176c3;">Music Singer</p>
        </div>
    </div>
</section>
<p>اگر میخوای متنی پایین بنویسی</p>

نسخه پخش خودکار :

 

<p>اگر میخوای متنی بالا بنویسی</p>
<section class="wh0le-pro-music-farhan" data-who-made-it="Made by farhan" style="position: relative; width: 300px; border-radius: 10px; background: #fff; direction: ltr; padding: 0 0px 0px 10px; border: outset; border-top: 0; margin: 10px auto;">
    <div class="img-matn-farhan" style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
        <div class="img0-farhan" style="background: url('لینک تصویر'); width: 90px; height: 90px; border-radius: 100px; background-size: 100% 100%;"></div>
        <div class="matn0-farhan" style="width: calc(100% - 110px); background: #f7f7f7; padding: 0 5px 5px; border-radius: 0 10px 10px 0;">
            <div class="button-cont-farhan" style="display: flex; border-radius: 10px 10px 0 0; margin-bottom: 5px; margin-left: auto; margin-right: auto; align-items: center; justify-content: center;">
                <div class="music-play-ofarhan0-button" style="width: 30px; height: 40px; border-radius: 0 0 25px 25px; background: #ffffff; position: relative; overflow: hidden;">
                    <audio src="لینک آهنگ" style="position: absolute;width: 300px !important;max-width: 300px !important;height: 54px !important;max-height: 54px !important;min-width: 300px !important;min-height: 54px !important;left: -11px;top: -3px;filter: opacity(0.2);" autoplay="autoplay" controls="controls"></audio>
                </div>
                <div class="download-music-farhan-pro" style="width: 30px; height: 40px; border-radius: 0 0 25px 25px; margin-left: 15px; background: #fcfdfd; position: relative;">
                    <a href="لینک دانلود آهنگ" style="color: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;">.</a>
                    <div style="width: 20px; height: 33px; border-radius: 100px; position: absolute; bottom: 6px; left: 4.5px; background: url('https://www.pngkey.com/png/full/11-115335_download-icon-png-downloading-icon.png') no-repeat; background-size: contain; background-position: 0; filter: invert(1) contrast(0.8);"></div>
                </div>
                <a href="http://amberboy.blog.ir" class="Made By farhan" style="width: 30px; height: 40px; border-radius: 0 0 25px 25px; background: #fcfdfd; font-size: 30px; margin-left: 15px; text-align: center; font-family: cursive; padding: 0 0 0 3px; color: #eee;"> F </a>
            </div>
            <h6 class="he0farhan" style="margin: 0; font-size: 18px; color: #bdbdbd; font-family: cursive;">Music Name</h6>
            <p class="pa0farhan" style="margin: 0.1rem; font-size: 13px; font-family: cursive; color: #6176c3;">Music Singer</p>
        </div>
    </div>
</section>
<p>اگر میخوای متنی پایین بنویسی</p>

چطوری فونت رو تغییر بدیم؟ :

روی لینک بزنید اگر خواستید ببینیدش (این جز آموزش این مقاله نیست فقط واسه کسایی هست که دوست دارن) : کلیک