اضافة قائمة منسدلة بلوجر | بلوجر نيو بلوجر نيو: اضافة قائمة منسدلة بلوجر

الاثنين، 18 نوفمبر، 2013

اضافة قائمة منسدلة بلوجر

السلام عليكم ورحمة الله وبركاته.. اليوم اقدم لكم طريقة اضافة قائمة منسدلة بلوجر

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

لمعاينة من هنااا

الشرح بالفديو 
قربيا
الشرح بالصوت
اولأ اذهب الي لوحة التحكم 
ثم قالب ثم تحرير قالب 
وابحث عن الكود ]]></b:skin>
ثم ضع هذا الكود قبلة
كما في الصور


#css3_menu {
    width: 960px; 
    height: 50px; 
    margin: 0px auto;
    border-top: none!important;
    background: url(http://3.bp.blogspot.com/-OycpSljNY-E/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;
}
#css3_menu, #css3_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#css3_menu:before,
    #css3_menu:after {
    content: "";
    display: table;
}
#css3_menu:after {
    clear: both;
}
#css3_menu li {
    float: left;
    border-right: 1px solid #FFA722;
    box-shadow: 1px 0 0 #CC5200;
    -moz-box-shadow: 1px 0 0 #cc5200;
    -webkit-box-shadow: 1px 0 0 #cc5200;
    position: relative;
}
#css3_menu a {
    float: left;
    padding: 15px 30px;
    color: #fff;
    text-transform: inherit;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 0px #6f4900;
}
#css3_menu li a:hover {
    color: #6f4900;
    text-shadow: 1px 1px 0px #482f00;
}
#css3_menu li:hover > a {
    color: #d2d2d2;
}
*html #css3_menu li a:hover {
/* IE6 only */
    color: #fafafa;
}
#css3_menu ul {
    margin: 20px 0 0 0;
    _margin: 0;
/*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 47px;
    left: 0;
    z-index: 1;
    background: #ec6c00;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#css3_menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#css3_menu ul ul {
    top: 0;
    left: 174px;
    margin: 0 0 0 20px;
    _margin: 0;
/*IE6 only*/
    -moz-box-shadow: -1px 0 0 rgba(210,210,210,.2);
    -webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2);
    box-shadow: -1px 0 0 rgba(210,210,210,.2);
}
#css3_menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0;
/*IE6 only*/
    -moz-box-shadow: 0 1px 0 #cc5200, 0 2px 0 #ec8e00;
    -webkit-box-shadow: 0 1px 0 #cc5200, 0 2px 0 #ec8e00;
    box-shadow: 0 1px 0 #cc5200, 0 2px 0 #ec8e00;
}
#css3_menu ul li:last-child {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
#css3_menu ul a {
    padding: 12px;
    width: 150px;
    color: #ffc66c;
    _height: 12px;
/*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
#css3_menu ul a:hover {
    background-color: #f99100;
    color: #fff;
}


    width: 960px;  لتحكم في العرض
    height: 50px;  لتحكم في الطول
ثم اذهب الي تخطيط ثم اضافة اداة ثم اضافة html
<ul id="css3_menu"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Blogger</a> 
        <ul> 
        <li><a href="#">Widgets</a></li> 
        <li><a href="#">Plugin</a> 
        <ul> 
        <li> <a href="#">Facebook</a></li> 
        <li> <a href="#">Twitter</a></li> 
        <li> <a href="#">Pinterest</a></li> 
        <li> <a href="#">Google Plus</a></li> 
        <li> <a href="#">Adsense</a></li> 
        <li> <a href="#">Custom</a> 
        <ul> 
        <li> <a href="#">Hello Bar</a></li> 
        <li> <a href="#">Earning Boster</a></li> 
        <li> <a href="#">Clock</a></li> 
        </ul> 
        </li> 
        </ul> 
        </li> 
        <li><a href="#">Tips Tricks</a></li> 
        <li><a href="#">Blogger News</a></li> 
        <li><a href="#">Blogger Help</a></li> 
        </ul>    
        </li> 
        <li><a href="#">Template</a> 
        <ul> 
        <li><a href="#">Blogger</a> 
        <ul> 
        <li><a href="#">By Column</a> 
        <ul> 
        <li><a href="#">1 Column</a></li> 
        <li><a href="#">2 Column</a></li> 
        <li><a href="#">3 Column</a></li> 
        </ul> 
        </li> 
        <li><a href="#">By Color</a> 
        <ul> 
        <li><a href="#">Red</a></li> 
        <li><a href="#">Blue</a></li> 
        <li><a href="#">Orange</a></li> 
        </ul> 
        </li> 
        <li><a href="#">By Width</a></li> 
        </ul> 
        </li> 
        <li><a href="#">WordPress</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Faqs</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
    </ul>
# غير برابط الي انت عاوز مثال home غير باسم الموضوع
وبكد اكون خلصت لو في اي استفسار ضعة في تعليق
اعجبك الموضوع؟ مشاركتها مع أصدقائك:-

Team SB
النشر بواسطة: عبد الرحمن مصطفي

0 التعليقات:

POST A COMMENT

Contact Us

الاسم

بريد إلكتروني *

رسالة *

 

أرشيف المدونة الإلكترونية

المتابعون

Copyright © . eg-y. All Rights Reserved.
Designed by :-Way2themes