سنقوم بشرح كل طريقة على حدى باستخدام أمثلة وصور واختر الطريقة التي تناسب مدونتك وتصميمها.

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

بداخل صندوق الرسائل اضف تسمية جديدة تحت اسم " التسويق الإلكتروني " كما هو موضح بالصورة التالية  

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

هذه المرحلة نحتاج اليها في جميع المراحل الأتية "خاصية التسميات"

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

هي الطريقة السهلة والبسيطة والتي يمكن لأي مدون مبتدىء أن يقوم بعملها وهي :

أولا قم بعرض مدونتك وتوجه الى تسميات المدونة واضغط على قسم معين وليكن "قسم التسويق الإلكتروني"  كما هو موضح بالصورة التالية.

توجه الى الإختيار الثاني "عنوان ويب (URL) " وقم بكتابة عنوان للقسم الجديد "التسويق الإلكتروني مثلا" ثم قم بلصق رابط التسميات الخاص بقسم " التسويق الألكتروني " الذي قمنا بنسخه  واحفظ .

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

لأضافة قائمة افقية علوية أو menu horizontal بمدونة بلوجر اتبع الشرح المبسط التالي

5- ثم مباشرة قبل الكود السابق قم بنسخ الكود التالي :

/*URL: http://www.AllBlogTools.com/ */

.basictab{

padding: 3px 0;

margin-left: 0;

font: bold 12px Verdana;

border-bottom: 1px solid gray;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.basictab li{

display: inline;

margin: 0;

}

.basictab li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid gray;

border-bottom: none;

background-color: #f6ffd5;

color: #2d2b2b;

}

.basictab li a:visited{

color: #2d2b2b;

}

.basictab li a:hover{

background-color: #DBFF6C;

color: black;

}

.basictab li a:active{

color: black;

}

.basictab li.selected a{ /*selected tab effect*/

position: relative;

top: 1px;

padding-top: 4px;

background-color: #DBFF6C;

color: black;

}

6- ثم قم بحفظ قالب مدونتك
7-ثم اذهب الى التخطيط اختر اضافة أداة ثم اختر أداة HTML/JavaScript ثم بلصق الكود التالي :

<ul class="basictab">

<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>

<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>

<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>

<li><a href="#">Edit</a></li>

<li><a href="#">Edit</a></li>

<li><a href="#">Edit</a></li>

<li><a href="#">Edit</a></li>

</ul>

background-color: #f6ffd5; 

9- وتغير لون القائمة عند المرور عليها بزر الماوس من خلال الكود التالي :

background-color: #DBFF6C;

10- وتغير لون النص من خلال الكود التالي :

color: black;

بالإضافة الى كافة هذه الطرق يمكنك ابتكار واضافة طرق اخرى خاصة وان مدونات بلوجر تتميز بمرونة كبيرة تمكنك من التعامل معها بسهولة تامة.

اي استفسار نحن في الخدمة

المصدر : مدونة الصالح