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

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

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

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

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

#css3_menu {
    width: 960px;
    height: 50px;
    margin: 0px auto;
    border-top: none!important;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9dRRtsIT0Y6GAfHYkdN2s2Ob34sc0H3UOIfxsDuf-eXjDwXvFYmdRuMPXtdOd3Dz8EnQLLfcyWwFaBvo49JKd7URX3FLmDynjCBn_aF9hTT2F11ODcpgcysjdncbM3khMX75BUufEnWe/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 غير باسم الموضوع
وبكد اكون خلصت لو في اي استفسار ضعة في تعليق

اعجبك الموضوع؟ مشاركتها مع أصدقائك:-

بلوجر نيو

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

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

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

0 التعليقات:

POST A COMMENT

Contact Us

المشاركات الشائعة

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

Powered By: