قائمة/قوائم CSS أفقية خفيفة بالألوان لمدونات بلوجر

نقدم لكم في هذا الدرس من دروس بلوجر واحدة من إضافات بلوجر الرائعة وهي قوائم CSS أفقية خفيفة بالألوان وبدون قوائم ثانوية منسدلة. هي قائمة خفيفة وجميلة وستزيد من جمالية مدونتكم وتساعدكم في الحصول على المزيد من الصفحات المشاهدة وهو أمر مهم فيما يخص تصنيف مدونتكم.

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

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

لإضافة هذه الأداة على مدونة بلوجر خاصتكم اتبعوا معنا الخطوات التالية:
1 - قوموا بحفظ قالب مدونتكم قبل القيام بالتغييرات
2- من واجهة التحكم في مدونتكم تنقرون على خيار القالب ثم تحرير HTML

3- سنقوم الآن بإضافة كود CSS وللقيام بذلك Ctrl+F من لوحة المفاتيح للبحث عن الكود التالي:
]]></b:skin>
4 - من فوقه مباشرة أضيفوا الكود التالي:
#colornav {width: 100%;display: block;height: 65px;background: url(https://lh3.googleusercontent.com/-dKlirHGyVZw/UproL42RSWI/AAAAAAAAJv0/ZyUiIih9E7U/s65/MenuBar.png);-webkit-box-shadow: 0px 6px 10px #282c2e;-moz-box-shadow: 0px 6px 10px #282c2e;box-shadow: 0px 6px 10px #282c2e; float: right; text-align: right;}
#colornav li {list-style: none;height: 44px;float:right;padding:10px 5px;margin-right: -10px; text-align: right;}
#colornav li a {color: #fff;width: 100px;height: 40px; font-family: 'Droid Arabic Kufi', serif; 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;}

5- حان وقت إضافة كود روابط القوائم أسفل عنوان ووصف المدونة. انتبهوا قليلا لوضع الكود في المكان المناسب.
قوموا بالبحث عن الكود التالي:
<b:includable id='description'>
لاحظوا أن هناك ثلاث أسهم إلى اليسار قوموا بالنقر على السهم الأوسط لإظهار أداة الوصف كاملة:

6 - بعد ذلك  فوق الكود التالي:
</div>
</b:includable>
أضيفو الكود:
<ul id='colornav'>
<li><a href='https://www.folfoly.com'>الرئيسية</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>
كما توضح الصورة التالية:

7 - قوموا بحفظ القالب بعد تغيير الروابط ونصوصها بحسب حاجتكم. 

بهذا تكونون قد أضفتم قوائم CSS أفقية  بالألوان لمدونة بلوجر خاصتكم.