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

إخواني الكرام كيف حالكم أتمنى تكونوا بألف خير اليوم إن شاء الله سأقدم لكم قائمة جميلة لوضع اهم صفحات مدونتك

تتميز هذه القائمة بخفتها وجمالها ويمكن إستعمالها أفقيا أو عموديا حسب رغبتك

صورة من الإضافة

كما ترون في الصورة القائمة جيدة وخصوصا لوضع اهم صفحات مدونتك مثل صفحة "إتصل بنا" "فهرس المدونة" "سياسة الخصوصية" إلى آخره

والجميل أيضا هو سهولة التركيب لا تحتاج للتعديل على القالب 

لتركيب هذه الإضافة عليك فقط إضافة أداة جديدة ثم ضع فيها هذا الكود

<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);
    }

ثم غير رابط مدونتي بروابط صفحاتك الرئيسية

وغير كلمة "تعديل" بأسماء صفحاتك الرئيسية

وهكذا تكون قد إنتهيت من تركيب الإضافة أتمنى ان تعجبكم

بالتوفيق للجميع ودمتم في رعاية الله وحفظه