كيفية اضافة صندوق اكواد بشكل زجاجي احترافي بتنقية css3

كيفية اضافة صندوق اكواد بشكل زجاجي احترافي بتنقية css3

طريقة اضافة صندوق اكواد بشكل زجاجي احترافي بتقنية css3

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

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


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

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

ابحث عن : ]]></b:skin> وضع الكود فوقه مباشرة كما في الصورة 

/* this boxs by : http://www.7lolblogger.com  */holoblogger {display: block;padding: 3px;color: #FFF;text-align: right;direction: rtl;font: 12px 'DroidKufi-Regular',tahoma,arial;border-radius: 4px;max-width: 800px;margin: 5px auto;}@font-face {font-family: 'DroidKufi-Regular';src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}holoblogger#Blue {background: #64AEDF url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #4A94C5;  background-size: cover;}holoblogger#red {background: #C93E3E url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #AA2828;  background-size: cover;}holoblogger#Green {background: #3EC99D url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #2BA37D;  background-size: cover;}holoblogger#Gray {background: #AFAFAF url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #999;  background-size: cover;}holoblogger#Black {background: #222 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #111;  background-size: cover;}holoblogger#Purple {background: #9351DB url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #8B24C5;  background-size: cover;}holoblogger#Orange {background: #E98745 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;border: 1px solid #C06A2F;  background-size: cover;}

كيفية اضافة صندوق اكواد بشكل زجاجي احترافي بالعديد من الالوان داخل المواضيع  :

- سوف تدخل الى الموضوع ووتنتقل من تاليف الى html وتركب الكود .

ملاحظة  : هذه الاكواد قد جربتها على العديد من القوالب منها من هي قالبة للقالب ومنها من لا ترغب في الاشتغال .

كود اللون الاحمر : 

<holoblogger id='red'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

كود اللون الاسود : 

<holoblogger id='Black'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

كود اللون الازرق : 

<holoblogger id='Blue'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

كود اللون الاخضر : 

<holoblogger id='Green'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

كود اللون البنفسجي :

<holoblogger id='Purple'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

كود اللون الرصاصي :

<holoblogger id='Gray'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

كود اللون الليموني :

<holoblogger id='Orange'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>