إضافة قائمة افقية ملونة بتقنية CSS لمدونات بلوجر

زوار ومتابعي المدونة الكرام 

أسعد الله أوقاتكم بكل خير ومحبة 

اليوم سوف نتعرف في درسنا هذا على إضافة في قمة الروعة والجمال تضيف لمدونتك لمسة جمالية أحترافية .

أنقر للمعاينة
قائمة ملونة

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

1- ادخل إلى مدونتك اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم تحرير قالب .

3- ابحث عن الوسم : ]]>

4- ضع الكود التالي فوقه .

 /*-----------------------------------------------
PakMAx MultiColor Menu Bar CSS
----------------------------------------------- */
#colornav {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;}
#colornav li {list-style: none;height: 44px;float:right;padding:10px 5px;margin-right: -10px;}
#colornav li a {color: #fff;width: 100px;height: 40px;line-height: 53px;border-top: 4px solid #636393;padding:0px;font-size:18px;font-weight:lighter;text-align:center;text-decoration: none;display: block;-webkit-transition: .3s all linear;-moz-transition: .3s all linear;-o-transition: .3s all linear;transition: .3s all linear;}
#colornav li:nth-child(1) a {border-color: #636393;}
#colornav li:nth-child(2) a {border-color: #B5222D;}
#colornav li:nth-child(3) a {border-color: #D4953C;}
#colornav li:nth-child(4) a {border-color: #609491;}
#colornav li:nth-child(5) a {border-color: #87A248;}
#colornav li:nth-child(6) a {border-color: #4099FF;}
#colornav li:nth-child(1) a:hover {border-bottom: 35px solid #636393;height: 9px;}
#colornav li:nth-child(2) a:hover {border-bottom: 35px solid #B5222D;height: 9px;}
#colornav li:nth-child(3) a:hover {border-bottom: 35px solid #D4953C;height: 9px;}
#colornav li:nth-child(4) a:hover {border-bottom: 35px solid #609491;height: 9px;}
#colornav li:nth-child(5) a:hover {border-bottom: 35px solid #87A248;height: 9px;}
#colornav li:nth-child(6) a:hover {border-bottom: 35px solid #4099FF;height: 9px;} 

4- بعد ذلك إبحث عن الوسم : 

5- ضع الكود التالي تحته مباشرة .

 <ul id="colornav">
<li><a href="http://www.pakmax.net/">الرئيسية</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> 

- وأخيراً قم بحفظ القالب .