طريقة رائعة لعرض الاكواد في المدونة

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

معاينة

طريقة الاضافة سهلة جدا ماعليك هو عند كتابتك لتدوينة انتقل الى تبويب html والصق هذا الكود هناك 

<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="code1" style="-webkit-transition: all 0.3s ease-in-out; -webkit-user-select: text; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoesI6C2KiRb8hMvA86cWPxELi_k1ZC8YMQvo8-J7Wcj9ZipA7OZ4KQHu2O2tTiBB__mx4gJTgEddQ9e3LoND4MXBDhJuAP4FDRMHrTebmgxcoEiIEurXTi1HIae9FXDS-hFVhXat0aw/s1600/hover+html+teacher.png) no-repeat rgb(249, 249, 249); clear: both; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 14px; height: 260px; line-height: 22.3999996185303px; list-style-type: none; margin: 15px 35px 15px 15px; overflow: auto; padding: 5px 8px 15px 165px; text-align: start; transition: all 0.3s ease-in-out; width: 250px; word-wrap: break-word;">
<span style="color: #cc0000;">ضع الكود هنا</span></div>
<br /></div>

ثم ضع مكان ضع الكود هنا الكود الخاص بك ونهانينا الاضافة الرائعة ارجو ذكر المصدر لمن ينقل الموضوع لانه حصري على مدونتنا وهو محمي فلا تجعل مدونتك تعاقب .