قائمة جانبية أحترافية سهلة التركيب

أهلآ بكم اصدقائي في تدوينة جديدة من صنف widget واضافتنا اليوم أداة متحركة جميلة جدا عبارة عن قائمة بـ 6 أقسام بشكل جذاب واحترافي جدا مفيده لعرض كمثال خدمات المدونة أو عرض أهم اقسام المدونة في sidebar أو بمسى العربي "الشريط الجانبي" لن أطيل لكم بكثير لنذهب معآ لطريقة التركيب :)


معاينة الاضافة :

طريقة التركيب :
  1. ادخل لوحة التحكم 
  2. التخطيط + أضف اداة جافا سكربت 
  3. وضع الكود التالي 
<style>
.arabetutorial-menu{
    position:relative;
}
.arabetutorial-menu li{
    float:right;
    width:100px;
    height:100px;
    margin:5px;
 list-style:none;
}
.arabetutorial-menu li a{
    display:block;
    overflow:hidden;
    background:#EAEAEA;
 color:#fff;
    text-align:center;
    height:100%;
    width:100%;
    position:relative;
    -moz-box-shadow:1px 1px 2px #ddd;
    -webkit-box-shadow:1px 1px 2px #ddd;
    box-shadow:1px 1px 2px #ddd;
 text-decoration:none;
 border:1px solid #D5D5D5;
 transition:1s;
}
.arabetutorial-menu li b{
    display:block;
    overflow:hidden;
    background:#444;
 color:#fff;
    text-align:center;
    margin-top:60px;
 padding:5px 0 5px 0;
    position:relative;
 text-decoration:none;
 border-top:1px solid #565656;
 border-bottom:1px solid #565656;
 transition:1s;
}
.arabetutorial-menu li b:hover{
    background:#EAEAEA;
 color:#444;
 transition:1s;
 border-top:1px solid #00A6FF;
 border-bottom:1px solid #00A6FF;
}
.arabetutorial-menu li a:hover{
    background:#00A6FF;
 transition:1s;
}
.arabetutorial-icon{
    width:80px;
    height:80px;
    position:absolute;
    background-position:top left;
    background-repeat:no-repeat;
    background-color:transparent;
    left:35px;
    top:20px;
}
.arabetutorial-icon-home{
    background-image:url(http://im31.gulfup.com/FRbbn.png);
}
.arabetutorial-icon-contact{
    background-image:url(http://im31.gulfup.com/jtNtX.png);
}
.arabetutorial-icon-about{
    background-image:url(http://im31.gulfup.com/b5PQM.png);
}
.arabetutorial-icon-demo{
    background-image:url(http://im31.gulfup.com/iAJ1W.png);
}
.arabetutorial-icon-service{
    background-image:url(http://im31.gulfup.com/qnT2q.png);
}
.arabetutorial-icon-bob{
    background-image:url(http://im31.gulfup.com/UQ7Wo.png);
}
</style>
<ul id="arabetutorial-menu" class="arabetutorial-menu">
 
<li>
        <a class="arabetutorial-item" href="http://goo.gl/cxAsZ"><span class="arabetutorial-icon arabetutorial-icon-home"></span><b>اضافات بلوجر</b></a>
 </li>
   
<li>
        <a class="arabetutorial-item" href="http://goo.gl/cxAsZ"><span class="arabetutorial-icon arabetutorial-icon-demo"></span><b>قوالب بلوجر</b></a>
 </li>
   
<li>
        <a class="arabetutorial-item" href="http://goo.gl/oi8YC"><span class="arabetutorial-icon arabetutorial-icon-service"></span><b>السكريبتات</b></a>
 </li>
   
<li>
        <a class="arabetutorial-item" href="http://goo.gl/DkFKj"><span class="arabetutorial-icon arabetutorial-icon-contact"></span><b>العاب</b></a>
 </li>
 
<li>
        <a class="arabetutorial-item" href="http://goo.gl/7uHHm"><span class="arabetutorial-icon arabetutorial-icon-about"></span><b>فوتوشوب</b></a></li>
   
<li>
        <a class="arabetutorial-item" href="http://goo.gl/zKH27"><span class="arabetutorial-icon arabetutorial-icon-bob"></span><b>برامج كمبيوتر</b></a>
 </li>
</ul>


التصنيفات:

#buttons=( أقبل ! ) #days=(20)

يستخدم موقعنا ملفات تعريف الارتباط لتعزيز تجربتك. لمعرفة المزيد
Accept !