ضع أكوادك في المدونة بطريقة إحترافية و أنيقة Code Box

بسم الله الرحمن الرحيم

 

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

Code Box

المرحلة الأولى: إدراج صناديق الأكواد في المدونة

الأن يجب عليك إختيار نوع الصندوق اللذي ترغب به من بين هذه الخيارات الأربعة، عندما تجد الشكل اللذي يعجبك قم بلصق الكود الخاص به فوق الوسم التالي ]]></ B: skin> مباشرة.

1- الشكل الأول

box1

الكود الخاص به

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://4.bp.blogspot.com/-vfRC7ewRrBE/TqGBODfrEmI/AAAAAAAABO0/sfL1KtmdVTg/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

2- الشكل الثاني

box2

الكود الخاص به

.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://1.bp.blogspot.com/-kwPtFLnTkuM/TaRpa_CKGpI/AAAAAAAAAo8/Y_6cAkaJfu8/s1600/codeview.png) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}

3- الشكل الثالث

box3

الكود الخاص به

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(http://1.bp.blogspot.com/-CSoiS81WBG0/TqGFlwoMvLI/AAAAAAAABPE/91uUPTRnFDQ/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}

4- الشكل الرابع

box4

الكود الخاص به

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(http://2.bp.blogspot.com/-DEqOO_wij5I/TqGFxUeUBtI/AAAAAAAABPM/toLQkBfSogE/s1600/codeview4.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

المرحلة الثانية: تخصيص صندوك الأكواد الخاص بك

 

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

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

اللون: خلفية الإطار الرئيسي

اللون: لون النص

اللون: لون الحدود

المرحلة الثالثة: كيف تجعل الصندوق يظهر بالشكل المطلوب

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

وضع الكود

و هذا هو الكود الخاص بالإضافة

<div class="code"> كود الإضافات ستقوم بكتابته هنا</div>

و بهذا نكون قد إنتهينى من هذا الموضوع أتمنى أن ينال إعجابك، و إن فعل فلا تبخل علينا بتعليقاتك.


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

عن الكاتب

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

0 التعليقات لموضوع "ضع أكوادك في المدونة بطريقة إحترافية و أنيقة Code Box"


الابتسامات الابتسامات