:مقدمة:
كود جديد يمكن عمل تعليمات او استخدامة لاكثر من شئ
اليوم رجعت بكون من تصميمى الخاص 
كود غاية الروهة انا جاتنى الفكرة من كود موجود سابقا 
اليكم صورة للكود 
:فديو:

:نركيب:

  1. ادخل لوحة الادارة 
  2. مظهر المنتدى
  3. الصور والالوان
  4. ورقة ال CSS

  5. أضف الكود التالى وسجل

الكود:

.mahwos-type5{
width:410px;
margin:0 auto;
}
.mahwos-type5 ol {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 1em;
padding: 0;
counter-reset: li-counter;
}
.mahwos-type5 ol li{
position: relative;
margin-bottom: 1.5em;
padding: 0.5em;
background-color: #F0D756;
padding-left: 58px;
}

.mahwos-type5 a{
text-decoration:none;
color:black;
font-size:15px;
font-family: 'Raleway', sans-serif;
}

.mahwos-type5 li:hover{
box-shadow:inset -1em 0 #6CD6CC;
-webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 0.5s;
}

.mahwos-type5 ol li:before {
position: absolute;
top: -0.3em;
left: -0.5em;
width: 1.8em;
height: 1.2em;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: white;
background-color: #6CD6CC;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}



  • التركيب فى الموضوع مثل هذة 



  • أضف الكود التالى فى صندوق الرسال الموضوع

الكود:

<div class="mahwos-type5">
<ol>

  <li><a href="#">هذا النص مثال فقط يمكن استبدالة </a></li>
  <li><a href="#">هذا النص مثال فقط يمكن استبدالة </a></li>
  <li><a href="#">هذا النص مثال فقط يمكن استبدالة </a></li>
  <li><a href="#">هذا النص مثال فقط يمكن استبدالة </a></li>
  <li><a href="#">هذا النص مثال فقط يمكن استبدالة </a></li>
</ol>
</div>


الحمد لله
:النهاية:


ربَّنَا اغْفِرْ لَنَا ذُنُوبَنَا وَإِسْرَافَنَا فِي أَمْرِنَا وَثَبِّتْ أَقْدَامَنَا وانصُرْنَا عَلَى الْقَوْمِ الْكَافِرِينَ