hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



اجمل طريقة لاضافة مقطع صوتي الى موقعك بدون تعب
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: اجمل طريقة لاضافة مقطع صوتي الى موقعك بدون تعب



السلام عليكم<div style="margin:auto;text-align:center;width:100%">


بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال HTML5

حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع




تحميل (Download) مثال (Demo)




فالأن وبعد طول انتظار اتت لنا خاصية ال HTML5 لتسريع الاستماع من جهة

و من جهة أخرى نجد متصفحات اكثر تعقيدا و أكثر ذكاءا ...

لكن هذا ليس معنى أن تكون لغة HTML5 في غير صالحنا

لأن الذي برمج audiojs جعل هذه الاخيرة تتوافق مع كل من


Mobile Safari iOS 3

Android2.2+, w/Flash

Safari 4

Chrome 7

Firefox 3+, w/ Flash

Opera 10+, w/ Flash

IE 6, 7, 8, w/ Flash




هل يمكنني استعمال هته الخاصية في مدونتي؟


نعم يمكن و اليوم سنضع شرح بسيط

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ثم ابحث عن هذا الوسم













و ضع فوقه هدا كود








audiojs.events.ready(function() {
var as = audiojs.createAll();
});








أو يمكنك تحميل الملف من الموقع الاصلي

و اعادة رفعه...

الان نبحث عن هدا الوسم






]]>




و نضع فوقه هدا الكود


الكود:
[color=black][font=Arial]
.audiojs {
width: 460px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image:
-webkit-gradient(linear, left top, left bottom, color-stop(0, #444),
color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}[/font][/color]
[color=blue]
[/color]

أخيرا : استعرض مدونتك ثم احفظ قالبك.



شرح كيفية الإستخدام



قم بكتابة تدوينتك بالطريقة المعتادة

و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة




<div>



كن بالقرب :
follow me @HDagash


التعليقات
لا يوجد حالياً أي تعليق

تفضّل شارك بتعليقك

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع-