Meta tags اضافة الميتا تاج لمدونات بلوجر



بسـم الله الـرحمن الرحـيم
اهلا بكم في درس سيو جديد ومهم لكل المدونات والجديدة بالتحديد 
مما لا شك فيه ان الميتا تاجز  Meta Tags مهمة جدا لانها هى التى توضح نوع محتوى موفعك لدى محركات البحث , مما يساعد في صداقة محركات البحث , وسرعة الارشفة ..!
 

شرح اضافة الميتا تاجز لمدونات بلوجر

لا تنسى حفظ نسخة احتياطية من القالب قبل اى تعديل
  • اذهب الى لوحة تحكم بلوجر
  • اختر تصميم ثم "قالب"  ( تحرير Html )
  • ابحث عن هذا الكود :
<b:skin>
ضع فوقه هذا الوسم
<meta content='Your-Keywords-HERE' name='keywords'/>
<meta content='Your-description-HERE' name='description'/>

استبدل ما باللون الاحمر بالكلمات الدلالية ولا تنسى ان تفصلها بفاصلة ","
استبدل ما باللون الازرق بالوصف الدلالى وهو عبارة عن وصف لموقعك او مدونتك ويتكون من سطر ونص او سطرين
قم بحفظ القالب , وستلاحظ تحسن النتائج بعد فترة وجيزة .. 
والسلام خير ختام
السلام عليكم

شرح إضافة زر أعجبني أسفل مواضيع بلوجر


لا تنسى حفظ نسخة احتياطية من القالب قبل اى تعديل

شرح إضافة زر أعجبني أسفل مواضيع بلوجر


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

ابحث عن هذا الوسم  :
<body>
 ضع بعده ( تحته ) هذا الكود :
 <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ar_AR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 ابحث عن هذا الكود( إذا وجدته اكثر من مرة فالكود الاخير هو المقصود )
<data:post.body/>

 ضع هذا الكود بعده ( تحته ) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <fb:like send="false" width="450" show_faces="false" font="tahoma"></fb:like>
 </b:if>
لإظهار زر المشاركة share بجانب زر الاعجاب بدل ما باللون الاحمر ( كلمة false ) بكلمة true
قم بحفظ القالب , ومبروووك الإضافة
والسلام عليكم ورحمة الله وبركاته

رفع/تركيب قالب بلوجر



من المعروف ان قوالب بلوجر تكون محفوظة بصيغة xml , فلا يوجد قالب بلوجر محفوظ بصيغة اخرى

 طريقة رفع قالب الى مدونة بلوجر

ادخل الى صفحة لوحة تحكم بلوجر
ثم اذهب الى قالب مدونتك ( تحرير HTML )
واضغط على " نسخ احتياطى / استعادة "
 

مبرووك عليك رفع القالب , انتهى الموضوع
الســلام علــيـكم

[Tags] الفرق بين وسمى DoFollow و NoFollow


بسم الله الرحمن الرحيم
قد تكون وسوم او اكواد Html معقدة للبعض منا , ولكنها بالتأكيد مهمة جدا , فلا يوجد اى موقع او مدونة خالى من وسوم html  ولذلك اعددت لكم درساً مهماً مفيداً لمصممى المواقع ومطوريها وكذلك اصحاب المدونات الذين يريدون تطوير مدوناتهم وتحسين نتائج مدونتهم في محركات البحث

ما هو وسم DoFollow

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

مدونة عرب بلوجر
اذا قمنا بتحليل الرابط سنجد التالى
<a href="http://blogger-araby.blogspot.com" target="_blank">مدونة عرب بلوجر</a>
ما باللون الازرق يمثل الرابط الذى سيتم الزحف عليه
ما باللون الاخضر يفيد بأنه عند الضغط على الرابط يُفتح في صفحة جديدة 
مما باللون الاحمر يمثل اسم الموقع 

كما قلت سابقاً يمكننا اضافة علامة الدوفولو DoFollow فيصبح الرابط هكذا
<a href="http://blogger-araby.blogspot.com" target="_blank" rel="dofollow">مدونة عرب بلوجر</a>
وفى الحالتين سيزحف محرك البحث ( جوجل او ياهو .. الخ )  الى موقعك

ما هو وسم NoFollow

وسم النوفولو NoFollow هو عبارة عن امر بلغة Html يأمر محركات البحث بأن لا تقترب من الرابط , لأسباب عديدة منها ان يكون الموقع مضافاً في تعليق أو ان صاحب الموقع لا يريد من عناكب البحث الزحف على هذا الموقع , أو اى سبب اخر .....
مثال على رابط نوفولو
مدونة عرب بلوجر
فنلقم بتحليل الرابط :
 <a href="http://blogger-araby.blogspot.com" rel="nofollow" target="_blank">مدونة عرب بلوجر</a>
هكذا نستنج انه اذا اردنا منع محركات البحث من زيارة رابط ما فعلينا بإضافة وسم النوفولو التالى :
 
 rel="nofollow"
وكل هذا الكلام يتلخص في هذه الصورة :

فوائد الوسم DoFollow

الوسم دوفولو مهم جدا ... حيث انه اساسى في زيادة عدد الباك لينكس BackLinks والبيج رانك الخاص بمدونتك او موقعك , فكلما زاد عدد الروابط الخارجية ( Dofollow ) لموقعك زاد :
  • البيج رانك ( تزكية موقعك )
  • عدد الزوار
  • تحسن نتائجك في جوجل
اتمنى ان تكون قد استفدت من هذه المعلومات في تطوير مدونتك او موفعك ....
الســـــــــلام عــــــــــــليكم

أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة


السلام عليكم ورحمة الله ، أخوكم أيوب من جديد اليوم أقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو ايقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه اليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :






- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات. 



الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  ]]></b:skin>

ثم نضيف الكود التالي قبله .

/*sus code by Ayoub-Etmaiti */
 .Azrar-Ayoub-Etmaiti {
border-radius: 50%; /* الحدود الدائرية  */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Azrar-Ayoub-Etmaiti:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Ayoub-Etmaiti-center {
        text-align: center /*لتوسيط الأزرار  */
}
 /*sus code by Ayoub-Etmaiti */

قم بحفظ القالب 


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<div class="Ayoub-Etmaiti-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ogngpvC4ZJ5WaEYFSFmsnLmeJ7yz4gyiW5zLq_4avE94hLoyw8YseDVJROcD0-qxUusCwdm23vdBSfKmxK2a6Lchhj_H8LFNI1aImilrXKl5njmQDvlDnDvUI0KTrnEjT-CURNj1ZsTx/s1600/sus-Ayoub-Etmaiti-facebook.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R99CNdG_A6DrE_StAMgBxyUKflIXnF8r_y_petRJubzqQOZLKclOUFPzBtKHcAPz_xouwkabNLCkWrlQZ4gKg5VO2HazFayb3Tyr4-BN2SacS-tGZfbtCot9cA1Cn0k2r9TMKwG4GWo7/s1600/sus-Ayoub-Etmaiti-twitter.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1J9YSnM92WiS-go1iAU5i3vj8CLwi2tgxXvlQUmGShatPx2Fe4ohQPgnaQpYBE_0wBYrsbKCkj4OGp_GOcAO33Msfvy1hEqEQWSNlAaIzYjkdNf4m1NUHcVAiD9ZUM1TibjOxgkz741V3/s1600/sus-Ayoub-Etmaiti-youtube.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4wtCED8iUjxsNlxDdOg4OLp7AwOxScfdYOp9KAI5IqVwq1AZy_YnAENIfM3NakI7bYSzMaJftNRH50wTYDbQ9-rAnKL_Jkzd0haITnBaIl0FjzF9rY2i_YgKyH8dzyVVEN7QhGIS_DNC/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>
وأخيرا قم بحفظ الأداة

تغيير خط المدونة العربي لخط أكثر وضوحا مثل tahoma


 لاشك  أن واحدا من أفضل الخطوط العربية هو خط tahoma
وهو الخط الذي اكتب به في هذه المدونة
في مدونات بلوجر يمكنك التحكم في الخطوط وتغييرها عن طريق مصمم النماذج
حيث يمكنك تغيير خطوط عناصر الصفحة بالاختيار من بين عدة خطوط متاحة

لكن للأسف ليس من بينها خط tahoma

في هذا الدرس سأشرح كيفية تغيير خط الصفحة إلى tahoma


1- ادخل الى مدونتك عن طريق الرابط التالي:
http://blogger.com

2- اضغط على رابط "تصميم" أو "design" بجانب مدونتك
3- ستفتح لك صفحة التصميم ، اضغط على "تحرير html"
 4- الان ابحث عن السطور التالية:
<Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
واستبدلها بالسطور التالية:
<Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12pxTahoma, Helvetica, FreeSans, sans-serif"/>
كل ما فعلته هو ان جعلت الخط tahoma أول الخطوط ولا شيء قبله ، ولو لم يكن موجودا فأضفه في الأول(لاحظ الجزء الملون بالأحمر في الكودين السابقين)
يمكنك أيضا تغيير حجم الخط عن طريق تعديل الجزء الملون بالأزرق في الكود السابق
5- الآن قم بعمل حفظ القالب.
 
 ملاحظة : الموضوع منقول للافادة تقديم نورالدين

تغيير لغة المدونة للعربي وجعل النصوص من اليمين لليسار


لتغيير اللغة الافتراضية لمدونة بلوجر ، ولجعل اتجاه النص فيها من اليمين لليسار اتبع التالي:
1- ادخل على مدونتك عبر الرابط التالي:
http://blogger.com

2- بجانب اسم مدونتك ، اضغط على الرابط "اعدادات" أو "settings"


3- ستفتح لك صفحة الاعدادت ، منها اضغط على رابط "تنسيق" أو "formatting"

4- ستفتح لك صفحة التنسيق ، ستجد بها جزء اللغة ، اختر اللغة العربية
5- قم بعمل حفظ للاعدادات

.