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

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

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

كيف تكتب محتوى متوافق مع محركات البحث والسيو Seo

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

اهمية المحتوى فى السيو والارشفة

يعتبر المحتوى اهم عامل من عوامل نجاح أى مدونة فكما يقول خبراء السيو : Content is The King معناها ان المحتوى هو اهم شئ فى الصعود بمدونتك الى اعلى المراتب .. فهو اهم شروط جوجل وغيرها من محركات البحث لجعل الموضوع فى اول مرتبة في صفحات البحث .

احذر نقل المواضيع من مواقع اخرى !

انه الخطأ المنتشر فى أغلب المواقع العربية , انه نقل المواضيع ! , وهذا اخطر شئ يمكن ان يهلك مدونتك فــبنقل موضوع من موقع اخر او مدونة اخرى فإنك بكل بساطة تبلغ عن فساد موقعك الى جوجل ! , لا تستغرب انها الحقيقة .

يجب عليك مراعاة حقوق غيرك حتى تبني مدونة ناجحة

كيف تجعل موضوعك متوافق مع جوجل و السيو SEO

في البداية يجب عليك التوقف عن نقل المواضيع من المواقع الاخرى دون ذكر للمصدر
واتبع التعليمات والنصائح التالية :

المحتوى الحصري

مما لا شك فيه انَّ المحتوى الحصري هو الذى يحدد ترتيب موقعك فى جوجل , اكتب مواضيع جديدة عن أشياء لم يسبق لأحد الكتابة عنها ,املأ مدونتك بالمواضيع الجديدة والمهمة , واحذر نقل المواضيع مع تغيير عنوانها , فهذا من اكبر الاخطاء التى تهلك المدونات .

المحتوى المفيد

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

عنوان الموضوع هو مفتاحه !

انه مفتاح الوصول لموضوعك , انه عنـــوان الموضوع ! , يجب عليك اتباع التعليمات التالية فى كتابة عنوان موضوعك :

• لا تستخدم الزخارف مطلقاً
• لا تستعمل المـــــــــــد
• اكتب عنواناً يدل على ما فى الموضوع
• حاول بقدر الامكان وضع الكلمات الدلالية فى عنوان الموضوع  , كمثال :

 كيف تكتب محتوى متوافق مع محركات البحث والسيو Seo

لاحظت وجود كلمات مثل SEO ومحركات البحث و "محتوى" هذه تعتبر كلمات دلالية ذات نسبة بحث عالية لدى جوجل .

اكتب للزائر وليس لمحركات البحث

خطأ يقع فيه كثير من المدونين , وهو حشو الكلمات داخل الموضوع أو ما يعرف بـ"سبام" Spam , اجعل موضوعك سهل القراءة للزائر وليس لمحركات البحث ! .

دروس أنصحك بقرائتها :

اضافة وصف ميتا وكلمات دلالية لكل موضوع تلقائيا لزيادة صداقة محركات البحث

تهيئة وسوم العناوين Heading لمحركات البحث 

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

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

تهيئة وسوم العناوين Heading لمحركات البحث

بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الخلق اجمعين , سيدنا محمد وعلى آله وصحبه اجمعين
سأقدم لكم اليوم درس SEO جديد وفيه شرح تهيئة وسوم العناوين Heading لمحركات البحث

مما لا شك ان وسوم العناوين  Headings مهمة جدا لمحركات البحث فهى بمثابة دليل لها للأرشفة .

الوسم H1 لعنوان المدونة

نعم ! , فالوسم h1 هو اهم الوسوم بالنسبة لمحركات البحث , ويستخدم فى مدونات بلوجر فى عنوان المدونة فقط !, حسب ارشادات جوجل , فلا تتذاكى وتجعل عناوين المواضيع بالوسم h1 !.

الوسم H2 لعناوين المواضيع

يستخدم الوسم H2 فى عناوين المواضيع لكى يتم ارشفتها بطريقة صحيحة , ولكن يوجد خطأ شائع فى معظم مدونات بلوجر هو وضع الوسم H3 لعناوين المواضيع , وهذا خطأ جسيم !.

كيفية استخدام الوسم H2 فى عناوين المواضيع :

 قم بـ " توسيع قوالب عناصر واجهة المستخدم "
ابحث عن هذا الوسم :

h3

واستبدله بهذا الوسم :

h6

ستجد عدداً كبيراً من هذا الوسم فقم بإستبدالها جميعها  

لا تستغرب لإستخدام h6 ,حتى لا تختلط الوسوم  ( اتبع الشرح )

الوسم H3 لعناوين الأدوات والعناوين الفرعية فى المواضيع

يستخدم هذا الوسم فى عناوين الأدوات والعناوين الفرعية داخل المواضيع لإعطاء الاهمية لكلمات بمحركات البحث .
ابحث عن هذا الوسم

h2

واستبدله بهذا الوسم

h7

الان قم بإستبدال h6 بــ h2
و
استبدال h7 بــ h3

طريقة سهلة :
قم بالبحث فى القالب عن كل وسم H2 وغيره بـH3 والعــكس ايضاً ولكن احذر من اختلاط الوسوم ببعضها .

إذا واجهتك اى مشكلة لا تتردد بوضعها فى تعليق وسيتم الرد عليها .
والسلام عليكم ورحمة الله وبركاته

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

إضافة زر 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  > الصق الكود .


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

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

كيفية تغيير الخطوط الى خطوط عربية جذابة لمدونات بلوجر

 بسم الله الرحمن الرحيم ,
اقدم لكم ايوم شرح طريقة اضافة خطوط عربية جذابة مثل التى بمدونتى
وسوف اقدك لكم هذا الموضوع بناءً على طلب بعض الزوار ,

ما هى خطوط بلوجر 

الخطوط المستخدمة فى مدونات بلوجر التقليدية هى خطوط ليست جميلة وليست جاذبة للزوار , لذلك يجب ابتكار طريقة ما لوضع خطوط عربية لتظهر المدونة بشكل جميل وجذاب , وانا قد احضرت لكم بعض خطوط بلوجر التقليدية لتشاهدوا الفرق بأنفسكم :

خط tahoma
خط ARIAL
خط traditional arabic
خط Verdana
 خط Times

كما رأيتم انها خطوط تقليدية وغير جذابة .

امثلة على الخطوط الحديثة الجذابة

كما ترون مدونتى بها خطوط جميلة تودُّون لو انها بمدوناتكم وهذه امثلة لها ::

خط Droid Kufi Bold

هو من افضل الخطوط واشهرها على شبكة الانترنت وكثير من المواقع الضخمة تعمل به ! ,
وهذا مثال له :
لا اله الا الله محمداً رسول الله
كود الخط

خط Droid Kufi Regular

وهو نفس الخط السابق ولكنه ارفع قليلا منه
مثال :
لا اله الا الله محمداً رسول الله
كود الخط

خط Droid Naskh Bold

من اجمل الخطوط العربية
 مثال :
لا اله الا الله محمداً رسول الله 
كود الخط

خط Droid Naskh Regular

وهو نفس الخط السابق ولكنه ارفع قليلا منه ,
مثال :
لا اله الا الله محمداً رسول الله
كود الخط

طريقة تركيب الخطوط المميزة على بلوجر

قد يقابل الكثير مننا صعوبة فى تركيب الخطوط على بلوجر ولكن سأشرح طريقة سهلة لتركيبها :
اولا ادخل على لوحة تحكم بلوجر ثم قالب ثم تحرير html
وابحث عن هذا الكود بإستخدام Ctrl+f

]]></b:skin>

وضع قبله كود الخط الذى تريده :

خط DroidKufi-bold

@font-face {
  font-family: 'DroidKufi-bold';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}

خط DroidKufi-Regular

@font-face {
  font-family: 'DroidKufi-regular';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf) format('truetype');
}

خط DroidNaskh-bold

@font-face {
  font-family: 'DroidNaskh-bold';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.ttf) format('truetype');
}

خط DroidNaskh-Regular

@font-face {
  font-family: 'DroidNaskh-regular';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.ttf) format('truetype');
}

ولتغيير لون الخط ما عليك الا بتغيير اسم الخط سواءً كان Arial او Tahoma او غيرها الى اسم الخط ....
حيث انك تبحث عن
Font-family:Arial

فإذا اردت تغيير خط المدونة بالكامل
ابحث عن فى القالب عن هذا الوسم :

body{

وضع هذا الوسم تحته :
font-family:DroidKufi-bold;

وقم بتغيير ما باللون الاحمر بالخط الذى تريده من مجموعة الخطوط التى فى الاعلى
وتقوم بتغيير ما باللون الاحمر بأسم الخط المراد اظهاره
واى استفسار ضعه فى تعليق ^__^

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