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 رائعة منسدلة لمدونة بلوجر. هنيئا لكم..
