شريط قوائم CSS رائعة منسدلة لمدونة بلوجر

1- لماذا أصبح ضروريا توفر أي مدونة بلوجر على قوائم CSS:

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

- شاهد مثال -

نموذج شريط قوائم CSS رائعة منسدلة لمدونة بلوجر

2 - مميزات قوائم CSS:

  * القوائم المسندلة: هذه القوائم تتوفر على قوائم ثانوية منسدلة للمزيد من الخيارات

  *  رابطين إضافيين معزولين: تمت إضافة رابطين في الأعلى خاصين بإمكانكم استعمالها كما تشاؤون.

  * أيقونات الشبكات الإجتماعية: روابط بالصور للشبكات الإجتماعية الخاصة بكم لزيادة عدد المتابعين.

دعونا نمر لطريقة إضافة هذه القوائم لمدونتكم عبر اتباع الخطوات الموالية.

3 - إضافة  شريط قوائم CSS لمدونة بلوجر: 

لإضافة هذه القوائم لمدونتكم، المرجو اتباع الخطوات التالية:

 ** الخطوة 1:
من واجهة التحكم في المدونة اختاروا القالب ثم تحرير HTML
 ** الخطوة 2:
من لوحة المفاتيح Ctrl+F  للبحث داخل كود القالب عن هذا الكود:
]]></b:skin>
وفوقه مباشرة  قوموا بلصق هذا الكود بعد نسخه:

/* قوائم CSS متدلية */
#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: left;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: right;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: right;
padding-bottom: 4px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 12px;
height: 18px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
/* قوائم CSS متدلية */

قوموا بحفظ التغييرات وأغلقوا أداة تحرير القالب. 

  ** الخطوة 3:

سنعود لواجهة المدونة وننقر على التخطيط ثم إضافة أداة  بعد اختياركم ل HTML/JavaScript 

 قوموا بنسخ هذا الكود داخل إطار الأداة:

<div id='contact-links'>
<div id='my-links'>
<a href='#'>من نكون؟</a>
<a href='#'>للإتصال بنا</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4wPUqySO0V3o-9F1fOVSe-hZExq0tdzR0IXUtCB6sH6TuicNu9GWUt68iEN0oMkiKoeonfMEaVNWcTe9ry-phktC_nwLOvZ80XgCqDnwaO9HVr9_vaM16dolRGoruYjkgwOtAvijn4xq/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8c5M3dSEWoCZd3h-CZy3nxi6pBsqXUtGfhiJ83I15SzU7bwS2_qeAx9Fg3-m47Jq8pVF056Jzz3lCHhK9kdesFtpjEPEWl9ZjvIvBqAEVLqgbeTP8G4VTJzPy8O3VFifHXkNlxQsBTmN/s1600/twitter.png' title='Twitter' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghpW3eOTo_l1ekOXatHl6EjKSY6y5z5R04iOg3eXWVWqT8XgxT5KfoPqcSY2jvaMzEtL_Li51QMXwkZT1V782klAFhtzDwpgc-7hPmi6oHOdWWCC7z3Tj5Q8jzKrv6gvPmEf7AXtD4cX85/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzj1eNXNIwPtU_VPd6lw66XMFMb_o1Bu61RaLShCClC4VP1RWs7aH744YiR6eDEXWwqkNucy__W086YQeF0igY5pjDjPp9ebxYbuTGeVZtYmaf3SavBqo9rDWophJR1RwEbPvi0MjL8KM7/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>الأولى</a></li>
<li><a href='#'>قائمة متدلية 1</a>
<ul>
<li><a href='#'>قائمة ثانوية 1</a></li>
<li><a href='#'> 2 قائمة ثانوية</a></li>
<li><a href='#'>قائمة ثانوية 3</a></li>

</ul>
</li>
<li><a href='#'> قائمة متدلية 2</a>
<ul>
<li><a href='#'>قائمة ثانوية 1</a></li>
<li><a href='#'> 2 قائمة ثانوية</a></li>
<li><a href='#'>قائمة ثانوية 3</a></li>
</ul>
</li>

<li><a href='#'>قائمة منفردة 1</a></li>
<li><a href='#'>قائمة منفردة 2</a></li>
<li><a href='#'>قائمة منفردة 3</a></li>

</ul>
</nav>
</div></div>

تم الأمر ويكفي الآن حفظ التغييرات وشاهدة الإضافة الجديدة والمتميزة.

4 - تغيير قوائم CSS بحسب حاجتكم:

 ** إضافة الروابط : لإضافة الروابط يكفي تعويض الرمز # بالرابط الخاص بكم ثم تعويض النص بما يناسبكم:

 <a href='http://www.folfoly.com/'>مدونة فلفلاي</a>    ليصبح <a href='#'>من نكون؟</a>

 ** تغيير صور الأيقونات:  إذا لم تعجبكم صور الأيقونات الخاصة بالشبكات الإجتماعية بإمكانكم تغييرها بصوركم الخاصة  عبر تبديل الرابط باللون الأحمر بروابطط صوركم:
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4wPUqySO0V3o-9F1fOVSe-hZExq0tdzR0IXUtCB6sH6TuicNu9GWUt68iEN0oMkiKoeonfMEaVNWcTe9ry-phktC_nwLOvZ80XgCqDnwaO9HVr9_vaM16dolRGoruYjkgwOtAvijn4xq/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>

• طريقة استضافة الصور على بلوجر ونسخ روابطها

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

بهذا نكون قد رأينا طريقة إضافة شريط قوائم CSS رائعة منسدلة لمدونة بلوجر. هنيئا لكم..

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

أداة الFirebug لتغيير HTML وCSS

الFirebug هي واحدة من أهم إضافات متصفح الإنترنت موزيلا فايرفوكس. والتي تسمح بتغيير، مشاهدة، ونسخ أي كود صفحة إنترنت سواء كان HTML و CSS أو JAVASCRIPT.
سنرى في هذا الفيديو كيف نقوم بإضافتها واستعمالها:
-    إضافة فايربوج لمتصفحكم