قائمة متعددة الألوان لمدونات بلوجر 2014 مقدّمة من | مدونة هوم بلوجر

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

1-أدخل إلى مدونتك | أختر تخطيط |ثم إضافة أداة

2-أنسخ الكود التالي | ثم إلصقه في صندوق الأداة

الكود

 <style type='text/css'>
/*-----------------------------------------------
MultiColor Menu Bar CSS
----------------------------------------------- */
#nav {width: auto;display: block;height: 65px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3OhhS_L86hroXuzdXtLa3wi_dWDkjjK6Qbt9ymYyD0ya_JtViu4U6w19OpxsMBc9YHnCCn258a4VaokRe9L0z5EG3HZgTI7pzhDNPhHudlet9QBCuik9V_lOUOFmtANik_1GiFQ67g/s65/MenuBar.png);-webkit-box-shadow: 0px 6px 10px #282c2e;-moz-box-shadow: 0px 6px 10px #282c2e;box-shadow: 0px 6px 10px #282c2e;}
#nav li {list-style: none;height: 44px;float:right;padding:10px 5px;margin-right: -10px;}
#nav li a {color: #fff;width: 100px;height: 40px;line-height: 53px;border-bottom: 4px solid #636393;padding:0px;font-size:18px;font-weight:lighter;text-align:center;text-decoration: none;display: block;-webkit-transition: .2s all linear;-moz-transition: .2s all linear;-o-transition: .2s all linear;transition: .2s all linear;}
#nav li:nth-child(1) a {border-color: #636393;}
#nav li:nth-child(2) a {border-color: #B5222D;}
#nav li:nth-child(3) a {border-color: #D4953C;}
#nav li:nth-child(4) a {border-color: #609491;}
#nav li:nth-child(5) a {border-color: #87A248;}
#nav li:nth-child(6) a {border-color: #4099FF;}
#nav li:nth-child(7) a {border-color: #d34836;}
#nav li:nth-child(8) a {border-color: #3B5998;}
#nav li:nth-child(9) a {border-color: #4875B4;}
#nav li:nth-child(10) a {border-color: #910101;}
#nav li:nth-child(11) a {border-color: #FF6600;}
#nav li:nth-child(1) a:hover {border-bottom: 35px solid #636393;height: 9px;}
#nav li:nth-child(2) a:hover {border-bottom: 35px solid #B5222D;height: 9px;}
#nav li:nth-child(3) a:hover {border-bottom: 35px solid #D4953C;height: 9px;}
#nav li:nth-child(4) a:hover {border-bottom: 35px solid #609491;height: 9px;}
#nav li:nth-child(5) a:hover {border-bottom: 35px solid #87A248;height: 9px;}
#nav li:nth-child(6) a:hover {border-bottom: 35px solid #4099FF;height: 9px;}
#nav li:nth-child(7) a:hover {border-bottom: 35px solid #d34836;height: 9px;}
#nav li:nth-child(8) a:hover {border-bottom: 35px solid #3B5998;height: 9px;}
#nav li:nth-child(9) a:hover {border-bottom: 35px solid #4875B4;height: 9px;}
#nav li:nth-child(10) a:hover {border-bottom: 35px solid #910101;height: 9px;}
#nav li:nth-child(11) a:hover {border-bottom: 35px solid #FF6600;height: 9px;}
</style>
<!-- MultiColor Menu Bar Start -->
<ul id='nav'>
<li><a href='###'>الرئيسية</a></li>
<li><a href='###'>مساعدة</a></li>
<li><a href='###'>بلوجر</a></li>
<li><a href='###'>أسئلة وأجوبة</a></li>
<li><a href='###'>أخبار</a></li>
<li><a href='###'>فيديو</a></li>
<li><a href='###'>معرض الصور</a></li>
<li><a href='###'>سياستنا</a></li>
<li><a href='###'>خدمتنا</a></li>
<li><a href='###'>من نحن</a></li>
<li><a href='###'>إتصل بنا</a></li>
</ul>
<!-- MultiColor Menu Bar End -->

3- أحفط الأداة

4- التعديل : عدل مايلزم مدونتك ( # # # )