أهلآ بكم اصدقائي في تدوينة جديدة من صنف widget واضافتنا اليوم أداة متحركة جميلة جدا عبارة عن قائمة بـ 6 أقسام بشكل جذاب واحترافي جدا مفيده لعرض كمثال خدمات المدونة أو عرض أهم اقسام المدونة في sidebar أو بمسى العربي "الشريط الجانبي" لن أطيل لكم بكثير لنذهب معآ لطريقة التركيب :)
معاينة الاضافة :
طريقة التركيب :
معاينة الاضافة :
طريقة التركيب :
- ادخل لوحة التحكم
- التخطيط + أضف اداة جافا سكربت
- وضع الكود التالي
<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>
اسم الكاتب
????????????????????