• Log In

    • اضافة شريط قوائم CSS فى بلوجر

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

    كيفية اضافة شريط قوائم CSS فى بلوجر

      - قم بالتوجه الى بلوجر > القالب > تعديل القالب > ابحث عن الوسوم التالى

    ]]></b:skin>
    فوق الوسوم السابق اضف الكود التالى
    /*Menu Stars BWidgets.com */
    .bwidgets-nav {
        display:block;
        height:72px;
        margin:30px auto;
        position:relative;
        width:525px; }
    .bwidgets-nav ul {
        float:none;
        list-style-image:none;
        list-style-type:none;
        margin:3px 0; }
    .bwidgets-nav ul li {
        background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweVpC5KGHwr4lcE-zXzHDWl8DZnZ7HYBtoJOKRrGZDbdNPXYM3v42i5OSbIAoVeFEF178CY-v3vvQINLhf0tTWpFhEImY7n1mefC3zEIr0a7LWGGzhyF1mMZOTnJZt6SVYb16ClQFBEg/s1600/SpritesMenu.png');
        background-repeat:no-repeat;
        float:left;
        height:72px;
        margin:0px;
        padding-top:5px;
        position:absolute; }
    .bwidgets-nav ul li a {
        display:block;
        height:100%;
        width:100%; }
    .bwidgets-nav ul li.sm1 {
        background-position:0 0;
        left:0px;
        width:125px; }
    .bwidgets-nav ul li.sm2 {
        background-position:-125px 0;
        left:100px;
        width:124px; }
    .bwidgets-nav ul li.sm3 {
        background-position:-249px 0;
        left:200px;
        width:124px; }
    .bwidgets-nav ul li.sm4 {
        background-position:-373px 0;
        left:300px;
        width:125px; }
    .bwidgets-nav ul li.sm5 {
        background-position:-498px 0;
        left:400px;
        width:126px; }
    .bwidgets-nav ul li:hover {
        z-index:1000; }
    .bwidgets-nav ul li.sm1:hover {
        background-position:0 -75px; }
    .bwidgets-nav ul li.sm2:hover {
        background-position:-125px -75px; }
    .bwidgets-nav ul li.sm3:hover {
        background-position:-249px -75px; }
    .bwidgets-nav ul li.sm4:hover {
        background-position:-373px -75px; }
    .bwidgets-nav ul li.sm5:hover {
        background-position:-498px -75px; }
    /*Menu Ends BWidgets.com */

    الان قم بحفظ القالب 

    والان حان موعد اضافة القوائم التى سنكتبها لتظهر بكود CSS السابق
      - قم بالتوجه الى بلوجر > التخطيط > اضافة HTML/JavaScript
     قم بلصق الكود التالى

    <div class="bwidgets-nav">
    <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
    </ul>
    </div>

    قم بلصق كل # بروابط مدونتك واقسام مدونتك المختارة

    اتمنى ان تعجبك الاضافة :)

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

    إرسال تعليق

    الاشتراك في: تعليقات الرسالة ( Atom )

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