طريقة إضافة قائمة التسميات بشكل مميز لمدونات بلوجر

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

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

لمعاينة الإضافة من الزر التالي :

معاينة الإضافة

لتركيب الإضافة قم بإضافة اداة HTML/javascript جديدة وقم باضافة الكود التالي داخلها وقم بالحفظ :

<style>

.category {

width: 300px;

float: left;

border-top: 8px solid #CCC;

display:block

margin: 0px;

padding: 6px 10px 15px 10px;

background: #FFF;

font-size: 1.2em;

font-family: georgia, times new roman, verdana;

font-weight: bold;

cursor: pointer;

text-shadow: 0 0 2px #CCC;

letter-spacing: inherit;

}

.category p {

margin: 0px;

font-family: Tahoma, 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;

font-size: 11px;

font-weight: normal;

color: #444;

letter-spacing: .03em;

}

#middle {

margin: 0 auto;

background: #FAFAFA;

width: 308px;

border-left: 1px solid #F8F8F8;

border-right: 1px solid #F8F8F8;

}

#cat-4 {border-top: 8px solid #FF95F9;}

#cat-4:hover {background: #FF95F9;}

#cat-5 {border-top: 8px solid #9CFFB1;}

#cat-5:hover {background: #9CFFB1;}

#cat-6 {border-top: 8px solid #FF6767;}

#cat-6:hover {background: #FF6767;}

#cat-8 {border-top: 8px solid #9CDBFF;}

#cat-8:hover {background: #9CDBFF;}

#cat-9 {border-top: 8px solid #FFD29C;}

#cat-9:hover {background: #FFD29C;}

.category span.cat_title, #front-popular h3, #front-list .cat_title, #gallery h3 {

text-transform: lowercase;margin: 0;}

</style>

<div class='clearfloat' id='middle'>

<div class='category' id='cat-4' onclick='window.location.href='http://mahobach.blogspot.com/search/label/%d8%a8%d9%84%d9%88%d8%ac%d8%b1?&max-results=9'>

<span class='cat_title'>بلوجر</span><p>

قسم خاص بكل ما يتعلق بمدونات بلوجر من إضافات وأدوات وأكواد من أجل إحتراف التدوين</p>

</div>

<div class='category' id='cat-5' onclick='window.location.href='http://mahobach.blogspot.com/search/label/%d8%a7%d9%84%d8%b9%d9%85%d9%84%20%d8%b9%d9%84%d9%89%20%d8%a7%d9%84%d8%a3%d9%86%d8%aa%d8%b1%d9%86%d8%aa';'>

<span class='cat_title'>العمل على الأنترنت</span><p>

دروس في الربح من الأنترنت ونصائح وأفكار </p>

</div>

<div class='category' id='cat-6' onclick='window.location.href='http://mahobach.blogspot.com/search/label/%d9%81%d9%88%d8%aa%d9%88%d8%b4%d9%88%d8%a8';'>

<span class='cat_title'>فوتوشوب</span><p>

كل ما يتعلق بالفوتوشوب من ادوات وخلفيات وغيرها للمصميمين</p>

</div>

<div class='category' id='cat-8' onclick='window.location.href='http://mahobach.blogspot.com/search/label/%d9%87%d9%88%d8%a7%d8%aa%d9%81';'>

<span class='cat_title'>هواتف</span><p>

قسم خاص بتبادل الخبرات في مجال الهواتف وإصلاح مشاكل الهاتف بشكل عام</p>

</div>

<div class='category' id='cat-9' onclick='window.location.href='http://mahobach.blogspot.com/search/label/%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2';'>

<span class='cat_title'>كمبيوتر</span><p>

قسم خاص بكل ما يتعلق بجهاز الكمبيوتر من برامج وأنظمة التشغيل وغيرها </p>

</div></div>