الخميس، 7 فبراير 2013

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

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

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

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

وإبحث عنــ وإستبدله بالتالي 


ثم إبحث عنــ وإستبدله بالتالي 


الطريقة الثانية الإستبدال بأزرار 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 التالية فوق الوسم ]]>

.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 هو لون الخط 
قم بتغيير ما يعجبك وموفقين بإذن الله


ليست هناك تعليقات:

إرسال تعليق