إستبدال رسائل أقدم ورسائل أحدث بصور أو أزرار CSS

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

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

قم بالدخول لتحرير القالب  ولا تنسى أخذ نسخة إحتياطية 

ثم إبحث عنـــ <data:newerPageTitle/> وإستبدله بالتالي 

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

وإبحث عنــ <data:olderPageTitle/> وإستبدله بالتالي 

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

ثم إبحث عنــ <data:homeMsg/> وإستبدله بالتالي 

<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
}

ثم سنضع أكواد الــ CSS  التالية فوق الوسم </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;
}

اللون #000 واللون #888886 الأوائل هما لوني خلفية الزر 

وال#fff هو لون الخط 

وهذا الكود border:1px solid #000; يخص حجم ولون الإطار حول الزر

أما border-radius:2px فكلما زدت في الرقم 2 سيصب الزر أكثر إستدارة

اللون #888886 واللون #000 الثانيين  هما لوني خلفية الزر عند مرور الماوس

وال#fff هو لون الخط 

قم بتغيير ما يعجبك وموفقين بإذن الله

منشورة في: *, دروس, css