تغير رسالة أقدم ورسالة أحدث والرئيسية ببلوجرBlogger platform

روابط رسائل أقدم ورسائل أحدث والصفحة الرئيسية تظل أمام عين الزائر في مدونات بلوجر Blogger platform لمدة معينة من الزمن قد تكون قصيرة أو طويلة ، لذلك يجب ان تكون منسقة وذات مظهر جذاب وتتناسب مع قالب المدونة لكي يزداد ذلك القالب جمالا ، ولكي نقوم بعمل تعديلات على تلك الروابط

فهناك طريقتين لإجراء ذلك ، ولكن لا تنسى أن تأخذ نسخة إحتياطية من القالب قبل إجراء التغير لتفادي أي خطأ قد ينتج عن التغير ، وفيما يلي نبدأ الشرح على بركة الله :

الطريقة الأولى : الإستبدال بالصور

الخطوة الأولى

1- ندخل الى لوحة تحكم المدونة .

2- نضغط على كلمة قالب من القائمة الجانبية مثل الصورة التالية :

بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:

ومن تلك الصورة السابقة نضغط على تحرير HTML ، لكي يظهر لنا الصورة التالية:

3- نبحث عن الوسم <data:newerPageTitle/> (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

4- بعد أن نجد الوسم السابق نستبدله بالكود التالي :

<img src='رابط صورة رسائل أحدث'/>

5 - نبحث عن الوسم <data:olderPageTitle/> (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

6 - بعد أن نجد الوسم السابق نستبدله بالكود التالي :

<img src='رابط صورة رسائل أقدم'/>

7- نبحث عن الوسم <data:homeMsg/> (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

8 - بعد أن نجد الوسم السابق نستبدله بالكود التالي :

<img src='رابط صورة الصفحة الرئيسية'/>

الطريقة الثانية : الإستبدال بأزرار Css

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

نقوم بالبحث في القالب عن الكود #blog-pager-newer-link ،،، ثم نحدده حتى نصل لقوس الإغلاق } فكل كود ستجده يبدأ بقوس { ثم ستجد أكواد ثم ينتهي بقوس } نحن نريد تحديد الكود من بدايته حتى نهايته ثم نستبدله بالكود التالي :

#blog-pager-newer-link {
float:right;
line-height:1.8em;
}

نفس الشئ ولكن مع هذا الكود #blog-pager-older-link ، ونستبدله بالكود التالي :

#blog-pager-older-link {
float:left;
margin-left:8px;
line-height:1.8em;
}

ونفس الشئ ولكن مع هذا الكود #blog-pager ، ونستبدله بالكود التالي :

#blog-pager {
float:center;
height:40px;
line-height:1.8em;
text-align:center;
padding-top:15px
}

ثم نبحث عن الوسم الآتي ]]></b:skin> ، ثم نضع فوقه مباشرة الكود التالي :

.home-link,.blog-pager-newer-link,.blog-pager-older-link {
background: #000;background: -moz-linear-gradient(top,#888886,#000);background: -webkit-linear-gradient(top,#888886,#000);
color:#fff;
font-size:17px;
font-weight:bold;
line-height:16px;
text-decoration:none;
border:1px solid #000;
padding:5px 15px;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
}

.home-link:hover,.blog-pager-newer-link:hover,.blog-pager-older-link:hover {
background: #888886;background: -moz-linear-gradient(top,#000,#888886);background: -webkit-linear-gradient(top,#000,#888886);
color:#fff;
text-decoration:none;
border:1px solid #000;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
}