قائمة جميلة لوضع اهم صفحات مدونتك

<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;
     -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
     text-decoration:none;
     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;
     transition:1s;
 opacity:0.6;
     filter:alpha(opacity=60);
    }
    .arabetutorial-menu li b:hover{
        background:#EAEAEA;
     color:#444;
     transition:1s;
    }
    .arabetutorial-menu li a:hover{
        background:#01B1D3;
     transition:1s;
    }
    .arabetutorial-icon{
        width:100%;
        height:100%;
        position:absolute;
        background-position:top left;
        background-repeat:no-repeat;
        background-color:transparent;
        left:35px;
        top:20px;
     filter:alpha(opacity=60);
    }
    .arabetutorial-icon-home{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-contact{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-about{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-demo{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-service{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-bob{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    </style>
    <ul id="arabetutorial-menu" class="arabetutorial-menu">
        <li>
            <a class="arabetutorial-item" href="http://www.arabe-eye.com/ "><span class="arabetutorial-icon arabetutorial-icon-home"></span><b>تعديل</b></a>
     </li>
         <li>
            <a class="arabetutorial-item" href="http://www.arabe-eye.com/"><span class="arabetutorial-icon arabetutorial-icon-demo"></span><b>تعديل </b></a>
     </li>
         <li>
            <a class="arabetutorial-item" href="http://www.arabe-eye.com/"><span class="arabetutorial-icon arabetutorial-icon-service"></span><b>تعديل</b></a>
     </li>
         <li>
            <a class="arabetutorial-item" href="http://www.arabe-eye.com/"><span class="arabetutorial-icon arabetutorial-icon-contact"></span><b>تعديل</b></a>
     </li>
        <li>
            <a class="arabetutorial-item" href="http://www.arabe-eye.com/"><span class="arabetutorial-icon arabetutorial-icon-about"></span><b>تعديل</b></a></li>
         <li>
            <a class="arabetutorial-item" href="http://www.arabe-eye.com/"><span class="arabetutorial-icon arabetutorial-icon-bob"></span><b>تعديل</b></a>
     </li>
    </ul>

   .arabetutorial-icon-home{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-contact{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-about{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-demo{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-service{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }
    .arabetutorial-icon-bob{
        background-image:url(https://cdn1.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/64/users.png);
    }