كيفية وضع أكواد HTML في مدونات بلوجر Blogger بطريقة بسيطة و منظمة
بسم الله الرحمن الرحيم
هذا الدروس يعتبر من أهم الدروس لكل المهتمين باستخدام مدونات بلوجر
وهو كيفية اضافة كود HTML في تدويناتك دون حدوث مشاكل.
وسوف نشرح اليوم طريقتين سهله جدا
الطريقه الاولى
المحرر له شقين اثنين يمكن من خلالهما تنسيق التدوينة و أقصد تحرير HTML و تأليف ، ذكرت هذا للتمييز و كذلك لأقول أننا سندخل الكود عبر وضع التأليف ، و سنحتاج إلى تفعيل خاصية إضافية من إعدادات التأليف هي إظهار HTML فعليًا كما هو موضح في الصورة .
ثانيا: تنسيق الكود
type="text/javascript">
document.write("Hello World!")
</script>
بعد إدخال الكود ستلاحظ أنه موجه جهة اليمين و الأصح أن يوجه إلى اليسار، حدده إذا ثم اضغط أيقونة التوجيه من أدوات المحرر و سيصبح كما يلي:
<script type="text/javascript">
document.write("Hello World!")
</script>
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>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivA_T5BKX3vCqzrgvjzANWStGQm64gp-0c_U9wReuzn9I_qnpWJxQqi7FVuz3Z6HZRc_UkOxQ7JNZPkuCu793FmOzHGt36v1GPZkle7_yP5c-v81maoxbPjQjEy9bBMBzcM89amcE5Tak/) 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>
(dir="ltr" هذه التي أوقفت لدي كل شييء)
ردحذفكانت لدي مشكلة في القالب ولا أعرف ماهي هي أن الاكواد عندة أضافتها تتجه الى اليمين أستخدمت كل أضافة أجدها على الانترنت ولم تفلح ولم أجد أيضاً أجابة شافية على كل حال وجت الحل لديك وأنا أشكرك جزيل الشكر..
@أحمد الخزاعي
ردحذفالعفو اخي اشكرك لحسن متابعتك وعطر كلامك
ارجةك ان تخبرنى كيف اجعل صندوق الاكواد بجانبة ارقام لكل سطر فى الكود ما فى مدونت وكما فى محرر ادوات بلوجر
ردحذفالشرح طويل ولا يمكنني ادراجه في التعليقات يمكنك مراجعة الموضوع من هذا الرابط
حذفhttp://www.helperblogger.com/2012/06/how-to-add-syntax-highlighter-v3-to.html
شكرا
ردحذفولاكنى لم افهم شئ من الشرح
ردحذفلو ممكن تعمل شرح عربى منة اخى
ردحذفحسنا اخي
حذفيمكنك وضع ايميلك وسوف اقوم بشرح الاضافه اورسالها لك
a7mdweb@gmail.com
ردحذفتم ارسال الشرح على ايميلك اخي
حذفممكن ادد جلال
ردحذف@مستر كوره :>)
حذفاي سؤال عندك لا تتردد قول لي وانا اعطيك الحل ان شاء الله
أزال المؤلف هذا التعليق.
ردحذفالسلام عليكم اخي جلال انا قمت (m)
ردحذفبعمل نفس الموضوع في مدونتي على بلوجر
و وضعت حقوقك ممكن تدخل على مدونتي و تشوف الحقوق
حتى اذا تريد اخليها في غير مكان اضعها :o
:o :o :o :o :o :o :o :o :o :o :
اضغط هنا لمشاهده الموضوع
1 ابحث عن : ]]> وضع الكود التالي فوقه
ردحذفالسلام عليكم هل وضع الكود فوقه يعني ان امحوا هاته الكلمة وأضع فوقها الكود الآخر أم ماذا أرجوا منك شرح بسيط ومصور وطبقه على هذا الكود وجزاك الله خيرا
hadjkada041@gmail.com