طريقة وضع نص فى اطار داخل الموضوع بمدونة بلوجر

طريقة وضع نص فى اطار داخل الموضوع لبلوجر

الكثير يسال دائما عن طريقة وضع اطار داخل الموضوع لمدونات بلوجر ليعطى له شكل جمالى فى التدوينة او ليميزه عن باقى التدوينة 

ولكن الكثير منا يجهل هذا الكود والكثير والكثير يجهل برمجة اكواد  html  التى اسميها لغة الابداع  لذلك  اليوم موضعنا عن::::

كيفية وضع نص داخل جدول او اطار فى التدوينة :::: 
نبداء على بركة الله
اولا:
ندخل الى لوحة التحكم ثم تصميم ثم ادارة html ثم نختار توسيع عناصر المستخدم

نضغط  f3  ونبحث عن ::::
</b:skin>


*  ثم قم بلصق الكود التالي قبل الكود السابق تماما:::
.mbt-textarea {<br /> <br /> padding:0;<br /> <br /> margin:0;<br /> <br /> width:400px;<br /> <br /> height:40px;<br /> <br /> color:#0080ff;<br /> <br /> font:12px arial;<br /> <br /> background:#fff;<br /> <br /> border:1px dotted #289728; }<br /> <br /> .mbt-textarea:hover {<br /> <br /> color:#289728;<br /> <br /> border:2px solid #666; }<br /> <br /> .mbt {<br /> <br /> padding-top:3px;<br /> <br /> margin:0;<br /> <br /> color:#289728;<br /> <br /> font-size: 9px;<br /> <br /> font-family: sans-serif, verdana;<br /> <br                             
 

      ونحفظ القالب::

انت الان فعلت خاصيه هذا الصندوق ولكن لكى نجعله يظهر فى مكان معين فى التدوينة ماذا نفعل؟

اولا اذهب الى رسالة جديدة

نكتب موضوع التدوينة عادى خالص وفى المكان المحدد وضع المربع فيه   

نضغط تحرير html ونضع الكود التالى فى المكان المحدد له فى التدوينة
<br /> <textarea class="mbt-textarea" readonly="readonly">xxxxxxxxx

xxx هى النص المراد وضعه داخل الصندوق ومن ثم نحفظ الرسالة ومبروك عليك الصندوق

هاكم طريقة وضع هاك الكود على المدونات.

مثال:

هنا يدرج كود css أو سكريبت و غيره من الأكواد المعروفة،
حتى تمتاز عن باقي محتوى الرسالة.

و هذا مثال لعرض كود css

font-size : 13px;
line-height : 24px;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
2

»»» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.
»»» بعض الأكواد عرضتها كصورة لأنها تختفي في مدونة بلوغر لذا وجب كتابتها و هذا أفضل!
كما جرت العادة ندخل إلى لوحة تحكم مدونتنا ثم نضغط " تخطيط " بعده " تحرير Html " و نبحث (Ctrl+F لفتح نافدة البحث في المتصفح) على الكود :

و قبله أي فوقه مباشرة نضيف كود css الآتي :

i
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByAKw89raBIQ-XAKn4Cu1n0Sdpb6dSpIguIhdIX33Z6-Uz-h-w6qzHo3V3RvvBS6TXyMvPo7C7hZKeD7RMUsTtdhNPNA8KIMAjw0XYht6qXTlPEbZdniHWzEg4FAWPWif9uIMAoeuRdo/) 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 كما يلي ...

وعند نشر الرسالة يظهر الكود في إطار كما في المثال المدرج في بداية الصفحة.