الدرس الرابع - تهيئة البيئة المناسبة

8:13 ص | | | 0تعليقات

تهيئة البيئة المناسبة


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

1- المخدم:

المخدم أو (السيرفر) هو عبارة عن جهاز يحتوي على ذاكرة كبيرة السعة ومترجمات مبيتة لغرض تفسير الصفحات الديناميكية وهو يستخدم لخزن صفحات الويب وربطها بالشبكة العالمية, و سعره بحوالي آلاف الدولارات.

آمل إني لم اسبب لك صدمة حتى الآن, لحسن الحظ هناك مخدمات من نوع آخر وهي برامج يتم تثبيتها على حاسوبك لتقوم بعمل المخدم الحقيقي يسمى هذه النوع من المخدمات ﺒ( السيرفر المحلي) وبعض هذه المخدمات مفتوحة المصدر (أي مجانية) لذا لا تجزع, لن تحتاج لأي فلس لتتعلم البرمجة, وهذا حتما من مزايا PHP.

المخدم الذي ستقوم بالعمل عليه هو Apache وهو برنامج مبيت في حزمة XAMPP ويتوفر مجانا على موقع http://www.ApacheFriends.org .

أن ApacheFriends هي مؤسسة غير ربحية قام فريقها بجمع لغة PHP ومخدم Apache وقواعد بيانات من نوع MySQL وبعض الإضافات مثل برامج دعم اكواد الجافا سكربت وتطبيق بريد الكتروني وغيرها من الإضافات الضرورية للمبرمج.

وهناك نسخ خاصة بكل نظام, كما يتوافر بثلاث أنواع Lite و Full و Add-Ons, إصدار XAMPPLite هي نسخة من حزمة XAMPP ولكنها تحتوي على إضافات قليلة جدا ولا تلبي بعض متطلبات اغلب المبرمجين, أما نسخة Add-Ons فهي الإضافات التي يمكن تنزيلها منفردة وتثبيتها حسب الرغبة, وبالنسبة للنوع XAMPPFull فهي نسخة كاملة الإضافات وهي ما ستقوم بتنزيلها.

قم بالذهاب إلى الرابط http://www.apachefriends.org/en/xampp-windows.html#641 , بعد أن تفتح الصفحة ستشاهد صفحة تحميل الحزمة وعند النزول إلى الأسفل ستشاهد الصورة أدناه


هذا هو القسم الخاص بتحميل XAMPP الإصدار 1.7.3 للويندوز وكما ترى في خانة content تظهر الإضافات التي يحتوي عليها XAMPP ومنها المخدم Apache وقواعد البيانات من نوع MySQL و PHP الإصدار 5.3.1 , قم بالضغط على صيغة EXE كما هو مبين بالصورة.

 تثبيت  XAMPP على   Windows 

بعد قيامك بعملية التحميل اذهب إلى الملف التنفيذي وقم بفتحه, ستلاحظ بدء تثبيت حزمة XAMPP.

هنا تظهر لك نافذة لاختيار اللغة التي سيرشدك المثبت بها, قم باختيار اللغة الانجليزية نظرا لعدم وجود اللغة العربية.


بعد ذلك ستظهر لك نافذة الترحيب, اضغط على Next.

في هذه الخطوة, افضّل أن تترك المسار كما هو (C:\xampp) واضغط Next.

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


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


بعد أن تتم عملية فك ضغط الملفات ستظهر شاشة سوداء تقوم بتغيير إعدادات الحزمة حسب النظام الذي تستعمله.
ستظهر بعدها عملية التحقق من المنافذ ثم نافذة جديدة لتشغيل المخدم بعد ذلك ستختفي آليا وتظهر نافذة تخبرك بانتهاء التثبيت, اضغط على OK ثم بعد ظهور رسالة أخرى تخبرك ما إذا كنت تريد البدء باستخدام لوحة التحكم اضغط Yes ثم اضغط Finish.
تم الانتهاء من تثبيت الحزمة متضمنة جميع الخدمات المرفقة وستبدأ لوحة التحكم بالعمل.

تمنحك حزمة XAMPP قدرة التحكم بالمخدم وقواعد البيانات والخدمات الأخرى وتغيير إعداداتها من خلال مفهوم واجهة المستخدم الرسومية GUI (تُلفظ: Gooey) مما يسهل عملية اختبار الصفحات وتشغيل/إيقاف تشغيل خدمات الحزمة بسهولة.

كما ترى في لوحة التحكم تحتوي على العديد من الأزرار, ففي القسم Modules هناك الإضافات البرمجية وأزرار التحكم بها في خانة Svc (Services) كما ترى فهي مؤشرة بالنسبة لApache و MySQL و FileZilla (FileZilla هي خدمة نقل الملفات من والى المخدم) مما يعني إنها خدمات تم تثبيتها داخل الحاسوب, وبجانب أسماء هذه الخدمات هناك عبارة Running وهذا يشير إلى أنها تعمل الآن يمكنك إيقافها من خلال زر Stop الذي سيتحول إلى Start بعد ذلك أما عن بقية الأزرار:

Service: عند الضغط عليها تظهر نافذة يمكنك من خلالها تحديد XAMPP لتشغيله كخدمة مبيتة في النظام وكذلك الإضافات الموجودة ضمن هذه الحزمة.

SCM: أو (Service Control Manager) عند الضغط على هذا الزر ستظهر لك نافذة الخدمات الموجودة في الحاسوب يمكنك التحكم بها كإغلاق/تشغيل / إعادة تشغيل هذه الخدمات إلا إنني لا أنصحك بالتجربة إن لم تكن لديك خبرة في هذه الخدمات وعملها, فقد تتسبب بتعطيل بعض البرامج خلال عملها.

Status: وهذا الزر يقوم بعرض حالة الخدمات والرقم التعريفي الخاص بها ومنفذ الاتصال حيث توقم بعرضه في خانة الحالة أسفل هذه الأزرار.

Refresh: ويقوم هذا الزر بعملية تحديث للخدمات المفعّلة.

Explore: عند الضغط على هذا الزر يعرض لنا المجلد الذي يحتوي على الحزمة XAMPP.

Help: عند الضغط على هذا الزر ستظهر نافذة تشرح وظيفة كل عنصر في لوحة التحكم, كما يمكنك الضغط على زر Read me لمزيد من المعرفة.

Exit: للخروج من لوحة التحكم. 
تابع القراءة Résuméabuiyad

الدرس الثالث - آلية عمل PHP

8:11 ص | | | 0تعليقات

آلية عمل PHP


إن لغة PHP هي لغة من طرف المخدم فقط أي - وكما ذكرت سابقا- هي تبرمج وتعمل في المخدم أو السيرفر ولا يمكن للمستخدم الاطلاع على الكود الخاص بصفحة PHP عند استخدامه الانترنت.

وللتوضيح أكثر دعنا نتأمل هذا الرسم التوضيحي





يمكنك أن ترى إن السيرفر يحتوي على صفحات PHP, و Client أو العميل (المستخدم) عندما يطلب عنوان موقع ما مثلا, فأن المتصفح يرسل طلبا بواسطة بروتوكول http (Hyper Text Transfer Protocol ) إلى السيرفر يخبره بعرض الصفحة الفلانية وبذلك يستجيب السيرفر فيقوم مترجم لغة PHP بالبحث عن الصفحة وترجمتها للغة html ويرسلها عبر قناة الاتصال ضمن بروتوكول http على شكل صفحة ويب بلغة html إلى جهة العميل, حيث html هي اللغة الرئيسية لوصف صفحات الويب, وهذا له فائدتان, يتم استعراض صفحات PHP أسرع أولا ويبقي على سرية كود PHP ثانيا.

(ملاحظة:
قد يخطئ الكثيرين في التفريق بين html و http فالأولى تعني  Hyper Text Markup Languageوهي لغة برمجة لصفحات الويب الساكنة وتعد من اللغات ذات الاستخدام الواسع جدا, أما http فهو بروتوكول نقل النصوص التشعبية يقوم بنقل الأوامر الخاصة بطلب استعراض صفحات الويب بجانب العديد من البروتوكولات الأخرى مثل TCP بروتوكول التحكم بعملية النقل وغيرها.)

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

لقد أحدثت PHP ضجة عالمية عند ظهورها على منصة لغات البرمجة فهي الآن تحتوي على 180 مكتبة واسعة الطيف, وتصنف لغة PHP تحت مفهوم المصدر المفتوح الذي يضم أضخم المشاريع كنظام Linux وبرنامج Notepad++ .

بمرور الوقت ومتابعتك للدروس بتسلسل ستتكون لديك فكرة شاملة ومفصلة عن هيكلية لغة PHP وعملها في المخدم, وتعاملها مع قواعد البيانات ولغة MySQL حتى تصبح لديك القدرة لإنشاء موقع متكامل بنفسك, هناك العديد من المعلومات لم اذكرها لان – وكما قلت- هذه الدروس وضعت بالأساس للمبتدئين لذا لا أريد إرباك بعض الأشخاص الذين يعانون من رهاب البرمجة, لذا الفكرة الأساسية الآن هي تعلم PHP والهياكل الأساسية والضرورية لهذه اللغة, يمكنك تعلم أدق التفاصيل في وقت لاحق.

وقد كتبت هذه الدروس بشكل يسهل فهمه من قبل الأشخاص الذين لا يعرفون البرمجة, فقد كنت أتعلم البرمجة في وقت ما, فأنا لم أولد مبرمجا!. وعند كتابتي هذه الدروس كنت أتعلم أشياء عن لغة PHP لم أكن اعرفها, فنحن كلنا نتعلم شيئا جديدا, أليس كذلك؟

ربما هناك أشياء مختلفة لم تفهمها سببت لك قلقا, لا تقلق فهذه كلها كانت مقدمات تاريخية أو مفاهيم عمل لغة PHP, فأنك لم تبدأ دروس PHP بعد, في الدروس القادمة ستبدأ التعامل مع كل متعلقات لغة البرمجة PHP وجها لوجه وستكون لوحة المفاتيح شريكك الدائم في العميل لذا كن مستعدا للبدء في تهيئة البيئة المناسبة للبرمجة.
تابع القراءة Résuméabuiyad

الدرس الثاني - مقدمة للغة البرمجة PHP

8:09 ص | | | 0تعليقات

مقدمة للغة البرمجة PHP



دعنا من لغات البرمجة الأخرى ولنقف عند PHP وهي محطتنا الرئيسية...


PHP وهي حروف اختصار لثلاث كلمات Hypertext Pre-Processor حسب مترجمات شركة زند و تعني أيضا Personal Home Pages حسب مطور هذه اللغة رامسوس ليردورف وهي لغة برمجة متخصصة لبرمجة صفحات الويب الديناميكية أي الصفحات التي تتميز بمحتواها المتغير بمرور الزمن, ولا يمكن إنشاء برامج تعمل على سطح المكتب بهذه اللغة .

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

تم تطوير لغة PHP على يد مطور برامج اسمه رامسوس ليردورف عندما قام عام 1995 بإنشاء كود بلغة Perl/CGI ليتمكن من معرفة عدد الزوار الذين يقرؤون مقالاته, كان هذا الكود يقوم بوظيفتين معا, إظهار معلومات الزائر وكذلك إظهار عداد الزوار.

لم تكن هذه الميزات اعتيادية حينها فقد كان الويب شيئا جديدا لمعظم الناس, لذا قام بوضع هذا الكود مجانا للجميع وأطلق عليه اسم Personal Home Pages بعدها طور ليردورف هذا الكود ليصبح مكتبة فيما بعد والتي باتت تعرف PHP وبدا مطورين من مختلف أنحاء العالم الانضمام إلى ليردورف محافظين على اللب الأساسي للغة PHP.

في حزيران 1998 تم الانتهاء من النسخة 3.0 للغة PHP وبلغ مستخدمي هذه اللغة حوالي 50,000 حول العالم, واستمرت إضافة المئات من الدوال لتطوير هذه اللغة وبحلول عام 1999 وحسب إحصائية نت كرافت www.netcraft.com فقد بلغ مستخدمي هذه اللغة المتنامية بشكل سريع 1 مليون مستخدم حول العالم, وفي 22 مايو عام 2000 وبعد إصدار النسخة الرابعة من PHP نشرت نت كرافت استطلاعا يبين انه تم تثبيت لغة PHP على حوالي ثلاثة ملايين مخدم ويب .

الإصدار الرابع من هذه اللغة تحديدا قد احتوى على العديد من الميزات التي تشكل جزء من مميزات هذه اللغة بشكل عام.

وقد تتساءل لماذا أتعلم PHP بالذات؟ , يمكنني الإجابة عن سؤالك بالنقاط التالية: 

1- لغة PHP لغة سريعة التنفيذ نسبيا مقارنة بباقي لغات برمجة صفحات الويب الديناميكية, فمعظم اللغات يتم تحميل المترجمات على الحاسوب الشخصي لتتمكن من مشاهدة محتوى الصفحات المبرمجة بهذه اللغة أما لغة PHP فتتم ترجمتها فوريا في المخدم عند طلبها لتظهر في المتصفح الخاص بك ولن تحتاج لأي مترجم أو برامج دعم.

2- لغة PHP لغة مفتوحة المصدر (مجانية) وهو حتما سر نجاح وانتشار هذه اللغة فقد شارك في تطوير هذه اللغة عدد كبير من المطورين حول العالم بدون أن يفكروا دفع ضرائب شحن البرمجيات !

3- تتميز لغة PHP بقيود أمان عالية بما يتعلق بتصاريح المستخدمين وتخويل الدخول لقواعد البيانات ..فيمكنك التحكم بعدد الاتصالات بقاعدة البيانات مثلا أو تحديد المستخدمين الذين يستطيعون مشاهدة صفحة ما.

4- السهولة, تم الجمع بين مميزات C و Perl لتعطي لغة أكثر سلاسة ومتانة وفي نفس الوقت تم التخلص من عادات إدارة الذواكر ومعالجة النصوص وغيرها من المهام المعقدة التي كانت في لغات C و Perl .

5- لغة PHP لغة كائنية التوجه OOP أي تعتمد على الكائنات في كثير من المهام, وقد ظهر مفهوم OOP في PHP الإصدار الرابع, رغم إن الإصدار الرابع لم يكن يمثل مبدأ OOP بالشكل الكامل إلا انه وضع حلولا لعديد من تطبيقات الويب مما زاد من استحسان العديد من مبرمجي الويب.

6- تعمل لغة PHP على جميع الأنظمة بكفاءة عالية مثل Linux و Unix و Windows وهذا لا يتوفر بباقي اللغات فلغة ASP.Net على سبيل المثال لا تعمل إلا على خوادم نظام ويندوز .

ربما لم تفهم الكثير من المصطلحات مثل OOP وإدارة الذواكر وغيرها, فلا تقلق سيتم شرحها لك لاحقا.

بعيدا عن الأسباب التقنية فهنالك أسباب أخرى تجعل PHP أفضل لغة يتعلمها المبتدئين حسب رأيي الخاص: 

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

- في الآونة الأخيرة أصبح الويب هو وسيلة مهمة لا تتجزأ من حياتنا لذا زاد الطلب على الأشخاص الذين يقنون لغات برمجة الويب و PHP بشكل خاص كبرمجة تطبيق لحجز المقاعد لشركة طيران ما, أو إنشاء موقع اجتماعي قد يحظى بشهرة واسعة كموقع فيس بوك مثلا.

- اعتقد أن الوقت المستغرق لتعلم أي لغة أخرى هو أطول من الوقت لتعلم لغة PHP ولكن على أية حال فهذا يبقى شيء متعلق بالتفضيل الشخصي أو الميول النفسي.

- الأعمال الحرة أو Freelancing هذا مصطلح قد يكون قديما في حياتنا العادية لكنه جديد في عالم الويب فالآن تستطيع عرض خدماتك على الشركات لتقوم بالعمل معهم وأنت في منزلك لذا فكرة عمل مبرمج ويب كوظيفة ثانوية ليست بالفكرة السيئة إطلاقا.
تابع القراءة Résuméabuiyad

الدرس الاول - ماهي البرمجة؟

8:05 ص | | | 0تعليقات

ما هي البرمجة؟


البرمجة هي ببساطة عملية إعطاء تعليمات لجهاز الحاسوب ليقوم بمهمة معينة أو عدة مهام وهذه التعليمات تكون بلغة يفهمها الحاسوب ولحسن الحظ هناك أشخاص يفهموها أيضا يسمون (مبرمجين) الذين ستصبح واحدا منهم بانتهاء دروس php بإذن الله . 

لا تفكر بما هي تلك التعليمات, حسنا بعدما أصبحت لديك معرفة سطحية بلغة البرمجة دعنا نتعمق قليلا. 

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

ربما كلمة تعليمات مبهمة وصعبة الفهم قليلا, في الحقيقة إن تلك التعليمات تسمى بلغات البرمجة ولغات البرمجة كثيرة بكثرة الشركات وتنافسها, وبالطبع لكل لغة برمجة محاسنها ومساؤها, لا أريد أن نخوض نقاش حاد حول مزايا لغات البرمجة الآن, لكن لنتعرف على بعض منها(C, C++, Pascal, Visual Basic, PHP, ASP.Net…). 

ولعلك قد سمعت ببعضها أو قد درستها في مرحلة ما. 

هل قال لك احد أن البرمجة تحتاج لمهارات في الرياضيات؟ 

في الواقع لدي خبر سيء والآخر جيد. 

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

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

بالرجوع لتعريف البرمجة, ربما كلمة تعليمات مبهمة وصعبة الفهم قليلا... في الحقيقة إن تلك التعليمات تسمى بلغات البرمجة ولغات البرمجة كثيرة بكثرة الشركات وتنافسها, وبالطبع لكل لغة برمجة محاسنها ومساؤها...

من لغات البرمجة المشهورة:

· C و C# و Visual Basic و ASP هذه بعض اللغات التي قامت ميكروسوفت بإنتاجها .

· JAVA وهي لغة برمجة مرنة قامت بإنتاجها شركة صن ميكروسيستمز ولغة جافا ذات استخدامات واسعة جدا.

· PHP وهي لغة برمجة مفتوحة المصدر تدعمها شركة زند وهي لغة مخصصة لبرمج صفحات الويب.

إذن لدينا نوعين من لغات البرمجة, لغات برمجة مخصصة لإنشاء صفحات الويب وتطويرها ولغات أخرى متخصصة بإنشاء البرامج التي تعمل من سطح المكتب.

(لقد تم ذكر مصطلح (المصدر المفتوح) أكثر من مرة, وربما تتساءل ماذا كان يعني, إن المصدر المفتوح هي رخصة دولية تنادي بحرية استخدام الكود البرمجي أي عندما نقوم بإنشاء برنامج أو صفحات ويب ضمن لغة PHP (وهي لغة أنشئت تحت رخصة المصدر المفتوح) فهي تكون مجانية للجميع إذا قمنا بنشرها على المواقع المختلفة ويحق لأي احد التعديل على الكود البرمجي الذي أنشأته أو تطويره. يمكنك الاطلاع على المزيد بزيارة موقع منظمة المصدر المفتوح http://www.opensource.org )

تابع القراءة Résuméabuiyad

إضافة قائمه بشكل خرفي وجميلة فعلا وهي قائمه توضع تحت الناف بار

5:57 ص | | | 0تعليقات

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

قائمه بشكل خرفي وجميلة فعلا وهي قائمه توضع تحت الناف بار


طريقة التركيب : 

ادخل مدونتك .

التخطيط .

إضافة اداة HTML/JavaScript.
انسخ هذا الكود والصقه : 

التعديلات على الكود :
استبدل ( اسم-الموضوع ) بالعنوان القسم الذي ترغب فيه 
استبدل ( وصف-الموضوع ) بفقرة صغيرة تكون هي وصف القسم
تابع القراءة Résuméabuiyad

سلايدشو لمدونات البلوجر بأستخدام الجافا سكربت

2:37 ص | | | 0تعليقات
السلام عليكم ورحمة الله وبركاته

أقدم لكم اليوم عارض الصور منزلقة سلايدشو لمدونات البلوجر بأستخدام الجافا سكربت وبدون مسج أي (jQuery) أو فلاش(flash)
 خفيف جدا على المدونة من ناحية سرعة التحميل أو التصفح يمكنك من هذه الأضافة عرض مواضيع المدونة الأكثر مشاهدة وتعليقا من قبل زوارك بحيث تقوم بوضع الصور وربطها بمحتوى  سهل التحكم فيه فبإمكانك التعديل عليها بسهولة فأذا أردت زيادة عدد الروابط والصور فيمكنك ذلك أو أذا أردت التقليل منها
 كذلك الأضافة تحتوي على زر التمرير أي التنقل في مواضيع الموضوعة في السلايد عارض الصور 

كما أن يمكنك التحكم في عرض وأرتفاع السلايدشو كما يحلو لك

متوافق مع المتصفحات :فايرفوكس.أكسبلور.قوقل كروم
صور للمعاينة الأضافة 
سلايدشو بلوجر

عارض الصور لمدونات البلوجر

طريقة تركيب الأضافة 
1-لوحة التحكم 
2-تصميم
3-أضافا أداة
4- أختار
تهيئة HTML/JavaScript
ثم أضف الكود التالي داخل الصندوق
<style type="text/css">

 /* JavaScript Image Slider By http://mdonti-n.blogspot.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 right: -4px;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGxCrx4y14DohT1uLZnhWvUGjz9v99-zQZgVBJzxAIU810YTFKesXv73vedmpO7moOp1YRdu7pkOhAvPXOhWLf9-bPfu2a-mDdbHJdacBK8HA1yvCvokhFqaGqqcLBdz0uNrfDa8Tqw/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 right: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 right: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 15px/21px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 right: 190px;
 width: 150px;
 background: none;
 padding-right: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QOrdUa9FZcsXC2WrBo-H_448gFQf_H9N7RK8lb__xly1Ud6oZEM4Imx_aU5pLD3hvsn5Q3wTzHho4s7jITxN9m0uMUwed51mH0ynzW54Yj5D4mv0kyLM-RCbGmltQyxs4RFcutxVPw/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
 float: right;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-left: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNtKpNghdge4PXqo4ea2rVjCwKjIGEnYPwnMlt-LMJbPwOZBqsIgPv6WkdHERJkLrE8LFObD1xctJQOokvo-9wpq1tloKHG5epXGRFm6WxtoNKfQE6jhmoCWnuXyjr36gRIhPMQ06_dA/s1600/mdonti-n.blogspot.com-1.jpg" alt="عارض الصور من مدونتي نت "/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrQp12hMfIDvdqEYGASHlZ6zWMXR2d1v-b9YRqADtsHFmf6mvtSathgD-eOLnM0-FWZ5DKq8Bma36Q39mG0xMNxiT31XAg2fSbdnHVcT6r3VB6tHasyRl1MW0jQobRT0u9DN45nu6Nw/s1600/mdonti-n.blogspot.com-2.jpg" alt="معرض الصور المنزلقةhttp://mdonti-n.blogspot.com"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLwP6U053vFxCEx7pOYejq29BQ3nQaAt-cK8QqKRP3wEEG-3DIJrY5OBt94xSbdNe2i5HECHxZnNeRRR4lLpRtkVjOsoPVLQdvmYVHvCf0oDsyn3qI_-HIp50XBjR7yeP0oSLC6oehg/s1600/mdonti-n.blogspot.com-3.jpg" alt="سلايد للصور مدونتي نت"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNIwls3_OzlrIfGD_YMt-2Z5GPo5fCL-Zu_rf9WltR5b11DDgJLmcVO4XQQqmwdw0fYqF3tJ8Ad9Khqf4W_p7ZI1qrGJ-03l-JQcnZGMAgcbEkb7LEe3T6zBkSD1BGyujf71Datfo5Q/s1600/mdonti-n.blogspot.com-4.jpg" alt="نقية جافا سكريبت. لا jQuery. لا فلاش."/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fW8JjRDqAbx0WAUKr-gc76VfJp9SQp_EiDIwa786GL27IaR3qlUs8Usi3EoUSVBN5wxb7mvYXvrsb5mquq3fdFOsqYSUBXzI8IXkLIS5chfaMooZer3mDMMDYLVJwc7vM1B5VDQr0A/s1600/mdonti-n.blogspot.com-5.jpg" alt="مدونتي نت"/></a>
                </div></div>
 كيف يمكنك التعديل على الراوبط والصور والعناوين؟؟

الروابط المشار لها بلون الأحمر هي روابط الصور

الكتابة المشار لها بلون الأزرق هي العناوين

والمربع # المشار لها بالأزرق الفاتح ضع مكانها روابط المواضيع


طريقة زيادة عدد العرض في السلايدشو عارض الصور؟؟

في الاكواد الخاص بروابط المواضيع وصور أضف في أخر الكود أي بعد 

</a>
الكود التالي

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fW8JjRDqAbx0WAUKr-gc76VfJp9SQp_EiDIwa786GL27IaR3qlUs8Usi3EoUSVBN5wxb7mvYXvrsb5mquq3fdFOsqYSUBXzI8IXkLIS5chfaMooZer3mDMMDYLVJwc7vM1B5VDQr0A/s1600/mdonti-n.blogspot.com-5.jpg" alt="مدونتي نت"/></a>
 كيف يمكنك التحكم في حجم السلايد  ؟؟

في أول الكود السابق سوف تجد

 width: 500px;
 height: 218px;

وهي محدد بلون الأخضر

 width: العرض;
 height: الطول;
غيرها كما تشاء وبما يتوافق مع مدونتك

 وسلام عليكم ورحمة الله وبركاته

الموضوع الأصلي مدونتي نت: http://mdonti-n.blogspot.com/2012/07/Slideshow-for-Blogger-Blogs.html#ixzz23gJdORul
تابع القراءة Résuméabuiyad

اضافة تعليقات القراء لمدونات بلوجر

5:54 م | | | 0تعليقات
اضافة تعليقات القراء لمدونات بلوجر


اضف اداة
الكود

استبدل رابط 
برابط مدونتك
تابع القراءة Résuméabuiyad

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

10:05 ص | | | 0تعليقات
مرحباً بكم اخواني 

درسنا اليوم هو انشاء تطبيق اندرويد لمدونتك او موقعك 

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

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

الشرح 

سيتم انشاء التطبيق عن طريق موقع Appsgeyser

قم بالدخول لموقع Appsgeyser 
اضغط على Create app now
ثم اختر Website

قم بادخال رابط مدونتك (من الافضل اضافة في اخر الرابط /?m=1 للحصول على نتيجة افضل ليصبح الرابط بهذا الشكل

وقم باكمال باقي البيانات (اسم الموقع ,وصف الموقع ,الفئة ....)
الان لانشاء التطبيق اضغط على Create app

قم بملء بيانتك الشخصية (الاسم ,اللقب,الايميل,......)

في الاخير ستظهر لك صفحة تحميل التطبيق


المصدر : معهد بلوجر
تابع القراءة Résuméabuiyad

التبادل الاعلاني

back to top