رسائل أقدم ورسائل أحدث والصفحة الرئيسية روابط أساسية في مدونات بلوجر وتظل امام عين القارئ طوال الوقت لذا يجب ان تكون منسقة وحسنة المظهر وتتناسب مع القالب لتزيده جمالا ولتغيير مظهر هذه الروابط نحتاج لبعض التعديلات وهناك طريقتين لفعل ذلك
الطريقة الأولى الإستبدال بالصور
قم بالدخول لتحرير القالب ولا تنسى أخذ نسخة إحتياطية
ثم إبحث عنـــ
وإبحث عنــ
ثم إبحث عنــ
الطريقة الثانية الإستبدال بأزرار 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 هو لون الخط
قم بتغيير ما يعجبك وموفقين بإذن الله
ليست هناك تعليقات:
إرسال تعليق