تخصيص زر إقرأ المزيد بشكل جميل 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

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

تــــابع الــقراءة

إضافة زر Add To Blogger لإضافة الأدوات بسهولة لمدونات بلوجر

بسم الله الرحمن الرحيم
اقدم لكم اليوم زر Add to blogger

مميزات الإضافة:

• مريحة للزوار حيث انها تسهل عليهم إضافة الأدوات لمدوناتهم
• مهمة جدا للمدونات التى تقدم إضافات بلوجر واى أكواد لتطويرها 

كود الإضافة  :

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input style="display: none;" value="عنوان الإضافة" name="widget.title" />
<textarea style="display: none;" name="widget.content">ضع هنا كود الإضافة
</textarea>
<br />
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="اسم مدونتك" name="go" type="image" />
</form>

معاينة الإضافة :

<a href="http://www.blogger-araby.blogspot.com/" title="مدونة عرب بلوجر " style="text-decoration:none;border:0;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZK7XrXWrcDoJJo6RVJ41wQ5sIA6nApWZeS7_N-wIRmU9Pv0MsLsThFEvNYC_5M5EExY6i0MrTt69jk6XOkmY9dyd4NfOgKLHBvGF7hWqoEa_GYfEVY47uqLl1QePl9nqqWjwm8Slt0xZJ/s1600/banner.gif" alt="إضافات بلوجر" style="border:0" /> </a>

ملاحظات هامة :

اذا اردت إضافة الزر داخل موضوع فى مدونتك قم بإضافة الكود فى حقل Html , وهذه صورة توضح ذلك :

إذا اردت إضافة الزر داخل المدونة كأداة منفصلة , اتبع الخطوات التالية :
تخطيط > إضافة اداة  > Html / JavaScript  > الصق الكود .


وهكذا قد انتهيت من كتابة الموضوع , ارجو ان يكون قد نال اعجباكم
والسلام عليكم .

تــــابع الــقراءة

زر أعجبني وزر الارسال من الفيس بوك أسفل تدوينات بلوجر

بسم الله الرحمن الرحيم , السلام عليكم ورحمة الله وبركاته
بعد تقديم درس " زر أعجبني من الفيس بوك لمدونات بلوجر " , اردت ان اشرح طريقة إضافة زر أعجبني و زر المشاركة أسفل تدوينات بلوجر ليتم مشاركة تدويناتك على موقع التواصل الاجتماعي فيس بوك ويجلب لك زواراً من الشبكات الاجتماعية ويلعب دوراً هاماً فى نشر مدونتك ! .

 زر أعجبني Like Button

تــــابع الــقراءة

زر أعجبني من الفيس بوك لمدونات بلوجر

بسم الله الرحمن الرحيم

اهلا بكم فى تدوينة جديدة !

الفيس بوك Facebook من الشبكات الاجتماعية الاكثر شهرة على مستوى العالم , فهو يضم ملايين المستخدمين على مستوى العالم 

كما انه يضم عدداً كبيرا من المستخدمين العرب وهذه هى النقطة المهمة .... فبمجرد ان يقوم زائر مدونتك بالضغط على زر أعجبني Like يتم نشر موضوعك على الفيس بوك مما يزيد من زوار موضوعاتك

زر أعجبني Like button

تــــابع الــقراءة