اضافة أقسام المدونة بطريقة جديدة .

السلام عليكم و رحمة الله تعالى و بركته اليوم أقدم تدوينة جديدة و رائعة

, طريقة اضافة أقسام المدونة باضافات خيالية اذن لن أطيل عليكم تفضلوا الاضافة :

طريقة التركيب :

كالعادة ادخل لوحة تحكم مدونتك .

ثم تخطيط .

تم اضافة html/javascript

ثم اضف الكود التالي :

<style>
#fbar {list-style-type:none;list-style: none;margin:-10px -10px -0padding:0px;border:1px solid #d6d6d6;
}
#fbar1 ul{list-style-type:none;list-style: none;margin:1px;background:#ebebeb;border:1px solid #d6d6d6;}
#fbar2 ul{list-style-type:none;list-style: none;margin:1px;border-left:1px solid #0096ff;border-top:1px solid #0096ff;border-bottom:1px solid #d6d6d6;background:#0096ff;}
#fbar ul li{background: #ebebeb
;border-top:1px solid #0096ff;padding:10px 10px;margin-bottom:-1px;
color:#0096ff
;box-shadow:inset 10 0 1px #0096ff
;border-bottom:1px solid #0096ff;-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;}
#fbar ul li:hover{background:#ebebeb;box-shadow:inset 0 0 1px #0096ff
;-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;}
#fbar a{text-decoration:none;color:#0096ff;}
#vbar a:hover{text-decoration:none;color:#0096ff;}
#fbar h2{
margin:8px;
color:#666;border:1px solid #0096ff;
background: -moz-linear-gradient(top, #0096ff, #eaeaea);
background: -webkit-gradient(linear top, #0096ff, #eaeaea);
background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);
background: -o-linear-gradient(top, #f8f8f8, #eaeaea);
padding:8px;font-family:'droidkufi-bold', 'droidkufi-bold', Arial,Helvetica,Sans-serif;font-size:11px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
-ms-transition: All 1s ease;
transition: All 1s ease;
}
#fbar ul li a {
color:#000;
font-size:16px;
font-family: droidkufi-bold, tahoma;
font-weight: normal;
text-decoration: none;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.lb a img {float:right;padding-left:10px;}
#fbar1 {float:right;width:50%;display:block;}
#fbar2 {float:left;width:50%;display:block;}
</style>
<div id="fbar">
<div id="fbar1">
<ul>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/">برامج<img src="http://im39.gulfup.com/9cVCG.ico" /></a>
</li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
</li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />مقالات<img src="http://im39.gulfup.com/9cVCG.ico" /></a>
</li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
</ul></div>
<div id="fbar2">
<ul>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
<li class="lb"><a href="http://4arabia.blogspot.com/"><img src="http://dryicons.com/images/redesign/logo/logo_24px.png" />حلقات</a></li>
</li></ul>
</div></div>

ثم قم بحفظ الاضافة بعد تغير الروابط لمدونتك وصور الاقسام