مدونة تجريبية

<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://a7trafy.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://a7trafy.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://a7trafy.blogspot.com/"><span class="arabetutorial-icon arabetutorial-icon-service"></span><b>شروحات الربح</b></a>

</li>

    <li>

        <a class="arabetutorial-item" href="http://a7trafy.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://a7trafy.blogspot.com/"><span class="arabetutorial-icon arabetutorial-icon-about"></span><b>اعمالنا</b></a></li>

    <li>

        <a class="arabetutorial-item" href="http://a7trafy.blogspot.com/"><span class="arabetutorial-icon arabetutorial-icon-bob"></span><b>الدعم الفنى</b></a>

</li>

</ul>