الاثنين، 16 فبراير 2015

  • [Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر

    [Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر

    بسم الله الرحمن الرحيم
    والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة والسلام
    السلام عليكم ورحمة الله وبركاته.

    [Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر

    مثال مباشر : هنا

    طريقة التركيب : 

    • ادخل مدونتك 
    • ابحث عن ]]></b:skin>
    • ضع هذا الكود فوقه مباشره او قبله :
    @import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
    #contact-links{
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
        margin: auto;
        position: relative;
        width: 100%;
      text-align: right;
      font: 12px 'Droid Arabic Kufi', serif;
    direction: rtl;
    }
    #contact-links a{
    color:#4C9FEB;
    }
    #contact-links a:hover{
    color:#3D85C6;
    }
    a#o-7lol-dro{
    background:url(https://jetara.googlecode.com/svn/trunk/icon-ios7-arrow-down-16.png);
    background-repeat:no-repeat;
    background-position:center left 5px;
    padding-left:25px!important;
    }
    #menu-container{
    background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),color-stop(#e9eaea),0));
    background:-webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background:-o-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background:linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    -webkit-border-radius:0 0 4px 4px;
    -moz-border-radius:0 0 4px 4px;
    border-radius:0 0 4px 4px;
    border:1px solid rgba(0,0,0,0.1);
    -webkit-box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear:both;
    height:46px;
    padding-top:1px;
    }
    #neat-menu{
    float:right;
    }
    #neat-menu a{
    text-decoration:none;
    }
    #neat-menu ul{
    list-style:none;
    margin:0;
    padding:0;
    }
    #neat-menu > ul > li{
    float:right;
    padding-bottom:12px;
    }
    #neat-menu ul li a{
    -webkit-box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color:#D1D1D1;
    border-image:none;
    border-style:solid;
    border-width:0 1px 0 0;
    color:#333333;
    display:block;
    height:25px;
    line-height:25px;
    padding:11px 10px 10px;
    text-shadow:0 1px 0 #FFFFFF;
    }
    #neat-menu > ul > li.active > a{
    background:-webkit-gradient(linear,left top,left bottom,from(#55A6F1),color-stop(#3F96E5),0));
    background:-webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background:-o-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background:linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom:1px solid #2D81CC;
    border-top:1px solid #4791D6;
    -webkit-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    -moz-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color:#FFFFFF;
    margin:-1px 0 -1px -1px;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
    }
    #neat-menu > ul > li.active > a{
    background:url(https://jetara.googlecode.com/svn/trunk/house-32.png);
    border:0;
    background-repeat:no-repeat;
    background-position:center;
    color:#FFFFFF;
    margin:-1px 0 -1px -1px;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    width:25px;
    }
    #neat-menu ul ul{
    background:-webkit-gradient(linear,left top,left bottom,from(#F7F7F7),color-stop(#F4F4F4),0));
    background:-webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background:-moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background:-o-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background:linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border:1px solid rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:0 1px 0 #FFFFFF inset;
    -moz-box-shadow:0 1px 0 #FFFFFF inset;
    box-shadow:0 1px 0 #FFFFFF inset;
    height:0;
    margin-top:1px;
    opacity:0;
    overflow:hidden;
    width:240px;
    padding:0;
    position:absolute;
    visibility:hidden;
    z-index:1;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
    }
    #neat-menu ul li:hover ul{
    margin-top:0\2;
    height:auto;
    opacity:1;
    visibility:visible;
    }
    #neat-menu ul ul a{
    border-left-width:0;
    border-top:1px solid #D1D1D1;
    -webkit-box-shadow:0 1px 0 #FFFFFF inset;
    -moz-box-shadow:0 1px 0 #FFFFFF inset;
    box-shadow:0 1px 0 #FFFFFF inset;
    color:#444444;
    height:24px;
    line-height:24px;
    padding:7px 12px;
    text-shadow:0 1px 0 #FFFFFF;
    }
    #neat-menu ul ul a:hover{
    background:-webkit-gradient(linear,left top,left bottom,from(#55A6F1),color-stop(#3F96E5),0));
    background:-webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background:-o-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background:linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top:1px solid #4791D6;
    -webkit-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    -moz-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color:#FFFFFF;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
    }
    #neat-menu ul ul li:first-child a{
    border-top-width:0;
    }
    #menu-search{
    margin:8px 10px 0 3px;
    float:left;
    }
    #menu-search form{
    background:url("data:image/gif;base64,R0lGODlhDAAMAMQRANXV1fPz897e3sbGxvX2+Nzc3NHR0dvb2+np6ebm5vT09OLi4sHBwba2trS0tMjIyLOzs////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABEALAAAAAAMAAwAAAVHYBQtT/MsYhoBUNsC6uKcAemg4uMkaTKnDYgqAmmkBhBE7ycSQB5KxANySCkMjmzLwVApCqXHgdEwDgkiBbk7TAXWbRXjEAIAOw==") no-repeat scroll 5% 50% transparent;
    border:1px solid #CCCCCC;
    -webkit-border-radius:3px 3px 3px 3px;
    -moz-border-radius:3px 3px 3px 3px;
    border-radius:3px 3px 3px 3px;
    -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height:26px;
    padding:0 25px;
    position:relative;
    width:130px;
    }
    #menu-search form:hover{
    background-color:#F9F9F9;
    }
    #menu-search form input{
    color:#999999;
    height:26px;
    text-shadow:0 1px 0 #FFFFFF;
    background:none repeat scroll 0 0 transparent;
    border:medium none;
    float:right;
    outline:medium none;
    padding:0;
    width:100%;
    font: 10px 'Droid Arabic Kufi', serif;
    }
    #menu-search form input.placeholder, #menu-search form input:-moz-placeholder{
    color:#C4C4C4;
    }

     

    • ثم ادخل التخطيط.
    • واختر مكان مناسب وجيد , مثلا اسفل الهيدر او فوقه , او فوق صندوق المشاركات .
    • اختر اداة HTML/JAVASCRIPT 
    • والصق بها هذا الكود مع استبدال الروابط والنصوص : 

    <div id='contact-links'>
        <div id='menu-container'>
            <nav id='neat-menu'>
              <ul>
              <li class='active'><a href='/'> </a></li>
             
             
             
              <li><a id='o-7lol-dro' href='#'>مسندلة</a>
              <ul>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              </ul>
              </li>              
                <!---------- 7lolblogger.com ---------->
             
              <li><a id='o-7lol-dro' href='#'>مسندلة</a>
              <ul>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              </ul>
              </li>              
                <!---------- 7lolblogger.com ---------->
              <li><a id='o-7lol-dro' href='#'>مسندلة</a>
              <ul>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              <li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
              </ul>
              </li>              
                <!---------- 7lolblogger.com ---------->
                         
             
              <li><a href='#'>قائمة فردية</a></li>
              <li><a href='#'>قائمة فردية</a></li>
                </ul>
            </nav>
            <div id='menu-search'>
            <form method='get' action='/search'>
            <input autocomplete='off' name='q' placeholder='ابحث ...' type='text' value=''/>
            </form>
            </div>
        </div>
    </div>

    مرسلة بواسطة في
    التسميات:

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

    إرسال تعليق

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