كيفية اضافة مشغل موسيقى بلغة html على مدونات بلوجر - منقول

بسم الله الرحمن الرحيم

اقدم لكم فى هذا الدرس شرح طريقة لاضافة الموسيقى والاغانى على مدونتك
تعتبر الموسيقى الهادئة شئ مستحب لبعض المدونين لانها مريحة للاعصاب
وهناك بعض المدونات الدينة تقوم بتشغيل بعض أيات القران الكريم
هناك اكثر من طريقة لاضافة مشغل الموسيقى على مدونتك . يوجد مواقع تتيح لك
اضافة هذه الاداة ويوجد اكواد بلغة HTML تتيح لك هذه الاضافة
ايضا فى درسنا هذا سوف اقوم بشرح الطريقتين


الطريقة الاولى : اضافة اداة مشغل الموسيقى بلغة  HTML

 1- قم بفتح المدونة الخاصة بك ثم اذهب الى ( قالب ) ثم قم بالضغط على كلمة ( تحرير HTML )
 ثم قم بعمل  Ctrl + fوابحث عن كلمة <head/> ثم قم بوضع هذا الكود
اعلى كلمة <head/> وقم بالحفظ بعد ادخال الكود

                          

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>

<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

2- اذهب الى التخطيط فى مدونتك ثم اختار كلمة > اضافة اداة < واختار منها HTML/Javascript
بعد ذلك قم بتسمية مشغل الموسيقى كما تشاء وقم بوضع هذا الكود داخل الصفحة

                      

 <div class="mbl"> <div class="mbl_player" id="mnplp"> <div class="mbl_art_bg"></div> <img class="mbl_cover" src="" alt=""/> <span class="mnpl_title"></span> <span class="mnpl_author"></span> <div class="mnpl_volume_min"></div> <div class="mnpl_volume"></div> <div class="mbl_volume_max"></div> <div class="mnpl_toolbar"> <div class="mnpl_tlb_prev"></div> <div class="mnpl_tlb_stop"></div> <div class="mnpl_tlb_next"></div> <div class="mnpl_current"></div> <div class="mnpl_long"></div> <div class="mnpl_all"></div> </div> <div class="mbl_playlist"> </div> </div> </div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"} ] }); }); </script>

يوجد بهذا الكود ميزة جميلة جدا فا من الممكن التحكم الكامل بشكل مشغل الموسيقى وتكتب هذه العناصر وتغير محتوها مكان الاسماء
الموجودة بالكود وهذا الكود يضم 5 اغانى تعمل اسفل بعضها باستمرار
ملحوظة : لابد ان تكون الاغانى المحلمة بصيغة mp3

title : يمثل العنوان من الموسيقى الخاصة بك أو أغنية. 
mfile : وهو يمثل ملف الموسيقى في الامتداد MP3. 
author : اسم الشخص الذي لحن الموسيقى.
cover : الغلاف صورة الإبهام الذي يظهر عند تشغيل الأغنية.
 background : الصورة التي تظهر في خلفية مشغل الموسيقى

الطريقة الثانية : وهيا عبارة عن موقع تقوم بالاشتراك فية وهو يقوم باضافة أداة مشغل الموسيقى على موقعك او مدونتك

اسم الموقع : http://scmplayer.net
قم بالدخول الى الموقع

اختار الشكل والون الذى تريد وضعة فى المدونة من خلال التحديد علية ثم اضغط Next

 قوم بملئ الخانات من خلال فتح موقع www.youtube.com واختار منه الايات القرانية او الاغانى او الموسيقى وقم بنسخ
الرابط وضعة فى خانة SONG URL ثم اضغط NEXT

 تظهر لك هذه الصفحة بعد ذلك قم بتنشيط الخانات على حسب رغبتك اذا كنت تريد ان تعمل الموسيقى مرة واحدة او عدة مرات
او كنت تريد انها لا تعمل الا بالضغط عليها او تعمل بمجرد الدخول للمدونة والتحكم فى حجم الصوت بعد ذلك
اضغط DONE

سوف يظهر كود لك فى النهاية قم باخذ الكود كوبى واذهب الى مدونتك وقوم بفتح القالب الخاص بك
وقم بعمل CTRL +F واكتب بداخلها < body >  ثم ضع الكود الذى حصلت علية اسفل الكود السابق
وبعد وضعه قم بالحفظ وسوف تجد مشغل الموسيقى يعمل بأذن الله

اتمنى ان يكون نال الشرح اعجابكم