EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

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

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

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

ثم غير رابط مدونتي بروابط صفحاتك الرئيسية
وغير كلمة "تعديل" بأسماء صفحاتك الرئيسية
وهكذا تكون قد إنتهيت من تركيب الإضافة أتمنى ان تعجبكم
بالتوفيق للجميع ودمتم في رعاية الله وحفظه

ليست هناك تعليقات:

إرسال تعليق

التالي السابق الرئيسية