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

تخصيص زر إقرأ المزيد بشكل جميل CSS لمدونات بلوجر

| | | | | |

بسم الله الرحمن الرحيم
اقدم لكم اليوم إضافة تظهر مدونتك بشكل جميل وراقٍ وسيتم شرح ذلك في هذا الموضوع
بعد إضافة زر إقرأ المزيد , تلقيت طلبات لتخصيص الزر وجعله اكثر جمالاً !
إقرأ هذا الشرح اولاً :
اضافة خاصية " إقرأ المزيد" لمدونات بلوجر
وهذا شرح لتغيير خطوط المدونة والزر
كيفية تغيير الخطوط الى خطوط عربية جذابة لمدونات بلوجر

اقرأ المزيد

كيف يتم تخصيص الزر ؟


يتم تخصيص الزر عن طريق CSS وهى لغة تتيح لك تغيير شكل عناصر الــHTML ( الزر )  مثل تغيير لون الخلفية ولون النص ولون الحدود وشكلها ... الخ , فهذا اللغة تعتبر الثانية بعد HTML , لأنها تعطى الشكل الجميل للمدونات .

زر إقرأ المزيد

معاينة :
تـابع القراءة




ستتمكن من تغيير خلفية الزر الى اى لون تريده يمكنك اتبع الخطوات التالية .

كود الزر

ادخل على قالب مدونتك
ثم ابحث عن هذا الكود :
]]></b:skin>
ضع هذا الكود قبله ( فوقه ) :

/* CSS BUTTON  DEV By Arab-blogger  (www.blogger-araby.blogspot.com) */
.jump-link a {
font-size:15px;
font-family:DroidKufi-bold,ARial;
font-weight:bold;
background-color: rgb(232,232,232);border: 1px solid rgb(216, 216, 216);
clear:both;
width:100px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-moz-box-shadow:2px 2px grey;
-webkit-box-shadow:2px 2px grey;
-o-box-shadow:2px 2px grey;
-ms-box-shadow:2px 2px grey;
box-shadow:2px 2px grey;
color: rgb(200, 200, 200);display: inline-block;margin-bottom: 6px;outline: medium none;padding: 4px 12px 3px;text-align: center;text-decoration: none;text-shadow: 0px 1px 0px rgb(150, 150, 150);
5px 5px 5px 5px;

}

.jump-link:visited {}
.jump-link a:hover {
width:100px;
font-size:15px;
font-family:DroidKufi-bold,ARial;
background-color: gold;border: 1px solid rgb(239, 239, 239);
clear:both;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-moz-box-shadow:2px 2px grey;
-webkit-box-shadow:2px 2px grey;
-o-box-shadow:2px 2px grey;
-ms-box-shadow:2px 2px grey;
box-shadow:2px 2px grey;
color: rgb(255, 255, 255);display: inline-block;margin-bottom: 6px;outline: medium none;padding: 4px 12px 3px;text-align: center;text-decoration: none;text-shadow: 0px 1px 0px rgb(21, 158, 188);
}
.jump-link a:active{
margin-bottom:5px;
margin-left:5px;
-moz-box-shadow:0px 0px grey;
-webkit-box-shadow:0px 0px grey;
-o-box-shadow:0px 0px grey;
-ms-box-shadow:0px 0px grey;
box-shadow:0px 0px grey;
}

.rmlink a {
font-size:15px;
font-family:DroidKufi-bold,ARial;
font-weight:bold;
background-color: rgb(232,232,232);border: 1px solid rgb(216, 216, 216);
clear:both;
width:100px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-moz-box-shadow:2px 2px grey;
-webkit-box-shadow:2px 2px grey;
-o-box-shadow:2px 2px grey;
-ms-box-shadow:2px 2px grey;
box-shadow:2px 2px grey;
color: rgb(200, 200, 200);display: inline-block;margin-bottom: 6px;outline: medium none;padding: 4px 12px 3px;text-align: center;text-decoration: none;text-shadow: 0px 1px 0px rgb(150, 150, 150);
5px 5px 5px 5px;

}

.rmlink:visited {}
.rmlink a:hover {
width:100px;
font-size:15px;
font-family:DroidKufi-bold,ARial;
background-color: gold;border: 1px solid rgb(239, 239, 239);
clear:both;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-moz-box-shadow:2px 2px grey;
-webkit-box-shadow:2px 2px grey;
-o-box-shadow:2px 2px grey;
-ms-box-shadow:2px 2px grey;
box-shadow:2px 2px grey;
color: rgb(255, 255, 255);display: inline-block;margin-bottom: 6px;outline: medium none;padding: 4px 12px 3px;text-align: center;text-decoration: none;text-shadow: 0px 1px 0px rgb(21, 158, 188);
}
.rmlink a:active{
margin-bottom:5px;
margin-left:5px;
-moz-box-shadow:0px 0px grey;
-webkit-box-shadow:0px 0px grey;
-o-box-shadow:0px 0px grey;
-ms-box-shadow:0px 0px grey;
box-shadow:0px 0px grey;}
هذا الكود سيغير شكل الزر تماما وهو يعمل على الخاصيتين الاوتوماتيكية واليدوية للزر !
ما باللون الاحمر هو لون الخلفية بدون التأشير على الزر أو مرور الماوس عليه
ما باللون الأزرق هو لون الخلفية عند التأشير على الزر او مرور الماوس عليه
يمكنك استخراج اكواد الألوان من هذا الصفحة :
اكواد الألوان Color Hex code

وفى النهاية اي استفسار انا في الخدمة
والسلام عليكم

1 التعليقات:

King Sherif يقول...

من لم تعمل معه الطريقة استبدل rmlink بــ
readmore

يمنع وضع اى روابط للمدونات والمواقع والا سيتم حذفها

إرسال تعليق