jeudi 8 décembre 2011

ادوات مستخدمي المواقع - Google

d8acd988d8acd9841 
احدي خدمات Google المميزة لأصحاب المواقع هي خدمة ادوات مستخدمي المواقع وبأمكانك الاطلاع علي ماذا يقدم وكل الاسئلة المتعلقة بهذه الخدمة في مساعدة ادوات مستخدمي المواقع  و لنبدأ بالحصول علي هذه الخدمة نتعرف علي ابرز مميزاتها ومن ثم نشرح كيفية الحصول عليها



اهم استعلامات البحث

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

أخطاء الزحف

تقدم صفحة أخطاء الزحف تفاصيل حول عناوين URL في موقعك والتي حاول بوت قوقل الزحف إليها ولكنه لم يتمكن من الدخول. كما توفر صفحة أخطاء الزحف على الجوّال تفاصيل حول المشكلات التي واجهتها بوت قوقل أثناء الزحف إلى عناوين URL على موقع الويب الخاص بالجوّال.

ملف Sitemap

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

الروابط إلى موقعك

يمكنك إجراء بحث في Google باستخدام link: operator للبحث عن عينات من الروابط إلى أي موقع. على سبيل المثال، يعرض [link:www.google.ae] قائمة بصفحات الويب التي تشتمل على روابط تشير إلى صفحة Google الرئيسية. يرجى ملاحظة أنه يجب عدم ترك مسافة بين ":link" وعنوان URL لصفحة الويب.

الكلمات الرئيسية


تسرد صفحة الكلمات الرئيسية أبرز الكلمات الرئيسية التي عثر عليها محرك Google عند الزحف إلى موقعك.
Untitledddd
والكثير من الخدمات ومآتم ذكره اعلا تم اقتباسه مساعدة ادوات مستخدمي المواقع وألان نشرح كيفية التسجيل و التفعيل لهذه الخدمة لأصحاب مدونات بلوجر  و اولا يجب عليك ان تكون تمتلك مدونة و ان كنت لا تمتلك فأطلع علي الدروس الخاصة من هنا و هنا  وبأمكانك زيارة القسم الخاص بالدروس من هنا و يجب عليك الحصول علي gmail و لمعرفة كيفية الحصول عليه من هنا    

اضافة ادوات مستخدمي المواقع


ندخل علي Google ونذهب علي حسابي موضح بالصورة ادناه
Untitled ونضغط علي ادوات مستخدمي المواقع
sss و بعد الدخول نشاهد ايقونة اضافة موقع
image نضغط عليها ….
image
ونضغط متابعة
image
ننسخ الكود الموجود في المربع الاحمر ونذهب الي المدونة ونختار تخطيط تحرير HTML ونوسع القالب image ثم نضع الكود بعد الرمز <head>
image
ثم نختار معاينة ان لم تظهر اي مشاكل وظهرت المدونة طبيعة نختار حفظ القالب وان ظهرت مشكلة او اي شي اخر فتأكد من وضع الكود في المكان الصحيح بعد الضغط علي حفظ القالب نعود الي صفحة ادوات مستخدمي المواقع ونضغط علي تأكيد 
image بعد سيتم التحقق من موقعك وستظهر الصفحة كالتالي
image
اذا الصفحة لا يوجد فيها اي بيانات هنا تأتي مسألة الوقت فما عليك سو الانتظار حتى تظهر البيانات ولكن يجب علينا ان نعمل خطوة اخيره
اضافة ملف Sitemap نذهب الي يسار الصفحة من اسفل ونضغط علي ارسال ملف Sitemap بعد ما ننتقل الي الصفحة الاخري نضغط علي ايقونة
image
وهذي الخاصية لـ بلوجر فقط  نضغط علي ارسال ملف Sitemap  وندخل البيانات التالية طبعا سيكون موقعك موجود في البداية بهذه الصيغة 
image ندخل الكلمات التاليه من دون اي زيادة او مسافة
feeds/posts/default
ونضغط  Sitemap تقديم ملف
وكذلك نضيف ملف اخر بهذه الصيغة وبنفس طريقة الملف السابق ولكن هذه المرة ندخل هذه الكلمات
feeds/comments/default
ونضغط  Sitemap تقديم ملف
بعد الانتهاء سيكون شكل الملفات التي قدمناها علي هذا الشكل
image
وبعد فترة سنشاهدها بهذه الشكل
image

ما هو ملف الـ Sitemap  يمكنك لرجوع لقسم المساعده الخاص في Google لمعرفة ما هو الـ Sitemap  وماذا يقدم لأصحاب  المواقع علي هذه الروابط من هنا و هنا و هنا و هنا  و لمدونات بلوجر لا تحتاج  لعمل اي شى اخر سو ما عملنا بالخطوة السابقة 
وبعد فترة سترا احصائياتك في زيادة  وستظهر في هذه الشكل ( صور لموقعي في مستخدمي المواقع )
image

لي اي  استفسار او مساعده يمكنك مراسلتي او وضع استفسارك هنا

خرائط قوقل للمدونة Sitemap

صيانة المواقع
خرائط الموقع او المدونة تقوم بعمل خريطة لمواضيع وروابط موقعك ليقوم Google بأرشفتها , حيث انه صاحب المدونة او الموقع يعمل خريطة ويرسلها الي Google ليقوم Google بأرشفتها وفهرستها ضمن محرك البحث Google وهناك خرائط للجوال وخرائط للفيديو وخرائط للمواضيع وخرائط للتعليقات .
اذا ما يفيدنا من خرائط الموقع Sitemap لمدونات Blogger انها تساعدنا في ارشفة وفهرسة المدونة في محرك البحث .
طريقة عمل الخريطة لمدونة Blogger
كل ما علينا هو ان نذهب الي ادوات مشرفي المواقع  Google Webmaster Central ونذهب الي  حساب المدونة و بعدها الي ملفات Sitemap وبعدها الي زر ارسال ملف Sitemap .
image
بعدها نضغط علي زر ارسال ملف Sitemap
image
بعدها نضغط علي زر ارسال ملف Sitemap  وندخل البيانات التالية
  • ندخل atom.xml
  • ندخل feeds/comments/default  ( خريطة التعليقات )
  • ندخل feeds/posts/default
بعد ذلك سيكون  الشكل كهذا
image
اذا انت الان قدمت 26 صفحة من مدونتك الي Google وبعد فتره سيكون عناوين URL المهرسة الي 26 URL لكن لماذا فقط 26 ومثلا انا مدونتي تحتوي علي اكثر من 100 موضوع ! مشكلة انه هذه العناوين التي تم ادخالها سابقا لا ترسل سوى 26 URL و لزيادة عدد الـ URL يجب عليك ادخال الاتي
  • ارسل هذه الملف ان كان لديك اكثر من 26 URL
  • atom.xml?redirect=false&start-index=1&max-results=100

  • ارسل هذه الملف ان كان لديك اكثر من 100 URL
  • atom.xml?redirect=false&start-index=101&max-results=100

  • ارسل هذه ان كان لديك اكثر من 200 URL
  • atom.xml?redirect=false&start-index=201&max-results=100

  • ارسل هذه الملف ان كان لديك اكثر من  300 URL
  • atom.xml?redirect=false&start-index=301&max-results=100

  • ارسل هذه الملف ان كان لديك اكثر من 400 URL
  • atom.xml?redirect=false&start-index=401&max-results=100

  • ارسل هذه الملف ان كان لديك اكثر من 500 URL
  • atom.xml?redirect=false&start-index=501&max-results=100

وسنزيد الرقم 501 الي 601 او 701 الــــخ , اذا ما عملنا في الخطوات السابقة من الموضوع هو ان ارسلنا خريطة لمحرك البحث Google لندله علي مواضيع المدونة ليفهرسها و يضمها في الأرشيف لتظهر في نتائج البحث في Google ونكسب زيارات من محرك البحث Google . و يجب ان يكون لديك حساب في ادوات مستخدمي المواقع Google وان لم تمتلك هذه الميزة يجب عليك ان تزور هذه الموضوع 
ادوات مستخدمي المواقع – Google
ولكن ما العمل ان كنت اريد ان اعيد توجيهه خلاصات المدونة الي Feedburner ولتعرف اكثر حول هذه الموقع راجع المواضيع التالية
  • طريقة عمل القائمة البريدية للمدونة و المواقع Feedburner
  • القائمة البريدية – استكمال الشرح السابق
ان كنت تريد الحصول علي احصاءات لمشتركين الخلاصات RSS  فيجب عليك ان تنشئ حساب مثل شرحنا سابقا في الموضوعين المعروضين اعلا يجب عليك ان تذهب الي حسابك في المدونة وتعيد توجيهه الخلاصات علي حسابك في Feedburner كيف ؟ نذهب الي اعدادات بعدها الي تغذية المواقع بعدها نذهب الي عنوان URL لأعاده توجيه تغذية الرسائل ونذهب حسابنا في Feedburner و نضغط حفظ الاعدادات , ولكن اذا عملنا ذلك لن نستطيع ارسال الملفات التاليه
  • ندخل atom.xml



















  • ندخل feeds/posts/default










  • وسنعوضها بالملف التالي
    • atom.xml?orderby=updated
    وهذا الملف سيقوم بإرسال 26 URL فقط وان كان لديك اكثر من 36 صفحة او موضوع نرسل الملفات التي ذكرناها في الموضوع اعلا .
    تم عمل هذا الموضوع بعد عده استفسارات من بعض الاخوان و اي استفسار عن الخرائط او ادوات مستخدمي المواقع عليك بأدراجه هنا , وفي حالة نقل الموضوع اتمني ان يتم ذكر المصدر , اتمني لكم التوفيق

  • أكواد اف بي ام ال


    1.
    لادراج صورة في الصفحة
    كود
    <IMG SRC="ضع رابط الصورة هنا">
            
             2             
                           لادراج صورة وبالنقر عليها تحيل المتصفح الى صفحتك او موقعك

    كود
    <A HREF="ضع رابط صفحتك او موقعك هنا"><IMG SRC="ضع رابط الصورة هنا">‎<‎/A>

    3.
    لادراج صوره واسفل منها رسالة تكتبها للزائر

    كود
    <IMG SRC="ضع رابط الصوره هنا">
    <center>اكتب رسالتك للزائر هنا</enter>

    .
    خلفية لصفحتك
    background واضف عليها ما تشاء من اكواد وكتابة

    كود
    <!-- Codes by Quackit.com -->
    <div style="background-color:#00FFFF;width:520px;">
    <p>
    <BR/>
    
    هنا اكتب ما   تشاء   من   اكواد   
    
    <BR/>
    </p>
    </div>
    <A HREF=http://maroc2net.blogspot.com/><center> maroc net</center>

    4.
    لكتابة رسالة للزائر .. ويمكنك التحكم بحجم الخط من خلال تغيير الرقم5

    كود
    <center><font size="5">اكتب رسالت

    تعلم تطبيق اف بي ام ال

    إعادة توجيه مدونة البلوجر إلى موقع آخر تختاره

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

    القسم الأول :
    الخطوة الأولى وكما اقتضت العادة قم بأخذ نسخة احتياطية من مدونتك عن طريق : التخطيط ثم تحرير HTML ثم تنزيل قالب كامل .
    الخطوة الثانية وهي التعديل في قالب المدونة وسنقوم فيها أولا بالبحث عن الكود التالي عن طريق الضغط على CTRL+F وإدخال الكود :
    <head>
    الخطوة الثالثة وهي أن تضيف هذا الكود مباشرة أسفل الكود السابق :
    <meta content='1;url=http://www.website.com/blog/' http-equiv='refresh'/><meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
    سنتوقف برهة لنشرح فيها الكود السابق وماذا يعني :
    الكود بالأزرق هو مكان الرابط الذي سيتتم إعادة التوجيه له .
    الرقم 1 بالأصفر هي المدة المستغرقة بالثانية لإعادة التوجيه .
    الكود بالأصفر يقول لمحرك البحث كوكل بأن يتوقف عن أرشفة مواضيع المدونة وهو أمر موجه إلى ملف الروبوتس ROBOTS .

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

    القسم الثاني :
    الخطوة الأولى سنقوم فيها بالبحث عن الكود التالي بعد أن نقوم بتوسيع القالب من خلال التأشير على خانة توسيع قوالب عناصر واجهة المستخدم :
    <b:section class='main' id='main' showaddelement='no'>
    الخطوة الثانية وهي إضافة الكود التالي مباشرة أسفل الكود السابق الذي بحثنا عليه :
    <div style='position: absolute; top: 0; left: 0; margin: 30px;
    border: solid 2px #333; color: #000; background-color: yellow;
    padding: 25px; width: 85%; z-index: 5;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;'>
    <p><strong>My blog has moved!</strong></p>
    <p>من المفترض أن توجه إلى الموقع الجديد .
    إذا لم يحدث ذلك فأرجو أن تضغط على الرابط التالي :<br/> <a style="color:red;"
    href='http://www.website.com/blog/'>
    <strong>http://www.website.com/blog/</strong></a>
    <br/> ولا تنسى أن تحدث مفضلاتك .</p></div>
    لنتوقف أيضا بعض الشيء مع هذا الكود لنقوم بشرح ماهيته :
    الأخضر عبارة عن لون الكتابة وخلفية المستطيل الذي سيظهر .
    الأصفر حجم الكتابة .
    الأحمر وهي الجملة التي تريدها أن تظهر يمكنك أن تغيرها بأي شيء تريده .
    الأزرق وهو الرابط الذي تريده أن يظهر داخل المستطيل .

    ملاحظات مهمة :
    أي شيء ملون هو قابل للتعديل ، ويمكنك أن تختار الألوان التي تريدها من خلال هذا الموضوع .
    الجزء الأول من الموضوع يمكنك فيه أن تحذف الجزء الثاني من الكود والذي يقول لمحرك البحث كوكل بأن يتوقف عن أرشفة مواضيع المدونة وهو أمر موجه إلى ملف الروبوتس ROBOTS ، ولن يحدث أي تغيير في إعادة توجيه المدونة .
    يمكنك استعمال الكود الأول دون الثاني أو هما معا .
    لا تنسى أن تقوم بتوسيع القالب ، وأيضا بحفظه عندما تنتهي من إضافة الأكواد .

    انتهى الموضوع بحمد الله ، وتذكر دائما أن الردود مفتوحة لأي استفسار ، ملاحظة أو حتى انتقاد

    إضافة إقرا المزيد

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

    أولا ستدخل إلى مدونتك كما العادة ثم ستتجه إلى :

    تخطيط >> ثم إلى >> تحرير HTML ثم إلى >> تنزيل قالب كامل

    تماما كما في الصورة التالية :


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

    والآن أهم خطوة في في هذه المرحلة وهي البحث في القالب عن الأسطر التالية :

    <div class='post-header-line-1'/>
    <div class='post-header-line'>

    ولعمل ذلك اضغط على CTRL+F وأدخل الأكواد السابقة أو أحدهما إلى مستطيل البحث .

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

    لنعود إلى موضوعنا ، بعد أن تجد الأكواد السالفة الذكر، ضع أسفلها هذا الكود وهو الجزء الأول من الإضافة المراد اضافته إلى القالب :

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>

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

    لمن يستخدمون القالب من النوع الثاني ، فالنتيجة يجب أن تكون هكذا :

    وبهذا نكون قد قطعنا نصف الطريق .

    لاحظ معي الصورتين السابقتين وقلي ماذا ترى ، أكيد أنك ترى هذا الكود :

    <data:post.body/>

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

    الآن ما نريده هو إضافة الجزء الثاني من الإضافة ، هنا يأتي دور الكود السابق الموجود في الصورتين ، بحيث أننا سنضيف الجزء الثاني من الإضافة أسفل ذلك الكود .

    وهذا هو الجزء الثاني من الإضافة قم بنسخه كما سبق وذكرت في الملاحظة وألصقه أسفل الكود السابق :

    <b:if cond='data:blog.pageType != "item"'><br />
    <a expr:href='data:post.url'>Read more...</a>
    </b:if>
    </b:if>

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

    إلى هنا تنتهي الخطوة الأولى من الموضوع ، ولكي تتأكد من أن الخطوات السابقة سليمة قم بمقارنتها مع الصورة التالية :

    الخطوة الثانية : طريقة إضافة الكود إلى إعدادات المدونة

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

    اتجه إلى " إعدادات " => " التنسيق " => " قالب الرسالة "

    ثم أضف الكود التالي :

    <span class="fullpost">

    </span>

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

    لا تنسى أن تحفظ الإعدادات بعد الإنتهاء من اضافة الكود

    الخطوة الثالثة : اختبار لكل ما سبق عمله .

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

    كما يعلم الجميع ، المكان الذي نستطيع فيه التحكم بالجزء المراد ظهوره في الموضوع عند صفحة البداية هو مكان كتابة الموضوع لذلك عندما تبدأ في التدوين ستقوم بعمل التالي :



    ستعمل تماما كما في الصورة ، وستكون النتيجة كما يلي :

    وهكذا يكون قد انتهى الموضوع .

    ملاحظات هامة :

    إذا لم ينجح الأمر ولم تحصل على النتيجة المرضية فقم بقراءة الموضوع مرة ثانية ، وإن لم ينجح الأمر مرة أخرى فأنا جاهز لأي استفسار .

    هناك من يفضل أن يضيف عبارة أخرى غير "اقرأ المزيد ..." وهذا الأمر سهل للغاية ، فقط قم بتغيير العبارة "اقرأ المزيد ..." بأي عبارة تفضلها .

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

    تذكر أن التعليقات مفتوحة لأي كلمة شكر أو استفسار أو حتى انتقاد .

    ( Footer )كيف تصمم فوتر



    بسم الله الرحمن الرحيم اخواني الاعزاء بعد شرحطريقة اضافة شريط آخر مواضيع ( مقالات ) في مدونة بلوجر اليوم نبداء بموضوع آخر وهو كيفية تصميم فوتر ( footer ) لمدونة بلوجر بثلاث خانات اسفل المدونة ثم نقوم بوضع اشياء جميلة فيه لنجعل المدونة ابداعية واحترافية نوعا ما ، طيب قبل ان نبداء بشرح الخطوات النظر مثال بالصور التالية لكي تعرف فوتر ( footer ) المدونة :

    1 - صورة من قائمة ( عناصر الصفحة ) قبل عمل الخانات في الفوتر المدونة :

    اضغط الصورة لتكبر


    2 - صور بعد عمل الخانات في فوتر ( footer ) للمدونة ( من جهة لوحة التحكم وايظا من جهة المدونة ) :

    اضغط الصورة لتكبر


    الآن وبعد معرفتك للمثال وما المقصود بفوتر footer المدونة نبداء بشرح خطوات عمل الخانات الثلاث في فوتر المدونة : 


    1 - قم بحفظ نسخة احتياطية لستايل المدونة لتتجنب اي مشاكل قد تحصل لا سمح الله وايظاً اذا كانت عندك ادوات قمت باظافتهم من سابق في فوتر مدونتك قم بنقلهم الى العمود الجانبي ( side bar ) للمدونة .

    2 - من لوحة التحكم اذهب الى قائمة ( التخطيط ) ثم الى ( تحرير HTML ) وابحث ( Ctrl +f ) عن الكود التالي :


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


    ثم قم باضافة الكود التالي فوقه مباشرة :




    #footer-columns {

    border-top:1px solid #999999;

    clear:both;

    margin:0 auto;

    background: #ffffff;

    }

    #footer-columns h2 {

    margin: 1.6em 0 .5em;

    font: bold 16px Arial;

    padding:10px;

    background: #ffffff url(http://img159.imageshack.us/img159/9099/toolbg.jpg) no-repeat center right;

    color: #9b2d15;

    }

    .column1 {

    padding: 0px 5px 3px 5px;

    width: 30%;

    float: left;

    margin:3px;

    text-align: right;

    }

    .column2 {

    padding: 0px 5px 3px 5px;

    width: 31%;

    float: left;

    margin:3px 3px 3px 5px;

    text-align: right;

    }

    .column3 {

    padding: 0px 5px 3px 5px;

    width: 30%;

    float: right;

    margin:3px;

    text-align: right;

    }

    .addwidget {

    padding: 0 0 0 0;

    }

    #footer-columns ul {

    list-style:none;

    margin:0 0 0;

    padding:0 0 0;

    }

    #footer-columns li {

    margin:0;

    padding-top:0;

    padding-left:0;

    padding-bottom:.25em;

    padding-right:15px;

    text-indent:-15px;

    line-height:1.5em;

    }

    body#layout #footer-columns {

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    }

    body#layout .column1 {

    width: 32%;

    float: left;

    }

    body#layout .column2 {

    width: 32%;

    float: left;

    }

    body#layout .column3 {

    width: 32%;

    float: right;

    }

    * السطر الذي باللون الاحمر في الكود اعلاه هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر ، غير فيه اذا حبيت ستايل آخر او اتركه على ما هو عليه في الكود . ثم قم بالضغط على زر حفظ القالب والى هنا انتهيا من وضع ستايل الخانات الثلاث .

    3 - قم بالبحث ( Ctrl + F ) عن الكود هذا في مدونتك :


    <b:section class='footer' id='footer'/>

    ثم استبدله بالكود التالي :


    <div id='footer-columns'>

    <div class='column1'>

    <b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>

    </b:section>

    </div>

    <div class='column2'>

    <b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>

    </b:section>

    </div>

    <div class='column3'>

    <b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>

    </b:section>

    </div>

    <div style='clear:both;'/>

    </div>

    <b:section class='footer' id='footer'/>


    ثم قم بعمل او الضغط على زر حفظ القالب ،، الى هنا انتهينا من تصميم الخانات في الفوتر . ثم انتقل الان الى عناصر الصفحة لتجد الخانات الثلاث ان شاء الله انظافن مباشرة وضع فيهم ما تشاء من الادوات ومبرووووووووك عليك تصميم فوتر footer جميل . 

    ب ) كيفية وضع قائمة وصلات مفيدة للزوار اسفل المدونة :

    في اسفل المدونة الالكترونية من الافضل ان يجد الزائر مجموعة وصلات تفيده في التعرف اكثر على المدونة، مثل وصلةاتصل بنا، و خلاصة RSS و الصفحة الرئيسية ... الخ . لذا سنضع الان مجموعة وصلات جميلة اسفل المدونة.


    * من قائمة تخطيط ثم عناصر الصفحة اضغط على اضافة اداة ثم قم باختيار اداة HTML / javascript. انظر الصورة التالية :






    ثم قم باضافة الكود التالي بداخلها :



    <center><a href="http://ahlasite.blogspot.com">الصفحة الرئيسية</a> |

    <a href="http://ahlasite.blogspot.com/rss.xml">خلاصة RSS</a> |

    <a href="ahlasite.blogspot.com/2009/10/blog-post_23.html">اتصل بنا</a> |

    <a href="about us link">عن المدونة</a> |

    <a href="privacy link">privacy</a></center>
    * العنوان الذي باللون الاحمر في الكود أعلاه هو عنوان مدونة ( المحررون العرب ) أستبدله الى عنوان مدونتك .
    Fourni par Blogger.
     

    marocnet Copyright © 2011 -- Template created by younes aka mcmr3 -- Powered by Blogger