الراب

Read More

كود نصوص وصور تمشي يضيف رونقاً جميلاً لموقعك وزيادة العرض

اذا كنت تعاني من ضيق المساحه في القوائم الجانبية لموقعك او مدونتك اليك كود هتمل بسيط  يحل المشكلة ويضيف لموقعك رونقاً جذاب 

طريقة تركيبه بانسبة لمدونات بلوجر فقط اذهب الى لوحة التحكم > التخطيط > إضافة أداة > HTML/JavaScript إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية.

والصق الكود المطلوب بعد تعديلة بما هو مناسب لمدونتك 

الكود التي يصلح لعرض النصوص الكتابية, الروابط, الصور,

اطار
سطر أو صورة 1 سطر أو صورة 2 سطر أو صورة 3 سطر أو صورة 4 سطر أو صورة 5 الخ.

كود

<marquee align="right" direction="up" height="120" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="150">

سطر أو صورة 1

سطر أو صورة 2

سطر أو صورة 3

سطر أو صورة 4

سطر أو صورة 5

الى ما تشاء

</marquee>

اتجاه السير يحدده الامر direction="up" اي ان up تعني فوق ومن الممكن تغيير 

كلمة up بكلمة down راح تعكس اتجاه السير من فوق الى تحت وكلمة right راح 

يكون السير من اليمين الى الشمال وعكسها left من الشمال الى اليمين

لتحديد ارتفاع المساحه الذي ترغب  height="120"

ولتحكم في السرعة بواسطة  scrollamount="2"  تستطيع الزيادة بزيادة الرقم 

او تنقيصه

لتحديد العرض الذي ترغب  width="150"

نموذج عارض الصور

كود

<marquee align="left" direction="left" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="500">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJElCogaqdiw07yXqwfj6YYX8RFHv_omo1NHQrnj_mo07AzvjR9WTGox1dTRDlvOphiFH3sif0RmQdArrw5qCkyymC8o1L-Zfp3WJeWQN54ISfRaxvXOnRA3eE6XBWiUIOAsFmO88VWV1G/s1600/Facebook.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJElCogaqdiw07yXqwfj6YYX8RFHv_omo1NHQrnj_mo07AzvjR9WTGox1dTRDlvOphiFH3sif0RmQdArrw5qCkyymC8o1L-Zfp3WJeWQN54ISfRaxvXOnRA3eE6XBWiUIOAsFmO88VWV1G/s200/Facebook.png" width="120"></a><span id="goog_266087345"></span><span id="goog_266087348"></span>&nbsp; &nbsp;<img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgay2JhEhmao_aouzLI6nC68QirnfluMkQ06m2JgyUWvQfX_4hqsY6fFS7BYn_nFo7C6HoCnz2qhIcrnqDNIryawUlKrvQNay5hWuE3GQj_A8XWqWaIvxpvEZKkDO4j810iNbIjKMeMpw29/s200/RSS.png" width="120"><span id="goog_266087349"></span><span id="goog_266087346"></span>&nbsp; &nbsp; <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxhUJ-xH2XFtVPVozzDbQbnWeCqctimC53h1sa83ohIT0YQ9GhK36FAEtbWEP6KLJm1JkcJTRzo8rdmE6sDT-brud4V0YXJWXq-H01pewwCbS0WfpaTAXe0ikhZjj9K_4YaptN18b-Jxr/s1600/Twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxhUJ-xH2XFtVPVozzDbQbnWeCqctimC53h1sa83ohIT0YQ9GhK36FAEtbWEP6KLJm1JkcJTRzo8rdmE6sDT-brud4V0YXJWXq-H01pewwCbS0WfpaTAXe0ikhZjj9K_4YaptN18b-Jxr/s200/Twitter.png" width="120"></a></div>
</marquee>

وبالتوفيق دائما ادعو لي ولكم 

Read More

إضافة كود التسجيل في قناة يوتوب الخاصة بمدونتك

كيف الحال عزيزي الكريم أتمنى أن تكون بخير أنت و جميع الإخوة. موضوع اليوم سيكون عن موقع Youtube العملاق و لمن لا يعرفه هو موقع خاص بالفيديو حيث يعد رقم واحد في مجال الفيديو و هذا ليس بغريب إن علمنا أنه تابع للموقع العملاق Google .

فالكثير منا يضع فيديوهات في مدونته إما قام هو بإنتاجها أو هي لأشخاص أخرين و بهذا تشكل قناة خاصة بمدونتك على ال Youtube، الإضافة مثلها مثل إضافة صندوق صفحة المعجبين الخاصة بال Facebook  تجد بها عدد الفيديوهات الموجودة في قناتك و عدد المشتركين، كما أن زوارك لن يضطروا لترك مدونتك لإكمال التسجيل كل شيئ يتم داخل صفحات مدونتك.

إضافة كود الإشتراك في قناة يوتوب لمدونة بلوغر

1- إدخل للمدونة / تصميم / أداة / HTML/JavaScript

2- قم بنسخ و لصق الكود التالي في HTML/JavScript في خانة المحتوى

<center><!--YouTube Subscribe Gadget http://widget-blogs.blogspot.com--><iframe src=http://www.youtube.com/subscribe_widget?p=YOUR-YOUTUBE-USERNAME style="overflow: hidden; height: 130px;width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>

ملاحظة هامة: 

A- قم بتغير جملة YOUR-YOUTUBE-USERNAME بإسمك على اليوتوب ستجده في الأعلى على اليمين بعد تسجيل دخولك.

B- قد لا تظهر الإضافة بشكل جيد على مدونتك لهذا قم يتغير مسافة الإرتفاع و العرض خصوصا و هي مشار إليها باللون الأخضر.   3- قم بحفظ الأداة و اسحبها للمكان اللذي تريد أن تظهر فيه ثم أعد حفظ القالب لتتبيث الأداة في مكانها الجديد.

في انتظار تعليقاتك و استفساراتك.

Read More

كود جديد لترجمة Google Translate

اليوم سنتحدث عن طريقة جديدة لوضع كود الترجمة و سيكون على شكل قائمة منسدلة.

و لكي تضيف الكود توجه إلى أداة Html/Javascript و ألصق بها الكود الموجود بالأسفل.

<div id="google_translate_element"> </div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } </script> <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>

الأن قم بحفظ الأداة و ستجد الإضافة على مدونتك.

سلام

Read More

إضافة مقطع صوتي بتقنية HTML5

السلام عليكم

بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته  مع ال 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 "

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

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

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

</head>

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

<script src="http://dl.dropbox.com/u/17686000/blogspacetech/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});

</script>

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

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

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

]]></b:skin>

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

.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);
}

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

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

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

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

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

<div> <audio src="رابط الملف الصوتي." preload="auto" /> </div>

هناك خاصيتان اساسيتان في الاضافة


التشغيل التلقائي للملف الصوتي autoplay

او تشغيل الى غير مسمى loop

<audio src="رابط الملف الصوتي" autoplay />

<audio src="رابط الملف الصوتي" loop />

كما يمكنك اختيار احد المواقع لرفع ملفات mp3

dropbox

fileden

هذا كل شيئ أتمنى لك الاستفادة

Read More