إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

نموذج تصميم قوالب بلوجر ( نموذج Fixed Width )

| 31 تعليق

جميع قوالب بلوجر بكل تصاميمها تتمحور حول نموذجين أو ثلاث ، هذه النماذج هي عبارة عن أكواد HTML و الـCSS تقدم البنية الداخلية للقالب ، أي مكان تموضع مختلف مقاطعه و أدواته ، و هذا ما يخلق لنا إمكانية تصنيف القوالب حسب عدد الأعمدة ، و مكان العمود الجانبي sidebar إلخ ... . سنرى في هذا الفصل كيفية إنشاء النموذج الأبسط على الإطلاق في قوالب بلوجر ، نموذج يتكون من عمودين فقط : عمود الرسائل الإلكترونية و عمود جانبي sidebar ، إلى جانب الهيدر و الفوتر طبعا .

الفهرس
دروس تصميم القوالب
الفصل الأول : قوالب بلوجر ... بدايتك في التصميم .
الفصل الثاني : قوالب بلوجر ... العناصر الأساسية .
  1. تقديم النموذج .
  2. تصميم الهيدر .
  3. تصميم الـMenu .
  4. تصميم وسط الصفحة .
  5. تصميم الفوتر .

تقديم النموذج

يتحدد نموذج التصميم كما يلي :

عرض ثابث :
يتميز هذا النموذج بعرض ثابث بحيث مهما إختلفت أبعاد شاشة المستخدم فإنه يظهر بنفس الأبعاد ، فبعرضه الثابث يسهل النموذج علينا تصميم باقي عناصره ، حيث تكون عروض هذه العناصر بالبكسل و يسهل التحكم بها ، كما من خلال العرض الثابث نضمن أن القالب يظهر بنفس الشكل في جميع شاشات المستخدمين و في جميع المتصفحات .
و لتحقيق مسألة العرض الثابث نستخدم عنصر <div> بسيط نخصصه بعرض محدد ، و هو العرض الثابث الذي نتحذث عنه حيث نستخدم خاصية width ، و بعدها نضيف خاصية margin:0 auto لكي تجعل المدونة تظهر في وسط الشاشة تماما .

ضبط مواضع الأعمدة :
تكون هذه الأعمدة دائما عبارة عن مقاطع . فلضبط مواضع هذه الأعمدة نضعها داخل عنصر <div> حيث نخصصه بـعرض ثابث ، مع إضافة خاصية التعويم float .
خاصية تعويم العناصر float هي من تلعب الدور الأهم في التصميم ، فالأعمدة تأتي لأول مرة في وسط القالب ، و خاصية float هي من تزيح هذه الأعمدة إلى أمكنتها المحددة .
يتكون نموذج التصميم الذي نحن بصدد التكلم عنه من 8 مقاطع :
  • الهيدر يتكون من مقطعين ، الأول يحتوي على أداة رأس الصفحة ، و الثاني إختياري يمكن أن يحتوي على أي شيء لكننا نضعه دائما من أجر البانر الإعلاني حيث تكون أبعاد هذا المقطع هي 60 × 468 .
  • الـMenu : هو نفسه عبارة عن أداة قائمة الروابط أو أداة الصفحات بحيث نجعل منها قائمة أفقية باستخدام خصائص الـCSS .
  • وسط الصفحة : يتكون من مقطعين ، المقطع الأول عريض و يحتوي على أداة رسائل المدونة الإلكترونية ، أي المواضيع و المقالات و التدوينات ، ثم المقطع الثاني يكون بالجانب يمثل القائمة الجانبية Sidebar يحتوي على عدد كبير من الأدوات .
  • الفوتر : يحتوي على ثلاث أعمدة ، يمكن أن يحتوي كل عمود على مالانهاية من الأدوات إلى أننا نكتفي باداة واحدة و ذلك للمحافظة على تناسق القالب .
خصائص الـCSS :
خصائص الـCSS هي أكثر الأشياء التي يجب أن نتقنها لتصميم أحسن القوالب ، لأنه يمكن أن يكون لقالبين نفس بنية الـHTML و خصائص CSS مختلفة فيظهران مختلفين عن بعضهما كل الإختلاف ، فعن طريق الـCSS نحدد الألوان و الخلفيات و الخطوط و غيرها .
معضم الخصائص يجب أن تكون معروفة حق المعرفة عندك لكي تقوم بالتصميم ، أما بعض التقنيات يمكن تعلمها بسهولة إنطلاقا من الأمثلة فقط . سنرى في الفصل القادم طريقة تصميم الـMenu ، فالـMenu كما قلنا سابقا هو عبارة عن أداة قائمة الروابط ، و كما نعلم قائمة الروابط تأتي بشكل عمودي دائما ، و لجعلها أفقية أفقية لا بد من إستخدام بعض تقنيات الـCSS . أما في هذا الفصل سنركز على بنية القالب من ناحية الـHTML فقط  .

الإضافات :
أقصد بالإضافات تلك الأدوات الخارجية التي نضيفها بأنفسنا كترقيم الصفحات و المواضيع ذات صلة و القوائم المنسدلة إلخ ... تلك الأدوات غير موجودة في المجموعة التي تقدمها بلوجر ، يتم تصميمها من طرف المستخدمين الخبراء في مجال البرمجة و التصميم فقط  .
يتم إدخال بعض تلك الإضافات في أداة HTML/Javascript ، أما معضمها فيتم إدخاله عبر تصميم HTML القالب .
غرضنا من هذه الإضافات هو أننا سنقوم بإدخال بعضها في تصميمنا كأداة ترقيم الصفحات و المواضيع ذات صلة حيث سنقوم بالتعمق قليلا في أكواد الـXML الخاصة ببلوجر ، و هذا ضروري لكي تندمج هذه الإضافات في قالبنا بطريقة صحيحة و تصبح جزءا لا يتجزء من التصميم .

تخصيص الأدوات
هذا هو عملنا الكبير الذي يستلزم الصبر و الخبرة ، فبلوجر تقدم أدواتها ببنية HTML موحدة ، من خلال إستخدام برنامج Firebug الموجود في المتصفح موزيلا  ، أو الخيار Inspecter l'element الموجود في غوغل كروم  نستطيع الإضطلاع على بنية كل الأدوات و التعرف على مختلف عناصرها و بالتالي التمكن من تعديلها بخصائص الـCSS المناسبة ، و هنا تظهر أهمية الـCSS في عملنا هذا حيث يشكل تخصيص الأدوات 70% من ما نقوم به في التصميم .
بعض الأدوات كقوائم الروابط أو التسميات تكون بنيتها بسيطة بحيث من خلال مثال واحد يمكننا تعلم كيفية التعامل معها بسهولة ، ناهيك عن أننا قد نبدع فيها عدة تصاميم باستخدام ما نعرفه في الـCSS . لكن هناك أداة صعبة قليلا و هي أداة رسائل المدونة الإلكترونية لأن بنيت الـHTML الخاصة بها كبيرة و تحتاج إلى نوع من التركيز و الصبر .

لكن على العموم يبقى تصميم قوالب بلوجر عملا سهلا و بسيطا جدا لأنه لا يتطلب معرفة كبيرة بالبرمجة و التصميم ، فلغة HTML و الـCSS كافيتان لتصميم أحسن القوالب  .


تصميم الهيدر

أولا و قبل كل شيء و كما رأينا في الفصل السابق يكون لدينا قالب فارغ بهذا الكود :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[


]]></b:skin>
</head>
<body>


</body>
</html>

سنشتغل في باقي هذه الفقرة داخل العنصر <body> فقط ، حيث سنضع العناصر الضرورية لإنشاء هيدر يتكون من مقطعين .
لا يجب أن ننسى بأننا نشتغل على نموذج بعرض ثابث لذلك سنضع عنصر <div> داخل بدن الصفحة مع إعطائعه العرض 990px ، و لا ننسى خاصية margin:0 auto التي ستجعل المدونة تتوسط الصفحة .
أي أننا سنكتب داخل العنصر <body> ما يلي :

...
<body>
     <div class="centerat" style="width: 990px; margin: 0 auto;">

     </div>
</body>
...

العرض 990px ليس مفروضا ، يمكنك أن تضع عرضا اخر حسب رغبتك ، كل ما في الأمر هو أن العرض 990px مناسب جدا لأن المدونة تظهر واضحة في جميع الشاشات التي أبعادها أكبر من أو يساوي 768 × 1024 .

و الان بعد ما وضعنا عنصر توسيط المحتوى ( أقصد الـ<div> السابق ) ، حان الوقت لتصميم هيدر المدونة .
هيدر المدونة عبارة عن عنصر <header> يحتوي على مقطعين ، المقطع الأول يعوم نحو اليمين و هو يحتوي على أداة رأس الصفحة ، و المقطع الثاني يعوم نحو اليسار و يحتوي على مساحة البانر الإعلاني ، لذلك فإننا نضع المقطعين داخل عنصري <div> نخصصهما بـfloat و width اللازمين . إليك المثال :

...
<div class="centrat" style="width: 990px; margin: 0 auto;">
    <header>
        <div style="width: 490px; float: right;">
            <b:section id="header" />
        </div>
        <div style="width: 468px; height:60px; float: left;">
            <b:section id="banner" maxwidgets="1" />
        </div>
        <div style="clear: both;"/>
    </header>

</div>
...

كما تلاحظ ليس هناك شيء خارق للعادة ، فكما رأينا في الفصل السابق المقاطع هي عبارة عن عناصر <b:section> .
العنصر </ "div style="clear: both> يمنع العناصر العائمة من الخروج عن إطار الهيدر ، نضيف دائما هذا العنصر الصغير بعد العناصر العائمة .
بعدما أدخلنا المقاطع الخاصة بالهيدر ، حان وقت إدخال الأدوات . و الأداة التي سنقوم بإدخالها هي أداة رأس الصفحة .
الطريقة سهلة جدا و لقد رأيناها في الفصل السابق . نقوم بحفظ ما وصلنا إليه و نتوجه إلى واجهة التخطيط ، نضيف أداة رأس الصفحة بالطريقة العادية ، و نعود إلى واجهة تحرير HTML .

سنجد على مستوى أكواد القالب أن هناك تغييرا ما حيث سنلاحظ أن عنصرا <b:widget> أُضيف من تلقاء نفسه داخل عنصر المقطع  ، هذا العنصر هو الأداة نفسها ، أي أداة رأس الصفحة و ذلك يتبين من خلال السمة Type التي تكون في هذا العنصر الجديد .
فكما نعلم أداة رأس الصفحة تكون ثابثة في معضم القوالب ، و نحن سنحافظ على التقليد و سنقوم بجعلها ثابثة عن طريق تغيير قيمة السمة locked إلى true .

...
<b:section id="header">
<b:widget id='Header1' locked='true' title='...(رأس الصفحة)' type='Header' />
</b:section>
...

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

واجهة بلوجر الجديدة لا تعطي الترتيب صحيحا لذلك توجه إلى الواجهة القديمة 

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

تصميم الـMenu

الـMenu أو ببساطة القائمة الأفقية هو عبارة عن مقطع يحتوي على أداة واحدة و هي أداة قائمة الروابط . سنقوم بتصميمه بنفس الطريقة المعتمدة ، سنضع مقطعا معرف بـid ما ، و سنذهب إلى واجهة التخطيط حيث سنجد مقطعا جديدا قد أضيف ، سندخل أداة قائمة الروابط بالطريقة العادية ، ثم سنعود إلى واجهة تحرير HTML و نغير قيمة السمة locked لنجعل من الأداة ثابثة .

حسنا العملية الأولى هي إضافة المقطع . مباشرة بعد وسم إغلاق الهيدر ( <header/> ) سنكتب العنصر <b:section> الخاص بالقائمة :

...
</header>
<b:section id="menu" maxwidgets="1"/>

...

لا نحتاج إلى عنصر <div> يحتوي على سمتي float و width لأننا نريد من القائمة أن تظهر على عرض الصفحة بأكمله و في الوسط .
الان نتوجه إلى واجهة التخطيط حيث سنجد أن هناك مقطعا جديدا ، نضيف فيه أداة قائمة الروابط كالعادة دائما ، يمكننا أن نضيف أداة الصفحات أيضا ، و سنحصل على نفس النتائج .
من الضروري أن نضع بعض الروابط في الأداة حتى نستطيع تخصيصها بالـCSS عندما نريد أن نجعل القائمة أفقية .

بعدما نعود إلى واجهة تحرير HTML سنجد العنصر <b:widget> الخاص بأداة قائمة الروابط ، و هنا سنقوم بتغيير قيمة سمة locked من جديد لنجعل من الأداة ثابثة .

...
<header>
<b:section id="menu" maxwidgets="1" >     
    <b:widget id='LinkList1' locked='true' title='' type='LinkList'/>   
</b:section>

...

و ستكون النتيجة في الأخير :


أترى كيف أن القالب يأخذ بنيته على مهل و بسهولة ، فكما قلنا سابقا سنحتاج إلى معرفة الـHTML و الـCSS فقط .

تصميم وسط الصفحة

بنفس الطريقة مرة أخرى نقوم بتصميم وسط الصفحة . يتكون وسط الصفحة من مقطعين ، الأول عريض و يحتوي على أداة رسائل المدونة الإلكترونية ، و الثاني صغير يلعب دور الـSidebar .

بعد اخر عنصر أضفناه ، نضيف العنصر الذي سيحمل كلا من المقطعين ، و هو عبارة عن عنصر <div> سنميز بـclass معين لكي نستطيع تخصيصه بالـCSS فيم بعد .
داخل هذا العنصر سنضع المقطعين حيث سنخصص للمقطع الأول عرضا كبير يصلح للتدوينات و المواضيع ، و الثانية عرضا صغيرا يصلح للإعلانات .

...
</b:section>
<div class="page">
    <div style="float: right; width: 300px;">
        <b:section id="sidebar" />
    </div>
    <div style="float: left; width: 660px;" >
        <b:section id="posts">
            <b:widget id="Blog1" locked="true" type="Blog" />
        </b:section>
    </div>
    <div style="clear:both" />
</div>

...

كما تلاحظ ، لقد أدخلنا أداة رسائل المدونة الإلكترونية مباشرةً ، هذا لأنه لا يمكننا إدخالها بالطريقة السابقة . لماذا ؟ - لأن أداة رسائل المدونة الإلكترونية غير موجودة في قائمة الأدوات التي تقدمها بلوجر .
لقد خصصنا العرض 300px للـSidebar ، و العرض 660px للمواضيع ، و حسب قيم الخاصية float نلاحظ بأن الـSidebar ستكون في اليمين و التدوينات في اليسار . يمكننا قلبهما إن أردنا و ذلك بتغيير قيم الخاصية float .

هكذا نكون أنهينا تصميم وسط الصفحة ، و النتيجة ستكون كما يلي :


أليس جميلا . يأخذ القالب بنيته رويدا رويدا . بالنسبة للمظهر الخارجي للقالب فإنه يدخل ضمن نطاق الـCSS ، فالـCSS هي من تحدد الملامح الخارجية للقالب ، أما الان فنحن نقوم بتصميم بنية الـHTML فقط ، لذلك لا تهتم بالمظهر الخارجي في هذه المرحلة  .

تصميم الفوتر 

يتكون الفوتر من ثلاث أعمدة ، أي من ثلاث مقاطع ، حيث تكون المقاطع على نفس المستوى ، و يتم تحقيق ذلك من خلال خاصية float التي نضعها في العنصر <div> الذي يحتوي على المقطع .
أولا نضع العنصر الفوتر <footer> ، و هو العنصر الذي يحتوي على المقاطع الثلاث و كل شيء ، المقطع الأول يعوم نحو اليمين ، المقطع الثاني يعوم نحو اليسار ، و المقطع الثالث يتوسط الصفحة .
بالنسبة لتموضع المقطعين الأول و الثاني ، فالطريقة واضحة جدا ، نستعمل خاصية float مرة أخرة ، بينما المقطع الثالث و الذي يجب أن يتوسط الصفحة فإننا نستخدم خاصية margin:0 auto التي ستجعله يتوسط الصفحة ، و هي نفسها الخاصية التي وضعناها للعنصر <div> الذي يحتوي على تصميمنا كله و الذي يجعل المدونة تتوسط الصفحة .
أما بالنسبة للعروض فيجب الإنتباه قليلا هنا : العرض الكلي للمودنة هو 990px ، و عند تقسيم 990px على 3 فإننا نحصل على 330px أي أن كل مقطع يجب أن يأخذ عرض 330px ، إلا أننا سنضع عرض أقل و هو 320px و المسافة الباقية سنباعد بها المقاطع قليلا عن طريق الـCSS .

...
</div>
<footer>
    <div style="float: right; width: 320px;">
        <b:section id="footer1" />
    </div>
    <div style="float: left; width: 320px;">
        <b:section id="footer2" />
    </div>
    <div style="margin: 0 auto; width: 320px;">
        <b:section id="footer3" />
    </div>
    <div style="clear:both"/>
</footer>
...

يرغب الكثيرون في وضع حقوقهم بعد الفوتر ، لذلك فبعد عنصر الإغلاق <footer/> نضع <div> اخر يحتوي على تلك الحقوق .

..................
            </footer>
            <div class="copyright">        
                المدونة لدى بلوجر ، من تصميم عاشق النت.....    
            </div>
        </div>
    </body>
</html>

بهذا نكون قد أنهينا تصميم بنية القالب و لم يتبقى إلى إلا 70% من مراحل التصميم  ، و التي تتمثل في الـCSS .
أما ما نتوصل إليه أخيرا فهو البنية التالية :


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

يمكنك تحميل النموذج الذي توصلانا إليه في الاخر من الرابط :   تحميل النموذج
مساحة إعلانية

تعليقات بلوجر

  1. جزيت خيرا استاذي

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

    ردحذف
  2. ما شاء الله أخي عاشق النت صراحة احيانا ما أرى مدونة أنيقة ومنظمة كهذته الذي بها الله يوفقك

    ردحذف
  3. شكرااا لك

    http://4we-eb.blogspot.com/

    ردحذف
  4. هل من اللمكن رفع النموذج على موقع اخر لأن موقع الميديا فاير لا يعمل !! ..

    ردحذف
  5. في الواقع أخي ، رابط التحميل يعمل ، لأنني أرفع ملفاتي في ميديافاير تحت حسابي

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

    ردحذف
    الردود
    1. موقع ميديا فاير لا يعمل في مصر !!! لم أكن أعلم ذلك حقا ، على كل حال لقد أعدت رفع الملف على موقع مخزن ، يمكنك تحميله الان .
      http://www.m5zn.com/d/?e89522493cdb158

      حذف
  7. موقع ميديا فاير يعمل في مصر
    وقد تم تحميل النموذج بنجاح
    شكراً لك أخي الحبيب عل الدروس التي تقدمها

    ردحذف
  8. الله يجزيك الخير يارب
    أرحب بك في مدونتي
    www.kiswah-sy.com

    ردحذف
  9. أخي عاشق النت،
    أنا أنصحك بإصدار كتب تعليمية لما تعرفه
    لعدة أسباب:
    أولا: الناس تحصل على مراجع كاملة وليس فقط مقالات، وهذا يفيد أكثر
    ثانيا: أنت تحتفظ بحقوق النشر كاملة باسمك
    ثالثا: تكسب ربحاً من هذا الفعل
    رابعا: تبني لنفسك أسماً أكبر من هذه الأعمال

    هذا أحد كتبي السريعة طلبت منه نسخة ولم يكن فيه أي خطأ مطبعي أو أي شيء أنا تعلمت كيف أعالج كل الأخطاء التي تحدث عند كتابة كتاب باللغة العربية، لأن الموقع مخصص للغلة الأجنبية
    http://www.lulu.com/shop/display-product.ep?pGUID=20120304

    يمكنك مراسلتي بأي وقت تريد، ولك جزيل الشكر

    ردحذف
  10. تم تطبيق هذا الشرح و في انتظار المزيدد، اسسسررررررررع فانا متلهف لاصدار اول قالب لي =)

    ردحذف
  11. السلام عليكم أخي عاشق نت كيف حالك إنشاء لله تمام أريد أن أسألك عن كيفية تصغير Menu لي هذه مدونة لأنه القائمة كبيرة و أريد وضع Menu صغيرة
    هذه المدونة http://testblognnn.blogspot.com

    و هذا رابط فيسبوك

    http://www.facebook.com/hasanixo

    Email: samoray.9@hotmail.com

    أنتظر ردك تحياتي

    ردحذف
  12. السلام عليكم...
    شكرا أخي على هذه الدروس الرائعة والمنظمة بشكل جميل وسهل..
    لقد استفدت منها كثيرا حتى أني قمت بطباعة دروس html/css على الورق..
    لكن أخي بالنسبة لقوالب بلوجر نرجو منك مواصلة الدروس حولها، فالمصادر العربية معدومة في هذا المجال..
    وحبذا لو قدمت لنا دورة بالصوة والصورة فهي أحسن..
    وشكرا

    ردحذف
  13. السلام عليكم
    اخي لدي مشكلة في قالب مدونتي وهو انه عند فتح الصفحة الرئيسية للمدونة وكنت قد وضعت فيديو يعمل اوتوماتيكيا في اي موضوع ( كاليوتيوب مثلا ) فيبدا عمل الفيديو واسمع صوته في الرئيسية رغم اني اكون في الصفحة الرئيسية وليس صفحة الموضوع
    كيف الحال
    راجع المدونة اخي وجزاك الله خير لو قدرت تفيدني http://koraegy2.blogspot.com/

    ردحذف
  14. شكراااااااااا http://gamalro7ek.blogspot.com/

    ردحذف
  15. اخى الكريم هل من الممكن تصميم قالب مثل قوالب احترافية تم عملها من قبل ولكن مع تغيير الالوان

    لانو نفسى اصمم هذا القالب

    http://yqeen.com/

    بس مع تغيير اشياء بسيطة هل من الممكن ذلك

    ردحذف
  16. هل يمكنك عمل لى قالب وا سارفع لك صورتة

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

    ردحذف
  18. السلام عليكم

    شكرا علي الشرح الرائع

    هل ضروري تعلم لغة Xml لأنشاء قالب انا اجيد Html css جافا سكريبت لاحظت استخدام وسوم Xml فهل يجب ان أتعلمها

    ردحذف
  19. ياأخى لماذا لا تكمل شرح هذا الموضوع طبقنا ماقلت عليه ومنتظريينك بشده تكمل بقية الموضوع وجزااك الله خير

    ردحذف
  20. http://www.hassobe.com/2013/02/mytemplate.html

    ردحذف
  21. ألف شكر ليييييييييييييييك

    ردحذف
  22. السلام عليكم

    مليون شكر على الدرس الذي تعبت حتى أجده

    بارك الله فيك

    و رحم الله والديك

    ردحذف
  23. ممكن تكملة الدروس لقد تم التطبيق وننتظر الباقي

    www.degolaspro.com

    soufianveg@gmail.com

    ردحذف
  24. الف شكر .. الله يوفقك

    انا صممت اول تصميم النهاردة

    ردحذف
  25. السلام عليكم ورحمة الله أخي أنا معجب ببعض الاضافات و الخدع على بعض المدونات و أريد اضافتها على مدونتي لكن لم نتطرق بعد ل css ولاحضتك أنك تزود body مباشرة بمعلومات ال css بالاضافة أخي الكريم لم أعرف و لم أستطع بدوري أن أستفيد من آدات inspecter element و أسخرج منها html و css لكي أشتغل بها على مدونتي اتمنى اني أوصلت لك المفهوم و أن تساعدني و أجرك على الله

    ردحذف
  26. ممكن حضرتك تصمملى قالب
    اميلى ahmed@fahmney.com
    الفيس بوك: www.fb.com/ahmedtarek01157085889

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة