أهلا وسهلا بكم زوار ومتابعي المدونة الكرام
اليوم سوف نتعرف على إضافة في قمة الجمال والجاذبية تضيف إلى مدونتك لمسة جمالية غ إحترافية وهي سهلة التركيب ، تركب على الشريط الجانتي للمدونة .
- طريقة التركيب :
1- ادخل إلى مدونتك ثم اختر لوحة التحكم .
2- من لوحة التحكم اختر تخطيط .
3- من تخطيط اختر إضاافة أداة HTML/JavaScript
4- اللصق الكود التالي في صندوق الأداة ثم احفظ .
<style>
/***** Menu CSS *****/
.side-nav { width: 100%; }
.side-nav ul { -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.side-nav ul li { clear: both; display: inline-block; margin: 0; padding: 0; width: 100%; }
.side-nav ul li a { background: #e74c3c; border-right: 5px solid #C0392B; border-left: 5px solid #C0392B; color: #fff; display: block; font-style: italic; padding: 7px 12px; text-align: center; }
.side-nav ul li:nth-child(even) a { background: #c0392b; border-right: 5px solid #E74C3C; border-left: 5px solid #E74C3C; }
.side-nav ul li a:hover, .side-nav ul li:nth-child(even) a:hover { background: #000; }
</style>
<div class="side-nav">
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">تعديل 1</a></li>
<li><a href="#">تعديل 2</a></li>
<li><a href="#">تعديل 3</a></li>
<li><a href="#">تعديل 4</a></li>
<li><a href="#">تعديل 5</a></li>
<li><a href="#">تعديل 6</a></li>
<li><a href="#">تعديل 7</a></li>
</ul>
<div class="clr"></div>
</div> وأخيراً نترككم برعاية الله وتوفيقه
ليست هناك تعليقات:
إرسال تعليق