كيفية وضع أكواد HTML في مدونات بلوجر Blogger بطريقة بسيطة و منظمة


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


وسوف نشرح اليوم طريقتين سهله جدا

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


ثانيا: تنسيق الكود

مثال : لو أردنا ادراج هذا االكود

type="text/javascript">

document.write("Hello World!")

</script>

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

<script type="text/javascript">
document.write("Hello World!")
</script>


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

<div style="text-align: left;">
قم باضافافة ما باللون الأحمر
<div dir="ltr" style="text-align: left;">


بعد ذلك سيصبح الكود الذي أدخلت هكذا
تلاحظ الآن كيف أصبح تنسيقه جيدا
<script type="text/javascript">
document.write("Hello World!")
</script>


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

<script type="text/javascript">
document.write("Hello World!")
</script>



الطريقة الثانيه


1 ابحث عن : ]]></b:skin> وضع الكود التالي فوقه

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #ffffff url(http://lh4.ggpht.com/_fQliT1HyqQc/SjpU2_JWuhI/AAAAAAAAAJg/9MsWYAcq7y4/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

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

» ثانيا : عند كتابة رسالة جديدة ، ندخل الكود المراد عرضه بين وسمي div كما يلي

<div class="codeview">
هنا تضع الكود المراد إظهاره في الموضوع
</div>

هناك 15 تعليقًا:

  1. (dir="ltr" هذه التي أوقفت لدي كل شييء)
    كانت لدي مشكلة في القالب ولا أعرف ماهي هي أن الاكواد عندة أضافتها تتجه الى اليمين أستخدمت كل أضافة أجدها على الانترنت ولم تفلح ولم أجد أيضاً أجابة شافية على كل حال وجت الحل لديك وأنا أشكرك جزيل الشكر..

    ردحذف
  2. @أحمد الخزاعي

    العفو اخي اشكرك لحسن متابعتك وعطر كلامك

    ردحذف
  3. ارجةك ان تخبرنى كيف اجعل صندوق الاكواد بجانبة ارقام لكل سطر فى الكود ما فى مدونت وكما فى محرر ادوات بلوجر

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

      http://www.helperblogger.com/2012/06/how-to-add-syntax-highlighter-v3-to.html

      حذف
  4. ولاكنى لم افهم شئ من الشرح

    ردحذف
  5. لو ممكن تعمل شرح عربى منة اخى

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

      حذف
  6. الردود
    1. تم ارسال الشرح على ايميلك اخي

      حذف
  7. الردود
    1. @مستر كوره :>)
      اي سؤال عندك لا تتردد قول لي وانا اعطيك الحل ان شاء الله

      حذف
  8. أزال المؤلف هذا التعليق.

    ردحذف
  9. السلام عليكم اخي جلال انا قمت (m)
    بعمل نفس الموضوع في مدونتي على بلوجر
    و وضعت حقوقك ممكن تدخل على مدونتي و تشوف الحقوق
    حتى اذا تريد اخليها في غير مكان اضعها :o
    :o :o :o :o :o :o :o :o :o :o :
    اضغط هنا لمشاهده الموضوع

    ردحذف
  10. 1 ابحث عن : ]]> وضع الكود التالي فوقه
    السلام عليكم هل وضع الكود فوقه يعني ان امحوا هاته الكلمة وأضع فوقها الكود الآخر أم ماذا أرجوا منك شرح بسيط ومصور وطبقه على هذا الكود وجزاك الله خيرا
    hadjkada041@gmail.com

    ردحذف