اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

الموضوع في 'قسم تطوير المواقع والمنتديات والسيرفرات' بواسطة mstaphabouh, بتاريخ ‏28 سبتمبر 2013.

  1. mstaphabouh

    mstaphabouh Member

    x
    السلام عليكم إخوتي أخواتي أقدم لكم إضافة بتقنية css3

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

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

    [​IMG]

    تعتمد هذه افضافة على تقنية CSS3
    و هي فعلا جميلة يمكنك معاينة الإضافة بالظغط على الأيقونة بالأسفل.

    [​IMG]

    [​IMG]

    طريقة تركيب الإضافة


    خد نسخة احتياطيه من قالب المدونة من اجل لو حدث أي خطأ يمكنك تداركه

    1- من لوحة التحكم / تصميم / تحرير Html
    2-قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

    كود:
    ]]></b:skin>
    
    والصق الكود التالي قبله تمامآ

    كود:
    #navigationMenu span{
    
        /* Container properties */
    
        width:0;
    
        left:38px;
        padding:0;
        position:absolute;
        overflow:hidden;
    
        /* Text properties */
        font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
        font-size:18px;
        font-weight:bold;
        letter-spacing:0.6px;
        white-space:nowrap;
        line-height:39px;
    
        /* CSS3 Transition: */
        -webkit-transition: 0.25s;
    
        /* Future proofing (these do not work yet): */
        -moz-transition: 0.25s;
        transition: 0.25s;
    }
    
    #navigationMenu a{
        /* The background sprite: */
        background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;
    
        height:39px;
        width:38px;
        display:block;
        position:relative;
    }
    
    /* General hover styles */
    
    #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
    #navigationMenu a:hover{
        text-decoration:none;
    
        /* CSS outer glow with the box-shadow property */
        -moz-box-shadow:0 0 5px #9ddff5;
        -webkit-box-shadow:0 0 5px #9ddff5;
        box-shadow:0 0 5px #9ddff5;
    }
    /* Green Button */
    
    #navigationMenu .home {    background-position:0 0;}
    #navigationMenu .home:hover {    background-position:0 -39px;}
    #navigationMenu .home span{
        background-color:#7da315;
        color:#3d4f0c;
        text-shadow:1px 1px 0 #99bf31;
    }
    
    /* Blue Button */
    
    #navigationMenu .about { background-position:-38px 0;}
    #navigationMenu .about:hover { background-position:-38px -39px;}
    #navigationMenu .about span{
        background-color:#1e8bb4;
        color:#223a44;
        text-shadow:1px 1px 0 #44a8d0;
    }
    
    /* Orange Button */
    
    #navigationMenu .services { background-position:-76px 0;}
    #navigationMenu .services:hover { background-position:-76px -39px;}
    #navigationMenu .services span{
        background-color:#c86c1f;
        color:#5a3517;
        text-shadow:1px 1px 0 #d28344;
    }
    
    /* Yellow Button */
    
    #navigationMenu .portfolio { background-position:-114px 0;}
    #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
    #navigationMenu .portfolio span{
        background-color:#d0a525;
        color:#604e18;
        text-shadow:1px 1px 0 #d8b54b;
    }
    
    /* Purple Button */
    
    #navigationMenu .contact { background-position:-152px 0;}
    #navigationMenu .contact:hover { background-position:-152px -39px;}
    #navigationMenu .contact span{
        background-color:#af1e83;
        color:#460f35;
        text-shadow:1px 1px 0 #d244a6;
    }
    
    انتقل إلى لوحة تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript

    ثم قم بلصق الكود التالي :

    كود:
    <div style='position: fixed; top: 40%; left: 0%;'/> 
    
    <ul id="navigationMenu"> 
    
    <li> 
    
    <a class="Home" href="[COLOR="blue"]http://th3xox.blogspot.com/[/COLOR]"> 
    <span>[COLOR="lime"]الرئيسية[/COLOR]</span> 
    </a> 
    </li> <li> 
    <a class="about" href="
    
    [COLOR="blue"]http://th3xox.blogspot.com[/COLOR]
    "> 
    <span>[COLOR="lime"]عن المدون[/COLOR]</span> 
    </a> 
    </li> 
    <li> 
    <a class="services" href="
    
    [COLOR="blue"]http://th3xox.blogspot.com[/COLOR]
    "> 
    <span>[COLOR="lime"]خدمات[/COLOR]</span> 
    </a> 
    </li> 
    <li> 
    <a class="portfolio" href="
    
    [COLOR="blue"]http://th3xox.blogspot.com[/COLOR]
    "> 
    <span>[COLOR="lime"]فهرس المدونة[/COLOR]</span> 
    </a> 
    </li> 
    <li> 
    <a class="contact" href="
    
    [COLOR="Blue"]http://th3xox.blogspot.com
    [/COLOR]"> 
    <span>[COLOR="Lime"]إتصل بنا[/COLOR]</span> 
    </a> 
    </li> 
    </ul> 
    </div><a href="/" target="_blank"><small>أحصل على هده الاداة </small></a>
    
    
    6- قم بتغير ما هو باللون الأزرق بروابط مدونتك، و إن أردت قم بتغير ما هو باللون الأخضر بالكلمات التي تريد.

    7- الان إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة

    و أخير اذا نججت في تركيب هذه الاضافه لاتبخل بمشاركة الموضوع

    المصدر : http://cutt.us/oqool
     
    1 person likes this.
  2. mstaphabouh

    mstaphabouh Member

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    المرجو حدف هدا الموضوع تم تعديله
     
  3. MisterMDE999

    MisterMDE999 [سبحآن آلله وبحمَده]

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    موضوعك المكرر سابق تم نقله

    /

    ./

    ويعطيك الالف عافيه ي بطل علي شرح وافي وكافي
    ياليت مره اخره تضع حقوق صقور الابداع علي صوره
    لكي لا يأتي شخص وياخد حقوقك
     
  4. mstaphabouh

    mstaphabouh Member

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    لا يا أخي الموضوع خاص بي
    لكنني نشرته في صقور الابداع مرتين

    وأيضا أين سأجد حقوق الصورة
     
  5. admin

    admin Administrator

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    بارك الله فيك
    ان شاء الله يفيد اصحاب المدونات
    شكرا لك اخي الفاضل
    تم التقيم
     
  6. somar

    somar Very Excellent

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    هلا اهوي
    موضوع اكثر من رائع
    بس لو في بالصور حقوق صقور الابادع
    بكون احسن مشان لا حدا يسرق
    تعبك
     
  7. رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    شكرااااااااااااااااااااااااااااااااااااا
     
  8. marwan essam

    marwan essam

    banned

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    شكراااااااااااااااا على الموضووووووع
     
  9. rnahrnoud

    rnahrnoud

    banned

    رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    موضوع رائع كل عام وانتم بخير ووفقكم الله جميعا

    سبحان الله وبحمدة سبحان الله العظيم
     
  10. رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    موضوع رائع
    بارك الله فيك
     
  11. رد: اضافة بلوجر : كيفية اضافة قائمه جميلة و أنيقة بنقنية css3

    موضوع رائع
    بارك الله فيك
     

مشاركة هذه الصفحة