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

مرحبا بكم زوار ومتتبعي مدونة أفكار-برو، درسنا اليوم يخص الفئة التي  تعاني مواقعهم/مدوناتهم من الأرشفة و عدم ظهورها على محركات البحث، بحيث سنتعرف إن شاء الله على أحد الطرق الصحيحة لنشر موقعك/مدونتك على على شبكة ضخمة من محركات البحث،
وكما لا يخفى على أحد فإن محركات البحث تعد من أهم المصادر التي يأتي منها الزوار المستهدفين.

1- أولا نقوم بالدخول للموقع من هنــا أو هنــا.

2- أدخل رابط مدونتك و بريدك الإلكتروني كما هو موضح في الصورة أسفله ..

   ثم اضغط على "Proceed"

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

4- ثم أنقر على "Confirm submission"

 بعد ذلك ستحصل على النتيجة التالية :

ستتوصل  برسالة على بريدك الإلكتروني تخبرك بأن العملية تمت بنجاح

5- كخطوة أخيرة و لنشر موقعك/مدونتك على محرك بحث "bing" اضغط على "ِClick here to complete your submission to Bing".ثم أدخل رابط موقعك أو مدونتك و حروف الكابتشا كما هو موضح في الصورة أسفله ..

بعد ذلك ستتوصل برسالة أخرى على بريدك الإلكتروني تخبرك بنجاح العملية ..

النتجية المحصل عليها في الأخير كما بالصورة أسفله.. مبروك عليك

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفظه

طريقتين مختلفتين لتركيب إضافة Anti-Adblocker من أجل تعطيل أداة AdBlock على مدونات البلوجر لزيادة أرباح الإعلانات

 درس اليوم مهم للغاية لمن يعاني من عدم ظهور إعلانات مدونته لدى الزوار الذين يستخدمون أداة "AdBlock" مما ينتج عنه قلة الأرباح، و سنتعرف على طريقة فعالة لإيقاف تشغيل هذه الأداة الخاصة بمنع الإعلانات من الظهور في المواقع و المدونات.

 و بالرغم من أن هذه الإضافة تعتبر نعمة لدى البعض إلا أنها بالمقابل تعتبر نقمة بالنسبة للمدونين و أصحاب المواقع، لكون الإعلانات التي يتم حظرها بواسطة هذه الإضافة تعد المصدر الوحيد للكسب.

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

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

I* الطريقة الأولى : عرض نافذة تطلب من الزائر توقيف adblock فقط

عندما يقوم أحد الزوار (من اللذين يستخدمون adblock لحجب الإعلانات طبعا) بالدخول لموقعك أو مدونتك  سنتبثق له نافدة تخبره أنه لن يمكنه ولوج الموقع حتى يضغط على "ok" وتطلب منه تعطيل أداة منع الإعلانات.

1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، ثم اضغط على قالب كما هو مبين فى الصورة التالية :

2- ثم أنقر على "تحرير Html" كما في الصورة التالية :

* لا تنسى أخذ نسخة إحتياطية لقالب مدونتك، لاسترجاعها عند حدوث أي خطأ ( تعلم كيف تقوم بأخد نسخة إحتياطية لقالب مدونتك و استرجاعها عند الضرورة ).

3- بعد ذلك اضغط على Ctrl + F للبحث عن هذا السطر التالي : 

]]>

4- ثم ألصق الكود التالي فوقه مباشرة : 

#afkarpro_noadblocker { display:none; }

5- الآن اضغط على Ctrl + F للبحث عن هذا السطر التالي :

6- و قم بلصق الكود التالي فوقه :

7- الآن اضغط على Ctrl + F للبحث عن هذا السطر التالي :

8- و قم بلصق الكود التالي فوقه :

9- بعد ذلك قم بحفظ القالب.

النتيجة مبينة في الصورة أسفله : 

II* الطريقة الثانية : إجبار الزائر بتوقيف adblock

عندما يقوم أحد الزوار (من اللذين يستخدمون adblock لحجب الإعلانات طبعا) بالدخول لموقعك أو مدونتك  ستظهر له رسالة تخبره بضرورة تعطيل أداة منع الإعلانات إن هو أراد الولوج للموقع..

1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، 
    ثم اضغط على تخطيط 
    و أضف HTML/JavaScript.

2- قم بنسخ و لصق الكود التالي داخل الأداة :

المرجو تعطيل مانع الإعلانات من فضلك
Please Disable your Ad Blocker
Veuillez Désactiver votre bloqueur de publicité
Por favor, Desactive el bloqueador de anuncios

[ ? ]

3- ثم قم بحفظ الأداة.

النتيجة مبينة في الصورة أسفله :  

مبروك عليك الآن .. بعد مدة قصيرة ستلاحظ تحسن أرباحك من الإعلانات.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفظه

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

في هذا الدرس سنقوم إن شاء الله بإضافة شريط جانبي إلى قالب مدونة بلوجر. بتعبير أدق سنقوم بصنع صورة طبق الأصل من الشريط الجانبي الموجود (المشار إليه باللون الوردي) و نضيفه إلى الجانب المقابل. مع الحفاظ على كل عناصر القالب الأخرى.

و كما ترون في التخطيط أعلاه : رأس الصفحة (header)، الرئيسية (main)، الشريط الجانبي (sidebar) و تذييل الصفحة (footer). كل هذه العناصر موجودة داخل الغلاف الخارجي (outer-wrapper). لِدى و من أجل إضافة الشريط الجانبي، علينا زيادة عرض الغلاف الخارجي(outer-wrapper) لكي يتمكن هذا الأخير من احتواء الشريط الجانبي الجديد. نحتاج أيضا إلى زيادة عرض رأس الصفحة (header) و تذييل الصفحة (footer)، بغرض التنسيق بين عناصر القالب... لا تقلق سيتوضح كل شيء في السطور القادمة يإذن الله.

سوف أقسم التعليمات البرمجية إلى قسمين CSS و HTML.

على بركة الله نبدأ :

1- اذهب إلى لوحة التحكم >> تصميم>> تحرير HTML.

2- قم بأخد نسخة إحتياطية لقالب مدونتك.

3- اتبع الإرشادات أدناه.

التغييرات على CSS :

اتبع الخطوات التالية :

1. إضافة كود CSS الخاص بالشريط الجانبي الجديد

ابحث عن الكود أسفله، للعلم هذا هو كود CSS الخاص بالشريط الجانبي الموجود.

ملاحظة : ليس من الضروري أن تجده مماثلا لما وجدته، المهم هو أنه

يبتدئ بـ 

 #sidebar-wrapper {  

و ينتهي عند أول 

}

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
}

ما سوف تفعله هو نسخ الكود كله، و الصقه مباشرة بعده، و من ثم غير تسمية العنصر إلى  sidebar1-wrapper# ، لتحصل على ما يلي :

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
}
#sidebar1-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
}

انتهت خطوة إضافة "كود الشريط الجانبي الجديد"، و في الخطوات الثلاثة القادمة سنقوم بتغيير عرض بعض العناصر... و لأجل ذلك، سأفترض أن قياسات العرض الـ width البدئية (أي التي وجدتها قبل إجراء التعديلات) هي كالآتي :

Outer-wrapper = 660 px

sidebar-wrapper = 220 px

header-wrapper = 660 px

footer-wrapper = 660 px

ملاحظة : لكل قالب قياساته.

تذكر(ي) أخـ(ـــتـ)ـي الكريمـ(ـة) أن الهدف من هذا الدرس هو إضافة الشريط الجانبي (السايدبار)، نعلم أن السايدبار الموجود عرضه هو 220px، إذن لإنشاء مكان للسايدبار الجديد علينا أن نقوم بالخطوة 2.

2. نزيد من عرض الغلاف الخارجي (outer-wrapper width)

لإظهار الشريط الجانبي الجديد علينا خلق مساحة له، و لذلك سنزيد إلى عرض الغلاف الخارجي نفس عرض الشريط الجانبي الأول، الذي هو في مثال الدرس 220px. لنحصل على شريطين جانبين متساويين. لذلك يجب أن يكون عرض الغلاف الخارجي الجديد 220px + 660px = 880px

خاصيتين مهمتين : 

عرض الغلاف الخارجي القديم = عرض الرئيسية + عرض الشريط الجانبي الموجود 

عرض الغلاف الخارجي الجديد = عرض الغلاف الخارجي القديم + عرض الشريط الجانبي الجديد 

#outer-wrapper {
width: 660px; <------ غير القيمة إلى 880
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

3.  نزيد من عرض رأس الصفحة (header-wrapper width)

لتحقيق التوازي و التناسق و الجمالية، وَجَبَ علينا زيادة عرض رأس الصفحة ليصبح هو كذلك 880px.

#header-wrapper {
width:660px; <------ غير القيمة إلى 880
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4.  نزيد من عرض تذييل الصفحة (footer-wrapper width)

لتحقيق التوازي و التناسق و الجمالية مرة أخرى :) وَجَبَ علينا زيادة عرض تذييل الصفحة ليصبح هو كذلك 880px.

#footer {
  width:660px;  <------ غير القيمة إلى 880
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;

}

انتهينا من التغييرات الخاصة بـ CSS، و بالتالي سننتقل إلى  التغييرات الخاصة بـ  HTML

التغييرات على HTML :

ابحث عن كود مشابه لما يلي : (للعلم هذا هو كود الشريط الجانبي الموجود)

id='sidebar-wrapper'>
class='sidebar' id='sidebar' preferred='yes'>
id='Profile1' locked='false' title='About Me' type='Profile'/>
id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
id='Label1' locked='false' title='Labels' 
type='Label'/>

بعد أن تجده قم بما يلي :

1. انسخ الكود و الصقه مباشرة بعده

2. قم بإعادة تسمية الـ id الخاص بـ div و الخاص بـ b section. يجب أن يكون الـ id الخاص بـ div مثله مثل الـ id في CSS أي :

#sidebar1-wrapper

3. احذف الأدوات (widgets) في كود الشريط الجانبي الجديد.

يجب أن تبدو النتيجة النهائية كالتالي :

 id='sidebar-wrapper'>
 class='sidebar' id='sidebar' preferred='yes'>
 id='Profile1' locked='false' title='About Me' type='Profile'/>
 id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
 id='Label1' locked='false' title='Labels' 
type='Label'/>

 id='sidebar1-wrapper'>
 class='sidebar' id='sidebar1' preferred='yes'>

تغيير موقع السايدبار :

لتغيير موقع الشريط الجانبي، اتبع التعليمات حسب الشكل الذي تريده. تم تلوين العناصر بألوان مختلفة ليتم التعرف على مواقعها بسهولة. هناك 3 عناصر مهمة (هي التي سنغير أماكنها فيما بينها) و هي الرئيسية (main) باللون الأخضر، السايدبار القديم (sidebar) باللون الوردي و السايدبار الجديد (sidebar1) باللون الأحمر.

الحالة 1 : السايدبار القديم و السايدبار الجديد على الجهة اليمنى

هذا ما سوف تحصل عليه إذا اتبعت كل المراحل أعلاه.

الحالة 2 : السايدبار القديم و السايدبار الجديد على الجهة اليسرى

في التغييرات التي أجريناها على CSS، غيِّر الـ float الخاص بـ main-wrapper من startSide$ إلى endSide$ و غيِّر الـ float الخاص بـ sidebar-wrapper من endSide$ إلى startSide$

الحالة 3 : السايدبار القديم على الجهة اليمنى و السايدبار الجديد على الجهة اليسرى

1. في التغييرات التي أجريناها على CSS، غيِّر الـ float الخاص بـ sidebar1-wrapper من endSide$ إلى startSide$

2. و في التغييرات التي أجريناها على HTML، غيِّر موضع كود السايدبار الجديد من موضعه السابق (و هو بَعْدَ div الخاصة بالـ main) إلى الموضع الجديد (و هو قبل div الخاصة بالـ main)، هكذا :

id='sidebar1-wrapper'>
class='sidebar' id='sidebar1' preferred='yes'>

id='main-wrapper'>
class='main' id='main' showaddelement='no'>