قائمة سى اس اس احترافية

بسم الله الرحمن الرحيم

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

الكود

<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://mrcteck.blogspot.com/search/label/%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1"><span class="arabetutorial-icon arabetutorial-icon-home"></span><b>اضافات بلوجر</b></a> </li>
    <li>
        <a class="arabetutorial-item" href="http://mrcteck.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1"><span class="arabetutorial-icon arabetutorial-icon-demo"></span><b>قوالب بلوجر</b></a> </li>
    <li>
        <a class="arabetutorial-item" href="http://mrcteck.blogspot.com"><span class="arabetutorial-icon arabetutorial-icon-service"></span><b>شروحات الربح</b></a> </li>
    <li>
        <a class="arabetutorial-item" href="http://mrcteck.blogspot.com/search/label/%D8%A7%D9%84%D8%B9%D8%A7%D8%A8"><span class="arabetutorial-icon arabetutorial-icon-contact"></span><b>العاب</b></a> </li>
    <li>
        <a class="arabetutorial-item" href="http://mrcteck.blogspot.com/"><span class="arabetutorial-icon arabetutorial-icon-about"></span><b>اعمالنا</b></a></li>
    <li>
        <a class="arabetutorial-item" href="http://mrcteck.blogspot.com/"><span class="arabetutorial-icon arabetutorial-icon-bob"></span><b>الدعم الفنى</b></a> </li>
</ul>

قم بتغير ما يلزم