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


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

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

إضافة تابعني عبر الشبكات الاجتماعية بشكل ذهبي

بـسم الله الـرحمن الـرحيم
الســــلام عليكم
جئت لكم اليوم مع إضافة رائعة وهى { الإصدار الذهبي من إضافة تابعنى عبر الشبكات الاجتماعية } والإضافة من تصميم شريف أشرف صاحب مدونة عرب بلوجر , وتتميز الإضافة بأيقونات الشبكات الإجتماعية بشكل ذهبى جذاب جداً , وهي مصممة بتقنيات الويب الحديثة css3 ويتضح ذلك فى الإضافة

معلومات عن الإضافة :

مصمم الإضافة : شريف أشرف صاحب مدونة عرب بلوجر
التوافق : تتوافق مع جميع المتصفحات ولكنها قد لا تعمل مع المتصفحات القديمة جدا
الترخيص : Linkware

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

إضافة تابعني عبر الشبكات الاجتماعية بتأثيرات رائعة

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

السلام عليكم ورحمة الله وبركته

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

أهمية الإضافة 

الإضافة مهمة من ناحية انها تجلب لك الكثير والكثير من المتابعين على تويتر والكثير من المعجبين على صفحتك على الفيس بوك وجوجل بلس , كما انها تجلب لكل مشتركين فى الخلاصات RSS مما يجعل الشبكات الإجتماعية و الخلاصات مصدراً آخر للزوار , فبمجرد ان يتابعك الزائر على تويتر او الفيس بوك او جوجل بلس ... تظهر له كل تحديثاتك من مواضيع ..... الخ ( وذلك بالطبع بعد مشاركتك لها )

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

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

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

 زر أعجبني Like Button

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

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

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

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

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

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

زر أعجبني Like button

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

اضافة عداد المشتركين في خدمة الخلاصات لمدونات بلوجر FeedCounter

بـــسم الـلَّه الرحــمن الرحــيم و الســلام عليكم ورحـمة الـلَّه وبركـاته,

اهلا بكم في تدوينة جديدة والدرس الثالث من سلسلة دروس الخلاصات FeedBurner

سأشرح لكم كيفية اضافة عداد المشتركين في خدمة RSS الخاصة بموقعك والتابعة لموقع فـييد برنر FeedBurner
اظن انك تريد المزيد من التوضيح .. ^_^

عداد المشتركين FeedCounter

لتفهم معنى الموضوع اكثر تابع الدروس السابقة للمدونة :-
الدرس الاول :شرح التسجيل في موقع feedburner وتكوين خلاصات لموقعك
الدرس الثانى : اضافة قائمة بريدية بشكل مميز لمدونات بلوجر

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

اضافة قائمة بريدية لمدونات بلوجر

بسم الله الرحمن الرحيم
موعدنا مع الدرس الثانى من سلسلة دروس الخلاصات RSS
 المُقدمة من مدونة عرب بلوجر
   والدرس الثانى به شرح مفصل لكيفية اضافة قائمة بريدية بشكل مميز جدا مقدمة من موقع فـييد برنر مثل التى بمدونتى ; ارجو منك الذهاب الى شرح الدرس الاول والذى به شرح التسجيل في Feedburner وبعض مزاياه لكى تستطيع اكمال سلسلة الدروس ...

فييد برنر

خطوات العمل:-

• ادخل الى موقع فـييد برنر FeedBurner 
•  قم بتسجيل الدخول الى حسابك في جوجل , و سيتم نقلك تلقائيا الى فييد برنر FeedBurner 

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