الدورة الرمضانية – تصميم – توزيع – برمجة – بأبسط الطرق ( 4-التوزيع )

لا تنسو جميع دوروس الدورة منقولة من مدونة المصمم بدر العنزي  

http://www.badr4.com

بسم الله والصلاة والسلام على رسول الله ..

اهلا بالجميع بالدرس الرابع من سلسلة الدورة الرمضانية

واعتذر للتاخير بهذا الدرس كان المفروض ينزل امس .. لكن ماقدرت الا اليوم .. وراح ادرج الدرس الاخير اليوم الفجر ان شاء الله ..

كان الدرس الاول مقدمة

وبعده درس التصميم

ثم درس بناء HTML و ملف css

ودرس اليوم هو /

3 – تعلم طريقة توزيع نفس التصميم وبنفس ملف css على المنتدى والسكربتات الاخرى بسهولة وبدون تعقيد ..

حمل الدرس مع الملفات المرفقه للدرس من هذا الرابط .

http://www.badr4.com/up/ramadan-tt.zip

رابط اضافي :

ramadan-tt.zip – 4shared.com – online file sharing and storage – download

واي استفسار انا موجود ان شاء الله …

بالتوفيق للجميع .

تابع القراءة

إضافة أيقونة "إذهب إلى الأعلى" لمدونات Blogger

من المفيد أن نقوم بإضافة أيقونة "إذهب إلى الأعلى" أسفل المدونات , لإختصار الوقت على الزائر ولكي يصبح التحرك في مدونتك أكثر سلاسة , لمن لا يعرف وظيفة هذه الأيقونة : هي أيقونة تضاف أسفل المدونة مهمتها هي توجيه الزاشر فور الضغط عليها إلى الأعلى مباشرة . في درسنا هذا سنتعلم طريقة إضافة أيقونة Up أو الذهاب إلى الأعلى مع تعلم طريقة تخصيص الأيقونة التي تحب .

الخطوة الأولى : من لوحة التحكم >> التصميم >> من عناصر الصفحة نختار إضافة أداة :

الخطوة الثانية : ومنه نختار HTML/JavaScript :

الخطوة الثالثة : إضافة الكود التالي في إضافة الـ HTML/JavaScript :

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif" /></a>

لتخصيص الأيقونة :

يمكن إختيار الأيقونة التي تود بدلا ً من الأيقونة التي قمت بإدراجها في الكود بتغيير ما لون باللون الأحمر .

تمنياتي للجميع بالتوفيق :)

تابع القراءة

طريقة إضافة تعليقات DisQus الشبيهة بتعليقات الـ FaceBook لصفحاتك

الكثير من زواري الكرام عانوا من مشكلة عدم القدرة على تطبيق "تعليقات الـ FaceBook على مدونات Blogger" ووعدت زواري بتعويضهم بنموذج تعليقات أفضل بـ 100 مرة من تعليقات الـ FaceBook , دعونا قبل البدأ بالدرس أن أقنعكم بهذا النموذج ! هل يكفيكم عندا أقول أن كبرى المواقع الأجنبية كالـ CNN تستعمل هذا النموذج ؟ هذه قائمة بالمواقع المشهورة التي تستعمله :

أعلم أنكم متشوقون لهذا الدرس , درسنا اليوم سيكون عن كيفية إضافة نموذج تعليقات مذهل بكل معنى الكلمة لمدونات Blogger .


مع العلم أن موقع DisQus يدعم قائمة المواقع التالية منها الـ WordPress :

تفضلوا مثال حي قبل البدأ : ضرب القذافي بالحذاء

الخطوة الأولى : التوجه إلى الموقع التالي :

DisQus.Com

الخطوة الثانية : الضغط على زر "Sign Up" كما في الصورة التالية :

الخطوة الثالثة : ملأ بيانات التسجيل كما في الصورة التالية :

الخطوة الرابعة : بعد الإنتهاء من عملية التسجيل يتبقى لنا خطوتين فقط :

قم بضبط الإعدادت كما تحبها أن تكون .

ملاحظة : لعرض زر "Like" لا قم بالتأشير على هذه الخانة :

والمفاجأة أن نموذج التعليقات هذا متوفر باللغة العربية , من خانة اللغة :

بعد الإنتهاء من خطوة ضبط الإعدادات قم بالضغط على "Continue" :

الخطوة الخامسة : تسمى هذه الخطوة بخطوة الـ "Install" , وفيها يتم إختيار البيئة التي تود تطبيق نموذج التعليقات عليها , أنا في درسي هذا قمت بإختيار بيئة Blogger :

الخطوة السادسة : الضغظ على Add Site "Ur Blog" to Blogger :

الخطوة السابعة : يجب أن يكون حسابك على Blogger مفتوح لعمل ربط بين الموقعين :

بعد الضغط على "إضافة عنصر واجهة مستخدم" سيتم ضبط الإعدادات بشكل تلقائي , من دون أي إضافات .

شكل نموذج التعليق الجديد :

أنا في مثالي السابق قمت بتحضير الدرس على نموذج التعليقات باللغة الأجنبية , يمكن تطبيق النموذج باللغة العربية كما في الخطوة الرابعة .

لإضافة التعليقات قم بالضغط على الزر التالي :

وفيه ميزة الـ "Reply" أي الرد على الرد كما في الصورة التالية :

صورة لوحة التحكم الخاصة بك في موقع DisQus :

صورة لـ "أعجبني" أو "Like" الخاص بصندوق التعليق هذا :

طريقة تطبيق "الإشراف على التعليقات" قبل النشر قم بـ :

التوجه إلى لوحة التحكم >>

"Setting" >> "Moderation"

ومن تبويبة "Pre-Moderation" نختار "Yes. Moderators must approve comments before they are published" , كما في الصورة التالية :

مميزات النموذج الجديد :

1. تصميم متميز .
2. سرعة في التحميل .
3. إمكانية إضافة "أعجبني" أو "Like" كما هو الحال مع تعليقات الـ FaceBook .
4. إمكانية الرد على الرد بشكل جذاب ومنسق .
5. إمكانية إدراج ملفات (( صور , فيديو .. )) في الرد .
6. إمكانية الإشراف على التعليقات قبل نشرها .
7. إمكانية تحرير التعليقات .
8. إمكانية التعليق بالطرق التالية :

DisQus Account , Google Account , Twitter Account , FaceBook Account , Yahoo Account , وعن طريق الإسم والريد الإلكتروني , كما يمكن المعاينة من خلال الصورة التالية :

في حال وجود أي إستفسارات فلا تترددوا بطرحها في التعليقات .. تمنياتي للجميع بالتوفيق :)

تابع القراءة

طريقة توسيط عناوين التدوينات على Blogger

قام أحد زواري الأعزاء بسؤالي عن طريقة توسيط عناوين التدوينات , بعد طريحي لطريقة توسيط الـ Header , في درسنا هذا سنشرح طريقة توسيط عناوين التدوينات على مدونات Blogger .

الخطوة الأولى : التوجه إلى لوحة التحكم >> تصميم >> مصمم النماذج :

الخطوة الثانية : من مصمم النماذج نختار تبويبة "متقدم" ومن خلالها نختار "إضافة CSS" كما في الصورة التالية :

الخطوة الثالثة : في مربع الإضافات الخاصة بالـ CSS نقوم بإضافة هذا الكود :

.post-title {  text-align: center;  }

الخطوة الرابعة : الضغط على "تطبيق على المدونة" :

الشكل النهائي :

تمنياتي للجميع بالتوفيق :)

تابع القراءة

طريقة إضافة ألعاب فلاش للعبها مباشرة من مدونتك

الكثير سألوني عن طريقة بناء مدونة ألعاب فلاش Flash Games يمكن الإستفادة منها بشكل كبير , لأن الزائر سيبقى في المدونة أكبر وقت ممكن وبالتالي ستزيد من ثقة Google لمدونتك , في درسنا هذا سنتعلم طريقة إضافة ألعاب الفلاش للعبها Online من مدونتك مباشرة .

الخطوة الأولى : التوجه إلى إحدى المواقع التي تقدم هذه الخدمة , أنا من جهتي أفضل هذا الموقع :

Daily HaHa

الخطوة الثانية : نقوم بإختيار تبويبة "Flash Games" كما في الصورة التالية :

الخطوة الثالثة : إختيار أية لعبة من القائمة التي يتيحها الموقع :

أنا من جهتي قمت بإختيار لعبة العم Super Mario :)

الخطوة الرابعة : بعد الضغط على اللعبة المطلوبة نقوم بنسخ كود الـ HTML الخاص باللعبة كما في الصورة التالية :

الآن قم بالذهاب إلى صندوق إرسال المواضيع في مدونات Blogger أو مدونات WordPress وقم بلصق الكود التي تم الحصول عليه .

تطبيق لهذا الدرس :

أقدم لكم لعبة Super Mario 4 Ever , يمكن لعبها مباشرة OnLine :

تمنياتي لكم بالفوز بهذه اللعبة الجميلة :) في حال وجود أي سؤال فلا تتردد بالسؤال :)

تابع القراءة

طريقة إضافة الإبتسامات إلى صندوق تعليقات Blogger

من الجميل أن تتفاعل مع زوارك بواسطة الوجوه التعبيرية فالكل يعرف أن الكتابة ليست كالكلام ! لذلك تم إختراع ما يسمى بالوجوه التعبيرية لتعبر عن حالة الشخص أثناء كتابة شي ما , لن أطيل عليكم بثرثرتي , في درسنا اليوم سنتعلم طريقة إضافة إبتسامات إلى صندوف التعليقات الخاص بـ Blogger .

مثال :

الخطوة الأولى : التوجه إلى تبويبة "تصميم" وإختيار "تحرير HTML" لا تخف الدرس سهل ولا يحتاج خبرة في الـ HTML ما عليك سوى تطبيق الدرس خطوة بخطوة :

الخطوة الثانية : التأشير على "توسيع قوالب عناصر واجهة المستخدم" كما في الصورة :

الخطوة الثالثة : إضغط على الزرين (( Ctrl + F )) للبحث عن الكود التالي :

<b:if cond='data:post.embedCommentForm'>

الخطوة الرابعة : إضافة الكود التالي بعد الكود السابق مباشرة :

<div style='background:#F8F8FF; border:2px solid #EDEDED; display:block; padding: 1px 1px 1px 1px; margin: 1px 3px 1px 3px;text-align: center; direction:ltr; color:#ccc;'> <b> <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) </b> </div>

الخطوة الخامسة : إضغط على الزرين (( Ctrl + F )) للبحث عن الكود التالي :

</body>

الخطوة السادسة : إضافة الكود التالي قبل الكود السابق مباشرة :

<script src='http://www.opendrive.com/files/19101632_v5PoM/smiley.js' type='text/javascript'/><noscript><a href='http://hashem-b.com' target='_blank'><span style='font-size: x-small;'>Add Smilies</span></a></noscript>

الآن نقوم بحفظ القالب .

تمنياتي للجميع بالتوفيق , في حال وجود أية إستفسارات فلا تترددوا بإدراجها في التعليقات .

تابع القراءة