زوار ومتابعي المدونة الكرام
أسعد الله أوقاتكم بكل خير ومحبة
اليوم سوف نتعرف في درسنا هذا على إضافة في قمة الروعة والجمال تضيف لمدونتك لمسة جمالية أحترافية .
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> - وأخيراً قم بحفظ القالب .
ليست هناك تعليقات:
إرسال تعليق