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

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

ابراهيم زكاغ

4/08/2015

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

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

مشاهدة مثال

أهمية القوائم/ قائمة ودورها لكل مدونة

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

طريقة إضافة قوائم / قائمة CSS بسيطة

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

لا تنسوا حفظ قالب بلوجر خاصتكم قبل القيام بأية تغييرات.

1- من واجهة التحكم في مدونتكم قوموا بالنقر على قالب ثم تحرير HTML

2- من لوحة المفاتيح Ctrl+F  للبحث عن الجملة التالية: رأس الصفحة

سيظهر كود بهذا الشكل أو مشابه له:

مكان إضافة  كود HTML الخاص بالقوائم على قالب بلوجر

لاحظوا كيف قمت بإضافة الكود:

بعد إضافة الكود

3 - لاحظوا الكود جيدا حيث ستقومون بإضافة الكود التالي بين </b:section>  و   </div> كما توضح الصورة أعلاه :

<div class='nav'>
<ul>
<li class='home'><a href='/'>الأولى</a></li>
<li class='tutorials'><a href='#'>دروس</a></li>
<li class='about'><a href='#'>من نكون&#1567;</a></li>
<li class='news'><a href='#'>تابعنا</a></li>
<li class='contact'><a href='#'>إتصل بنا</a></li>
</ul>
</div>

قمنا بإضافة كود html الخاص بالقوائم. وسنمر للخطوات التالية التي تتعلق بجانب التصميم وكود CSS.

4 - لنضف كود CSS الآن، للقيام بذلك إبحثوا عن:

]]></b:skin>

وفوقه  مباشرة أضيفوا الكود التالي:

.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}

.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
font-family: 'Droid Arabic Kufi', serif, 'PT Sans', Arial, sans-serif;
}

.nav a:hover {
background-color: #005f5f;
}

.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}

@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}

/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}

a.active {
background-color: #fff;
color: #444;
}

/* Options 2 - Float
.nav li {
float: right;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}

/*
* Droid Arabic Kufi (Arabic) https://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}

4 - تغييرات تهم الألوان والروابط:

 - روابط القوائم:

 بالنسبة لرابط الصفحة الرئيسية أي الأولى أتركوه كما هو. بالنسبة لبقية الروابط قوموا بتغيير نصر الرابط بالأزرق مع تعويض  #  بروابط html من:

<li class='tutorials'><a href='#'>دروس</a></li>

ليصبح:

<li class='tutorials'><a href='www.folfoly.com'>دروس</a></li>

لا تنسوا أنه بإمكانكم إضافة روابط أخرى للقوائم.

- ألوان القوائم:

بإمكانكم استعمال أداة  أكواد ألوان HTML لتغيير ألوان القوائم بما يناسب مدونتكم. 

5 - قوموا بحفظ التغييرات وقوموا بتجربة مدونتكم لمشاهدة القوائم.

وصلنا لنهاية درس اليوم، والذي رأينا فيه طريقة إضافة قوائم / قائمة CSS أفقية لمدونات بلوجر.  

بلوجر

ابراهيم زكاغ 4/08/2015