snobtal: اضافات بلوجر

Showing posts with label اضافات بلوجر. Show all posts

Thursday, October 1, 2015

اضافة شريط آخر المواضيع في بلوجر : طريقة جديدة و فعالة

hes at 3:46 AM Labels: اضافات بلوجر, شريط آخر الأخبار

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

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

معاينة

كيف يمكنك بسهولة اضافة اداة آخر المواضيع لمدونتك :

لا تنسى تحميل نسخة لقالبك و حفظها في مكان آمن تحسبا لأي خطأ في تطبيق الشرح.
أولا : ان كان قالب مدونتك لا يدعم الـ jQuery قم باضافة الكود التالي بعد <head> مباشرة :

ثانيا : اذهب الى لوحة التحكم في مدونتك على بلوجر >> اختر قالب >> ثم تحرير HTML
ثالثا : قم بنسخ و لصق الكود الموالي قبل </head> مباشرة :

*يمكنك تعديل الكود وفق رغباتك كما يلي :

_تغيير عنوان الاضافة بتغيير : آخر المواضيع

_تغيير عدد المقالات التي تظهر بتغيير : max-result=10

_تغيير المدة التي يظهر فيها العنوان قبل أن يختفي بتغيير : interval:2000

رابعا : ابحث عن : ]]</b :skin> ، ثم قم بلصق الكود التالي قبلها مباشرة :

.tickerwrapper{ position:relative; }
.tickhead{
background:#dd4c39 url(https://lh4.googleusercontent.com/S2yrb7GoLLN7s1-NmlkE_nS9Svzr5DQNM3dcCCp2Occ=s50-no) no-repeat;
background-position:125px 10px;
background-size:20px;
float:right;
line-height:28px !important;
height:29px;
width:130px;
padding:6px 11px 0 15px;
text-align:left;
color:#fff;
font:400 22px 'pt sans',sans-serif;
text-transform:uppercase;
z-index:1;
top:0;
left:0;
}
.ticker2{
padding-left:155px;
height:35px !important;
overflow:hidden;
background:#333;
line-height:35px !important;
}
.ticker2 ul{
margin:12px;
list-style:none;
}
.ticker2 ul li a{
color:#fff;
font:400 15px 'pt sans',sans-serif;
text-decoration:none; }

*يمكنك تعديل الكود ليتوافق مع ألوان مدونتك كما يلي :

_تغيير لون خلفية عنوان الاضافة بتغيير : #dd4c39

_تغيير لون عنوان الاضافة بتغيير : fff#

_تغيير لون خلفية المقالات بتغيير : 333#

_تغيير لون عنوان المقالات بتغيير: fff#

مواضيع ستساعدك لتجد أكواد الألوان المناسبة : مكتبة أكواد الألوان الخاصة بكل مدون محترف

خامسا : اضغط على حفظ التعديلات
سادسا : اذهب الى التخطيط >> اختر المكان المناسب ثم اضغط على "اضافة أداة" >> اختر HTML/javascript >> ثم قم بلصق الكود التالي في الخانة المخصصة لذلك ثم اضغط على حفظ التعديلات :

*لا تنسى تعويض رابط مدونتي برابط مدونتك : و كما تلاحظ رابط مدونتي ليس مسبوقا بأي شيء لذلك قم بحذف كل شيء قبل رابط مدونتك (مثل : http://www. ) كما لا تنسى حذف أي شيء بعد رابط مدونتك (مثل : / ) أو أي شيء من ذلك القبيل .

أتمنى أن تكون أفادتكم تدوينة نهار اليوم ،

ان واجهتك أي مشكلة مع الاضافة لا تتردد في استعمال صندوق التعليقات لطرح مشكلتك و سأجيبك في أقرب الآجال ،

لا تنسى أن تشارك هذه التدوينة مع معارفك من المدونين ان وجدتها مفيدة عن طريق أزرار المشاركة أسفل التدوينة.

لم يبقى لي الا أن أقول لكم بالتوفيق للجميع و تجربة ممتعة ،

مع تحيات أبو معاذ ،

سلام .

اضافة شريط آخر المواضيع في بلوجر : طريقة جديدة و فعالة

اضافة شريط آخر الأخبار المتحرك لمدونات بلوجر ، هي اضافة ممتازة أنصح بها كل من يملك موقعا ذو محتوى كثيف و متجدد باستمرار . اذ بمساعدة هذه الا...

hes at 3:46 AM اقراء المزيد

Friday, September 18, 2015

اضافة لوحة متعددة النوافذ للسايد بار

hes at 1:42 PM Labels: اضافات بلوجر

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

و هذا ما دفع المبرمجين الى تصميم لوحة جيكيوري جانبية متعددة النوافذ تسمح لك و لزوار موقعك بمعاينة ثلاث اضافات في نفس الوقت و في نفس المكان و تمكنهم من الانتقال بينها بسهولة . اقل ما يقال عن هذه الاضافة انها عبقرية ، احترافية و جد عملية حيث تساعدك على استغلال المساحات أفضل استغلال ممكن و لفعاليتها تعتبر موضة سنة 2015 اذ يكاد لا يوجد موقع الا ويستخدمها .

ماذا يميز هذه الاضافة :

استعمال هذه الاضافة يصبح يوما بعد يوم أكثر انتشارا لما تقدمه من مزايا و حلول رائعة ، اذكر أهمها :

تمنحك افضل استغلال للمساحة - تساعدك على توفير و تقليص الكثير من المساحة في السايد بار بفضل نوافذها المتعددة
لن تبطئ سرعة تحميل موقعك – الاضافة مصممة باستعمال smooth jQuery code أكواد خفيفة لن تؤثر على سرعة تحميل موقعك
سهولة تنصيبها واستعمالها - يمكنك اضافة أي اضافة في أي نافذة شئت و بسهولة تامة من خلال لوحة التحكم الخاصة ببلوجر في صفحة التخطيط
سهولة تعديلها - الاضافة مصممة باستعمال أكواد بسيطة غير معقدة مما سيمكنك من تعديلها بسهولة لتصبح مطابقة لألوان مدونتك و مقاييس السايد بار خاصتك
تعطي لمسة احترافية لموقعك - الاضافة جميلة و تجعل من زيارة موقعك تجربة فريدة من نوعها قد تدفع الزائر للعودة مرة أخرى

كيف تضيف هذه الأدات لموقعك :

<ملاحظة> دائما قبل البداية في تجريب الطريقة الصحيحة لزرع هذه الاضافة في قالب موقعك عليك ان لا تنسى حفظ قالبك الحالي في مكان آمن تحسبا لاي خطأ قد يحدث . تذكر دائما : الوقاية خير من العلاج . </ملاحظة>

لن أطيل عليك أكثر من هذا لنبدأ الشرح :

أولا : عليك التحقق من أن قالبك يدعم الـ jQuery و اضافتها في حالة عدم دعمه لها . لان هذه الاضافة مبرمجة بلغة الـ jQuery و لن تظهر على موقعك الا اذا كان موقعك يدعمها .

ان لم تكن تعرف الطريقة الصحيحة لفعل ذلك انصحك بقراءة هذه المقالة

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

ثالثا : اضغط على CTRL+F لتفتح لك علبة البحث المخفية ثم ابحث عن :

]]></b:skin>

ثم اضف الكود التالي قبله مباشرة :

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 10px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;

}

رابعا : عليك ايجاد الـ div tag الخاص بالـ sidebar لموقعك لأن كل مصمم يستعمل ديف تاج خاص به و لا يوجد ديف تاج موحد يجب ان يلتزم به كل المبرمجين.

عادة يستخدم المبرمجين الديف تاج التالي : <div id='sidebar-wrapper'> ان وجدته في قالبك فهنيئا لك و ان لم تجده فابحث عن sidebar أو side أو قم باستخراج الكود كما يفعل المحترفون من خلال الدخول للصفحة الرئيسية لموقعك و النقر باليمين على الـسايد بار و اختيار inspecter l’element ... ان كنت لا تعرف كيف تجد الديف تاج الخاص بالسايد البار الخاص بموقعك لا تحزن فأبو معاذ موجود دائما اطلب ذلك باستخدام التعليقات و سأقوم باستخراجه لك .

نعود لشرحنا ، بعد ان تجد الـ div tag الخاص بالـ sidebar الخاص بموقعك قم بنسخ و لصق الكود التالي بعده مباشرة :

<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:last a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:last").show();

$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class="about_tab"><a href="#widget-themater_tabs-1432447472-id1" style="
padding-right: 10px;
padding-left: 10px;
">الأرشيف</a></li>
<li class="tags_tab"><a href="#widget-themater_tabs-1432447472-id2" style="
padding-right: 10px;
margin-right: -;
width: 73px;
padding-left: 10px;
" >أقسام الموقع</a></li>
<li class="laster"><a href="#widget-themater_tabs-1432447472-id3" style="float:right; width: 88px; padding-right: 10px;padding-left: 10px;">الأكثر زيارة</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>


<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>

</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>

<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>

خامسا : اضغط على حفظ التغييرات.

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

بعد الانتهاء و تطبيق كل الخطوات ستظهر لك الاضافة على الشكل الموالي

مواضوع قد يساعدك أثناء تغيير ألوان الاضافة : مكتبة أكواد الألوان الخاصة بالمدون المحترف

أتمنى أن تكون أفادتكم تدوينة نهار اليوم ،

ان واجهتك أي مشكلة مع الاضافة لا تتردد في استعمال صندوق التعليقات لطرح مشكلتك و سأجيبك في أقرب الآجال ، بالنسبة لمن لم يستطع ايجاد الـ ديف تاج أنا في الخدمة و في انتظار تعليقك اعطني رابط موقعك و يأعطيك الديف تاج الخاص بالسايد بار .

لا تنسى أن تشارك هذه التدوينة مع معارفك من المدونين ان وجدتها مفيدة عن طريق أزرار المشاركة أسفل التدوينة.

لم يبقى لي الا أن أقول لكم بالتوفيق للجميع ،

مع تحيات أبو معاذ ،

سلام .

اضافة لوحة متعددة النوافذ للسايد بار

تطور التدوين منذ أول مرة بدأ و تطورت أساليب استخدام المدونات و تطورت معها العديد من الاضافات التي مع مرور الزمن أصبح من الصعب الاستغناء عنها...

hes at 1:42 PM اقراء المزيد

Sunday, September 6, 2015

اضافة صندوق اعجابات فيس بوك منبثق لموقعك

hes at 8:33 AM Labels: اضافات بلوجر, تسويق و تواصل اجتماعي ،

أصبح مؤخرا فيس بوك في ريادة وسائل الاتصال الاجتماعي لاحتوائه على ما يزيد عن 1,4 بليون مستخدم ، يسجل حوالي 800 مليون منهم الدخول لمرة واحدة في اليوم على الأقل ... مما جعله مصدرا مهما للزيارات يستخدمه جل المدونين لجلب الزوار لمدوناتهم و التسويق لها . و لهذا يسعى الجميع لزيادة عدد معجبيه على صفحة الفيس بوك الخاصة بمدونته و من بين الطرق الناجحة في ذلك و المجربة هو استعمالك هذه الاضافة

ماذا ستربح من استعمال هذه الاضافة ؟

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

خصائص الاضافة ؟

صندوق جذاب و مريح للزائرين و غير مزعج حيث يعتمد على الكوكيز ليظهر مرة واحدة عند دخول الزائر الجديد ثم يتوقف عن الظهور أثناء تصفح الزائر للمدونة.

<تنبيه> قبل أن تقوم بتنصيب الاضافة و قبل أن تقوم بمعاينتها أنصحك بقراءة قسم التعديلات و القيام بتعديل الاضافة لتصبح قادرا على معاينتها كلما زرت مدونتك (أي احذف كود الكوكيز) ... ثم بعد الانتهاء من تنصيبها و الاقتناع بالصورة التي هي عليها قم باضافة كود الكوكيز ان أردت ذلك ... لانك لو ابقيت على كود الكوكيز لن تتمكن من معاينة الاضافة الا مرة واحدة ثم لن تنبثق النافذة مرة أخرى </تنبيه>

طريقة تنصيب الاضافة :

سجل الدخول لحسابك على بلوجر >> اختر المدونة التي تريد أن تضيف اليها الاضافة >> اختر التخطيط >> ثم اضغط على اضافة أدات (لا يهم مكان اضافة الأدات)

بعد أن تفتح لك نافذة اضافة الأداة : اختر "HTML/Java script" من القائمة

قم بنسخ و لصق الكود المرفق أسفله ثم اضغط على زر حفظ

و مبروك عليك الاضافة جاهزة و لم يبقى امامك الا تعديلها .

طريقة تعديل الاضافة :

بعد اضافة الكود عليك تغيير "https://www.facebook.com/betheproblogger" برابط صفحتك على الفيس بوك
الاضافة مبرمجة على الظهور بعد قضاء الزائر 5 ثواني في موقعك . لو أردت أن تنبثق نافذة الاضافة في وقت أطول أو أقل من ذلك ما عليك الا تغيير الرقم 5000 في الكود التالي (ابحث عنه باستخدام Ctrl+F)

.delay(5000)

الاضافة كما سبق و ذكرت تعتمد على الكوكيز و هي مبرمجة على الظهور مرة واحدة فقط لأي زائر جديد ثم ستتوقف عن الظهور مدى الحياة الا ان قام الزائر بمحو الكوكيز من متصفح الويب لديه . ان أردت أن تنبثق نافذة الاضافة في كل مرة يتم فيها تصفح أي صفحة من موقعك ما عليك الا حذف "كود الكوكيز" هذا الكود :

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

و أما ان أردت أن تنبثق الاضافة كلما زار أحدهم الصفحة الرئيسية لمدونتك مهما كان ، ما عليك الا محو "كود الكوكيز" ثم التوجه الى لوحة التحكم >> قالب >> تخصيص >> لا تنسى الاحتفاظ بنسخة احتياطية قبل اجراء أي تغيير>> ابحث عن

</ body>

ثم قم بنسخ و لصق الكود التالي أسفله مباشرة :

<b:if cond='data:page.type == "index"'><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<style>

#fbox-background {

display: none;

background: rgba(0,0,0,0.8);

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 99999;

}

#fbox-close {

width: 100%;

height: 100%;

}

#fbox-display {

background: #eaeaea;

border: 5px solid #828282;

width: 340px;

height: 230px;

position: absolute;

top: 32%;

left: 37%;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#fbox-button {

float: right;

cursor: pointer;

position: absolute;

right: 0px;

top: 0px;

}

#fbox-button:before {

content: "X";

padding: 5px 8px;

background: #828282;

color: #eaeaea;

font-weight: bold;

font-size: 10px;

font-family: Tahoma;

}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {

color: #aaaaaa;

font-size: 9px;

text-decoration: none;

text-align: center;

padding: 5px;

}

</style>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...

if (arguments.length > 1 && String(value) !== "[object Object]") {

options = jQuery.extend({}, options);

if (value === null || value === undefined) {

options.expires = -1;

}

if (typeof options.expires === 'number') {

var days = options.expires, t = options.expires = new Date();

t.setDate(t.getDate() + days);

}

value = String(value);

return (document.cookie = [

encodeURIComponent(key), '=',

options.raw ? value : encodeURIComponent(value),

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

options.path ? '; path=' + options.path : '',

options.domain ? '; domain=' + options.domain : '',

options.secure ? '; secure' : ''

].join(''));

}

// key and possibly options given, get cookie...

options = value || {};

var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

jQuery(document).ready(function($){

if($.cookie('popup_facebook_box') != 'yes'){

$('#fbox-background').delay(5000).fadeIn('medium');

$('#fbox-button, #fbox-close').click(function(){

$('#fbox-background').stop().fadeOut('medium');

});

}

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

});

</script>

</div>

</div>

href=https://www.facebook.com/betheproblogger&width=342&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>

<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://betheproblogger.blogspot.com/">Helplogger</a></div>

</div>

</div> </b:if>

ثم اضغط على حفظ

الخاتمة :

بعد كل هذا العناء و التغيير و التعديل ستبدأ اضافتنا بتحويل قرائك و زوارك الجدد الى قراء أوفياء يتابعون صفحتك على الفيس بوك و يتفاعلون مع منشوراتك عليها .

<ملاحظة> اذا لم تستطع معاينة الاضافة و لم تنبثق لك نافذة صندوق اعجابات الفيس بوك تأكد جيدا :

من تطبيقك لكل الخطوات بسلاسة
قم بمحو الكوكيز من متصفح الويب خاصتك (يمكنك فعل ذلك عن طريق برنامج الـ C Cleaner)
راجع قسم تعديل الاضافة من هذه التدوينة لتتعلم طريقة السماح للاضافة بالظهور في كل زيارة لمدونتك

ثم أعد المحاولة </ملاحظة>

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

هنا وصلنا للنهاية ، لم يبقى لي الا أن أقول لكم بالتوفيق للجميع،

مع تحيات أبو معاذ،

سلام .

اضافة صندوق اعجابات فيس بوك منبثق لموقعك

أصبح مؤخرا فيس بوك في ريادة وسائل الاتصال الاجتماعي لاحتوائه على ما يزيد عن 1,4 بليون مستخدم ، يسجل حوالي 800 مليون منهم الدخول لمرة واحدة ف...

hes at 8:33 AM اقراء المزيد

Sunday, August 16, 2015

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

hes at 10:30 AM Labels: اضافات بلوجر, دروس سيو, نصائح تدوين

بعد انتهائي من انشاء المدونة و قبل البدئ في التدوين قررت القيام ببعض التحسينات لتقوية السيو الداخلي لمدونتي الجديدة و لتصبح صديقة لمحركات البحث . لما في ذلك من أهمية لتحسين أداء موقعي و نتائجه في محركات البحث .

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

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

تعديلات وصف المدونة ( Description Meta tags) , تصميم صفحة (404 not found) , تخصيص روابط اعادة التوجيه للروابط الميتة , ملف Robots.txt , تخصيص علامات الرؤوس المخصصة لبرامج الروبوت

للبدأ و حتى تتمكن من تطبيق كل ما سأشرحه ، عليك أولا تسجيل الدخول في بلوجر ثم الولوج الى لوحة التحكم (Dashboard) الخاصة بمدونتك ثم ضمن الإعدادات في الأسفل > ابحث عن تفضيلات البحث (كما هو مبين في الصورة) و بالضغط عليها ستظهر لك كل الاضافات الجديدة الخاصة بالسيو . سأقوم بشرح كل الاعدادات الواحد تلو الآخر و طريقة استعماله الصحيحة .

<تحذير> أقترح عليك قراءة هذا الدليل الشامل على محمل الجد و الالتزام بتطبيقه حرفيا فأي خطوة خاطئة قد تؤدي الى ازالة و انهاء فهرسة جزء من محتوى مدونتك على محركات البحث مما سيكلفك الكثير من الوقت لاسترجاعه </تحذير>

لم أقصد اخافتك بهذا التحذير ولكن كل ما أردت قوله هو أنه حان الوقت لتأخذ على محمل الجد أداء موقعك و نتائجه على محركات البحث.

دعنا لا نضيع المزيد الوقت و لنتعرف على جميع الأدوات الجديدة و كيفية استخدامها الصحيحة

أولا : تعديلات وصف المدونة ( Description Meta tags) :

تعديلات وصف المدونة , Description Meta tags , otimize seo blog discreption , تحسينات أساسية لتقوية سيو موقعك على محركات البحث

لطالما قرأت حول الميتا تاقز و طريقة اضافتها و لكن أجزم لك أن هذه أسهل طريقة لفعل ذلك حيث بمجرد ادخال وصف مدونتك في هذا المكان سيتم ادراجها اوتوماتكيا في تكويد قالبك . أليس بلوجر جيدا !!

اذن في هذا المكان ستشرح حول ماذا تتكلم مدونتك . أكتب فقرة اعلامية من 150 حرف تساعد فيها القراء على معرفة حول ماذا تتكلم مدونتك و هذا صدقني سيمكنك من الحصول على العديد من النقرات من مدونات البحث . كما ينصح خبراء السيو باستعمال أكبر كم ممكن من الكلمات المفتاحية المستهدفة في وصف مدونتك على الميتا تاغز.

<مثال> كن المدون المحترف مدونة تعليمية تساعد المدونين على منصة بلوجر لانشاء مدونات أفضل بتقديم شروحات و دروس حول : التدوين ، سيو ، برمجة ، قوالب ، تصمميم المواقع ، كيفية استعمال وسائل التواصل الاجتماعي ، ريادة الأعمال ... </مثال>

احرص أن لا تتجاوز الـ 150 حرفا في وصفك لأن محركات البحث تهمل ما يأتي بعد الـ 150 حرفا الأولى كما يظهر في هذا المثال التوضيحي :

سيظهر موقعك بهذا الشكل بعد مرور بوت محركات البحث بموقعك بعد أيام من اضافتك للوصف .

ثانيا : تصميم صفحة (404 not found) :

الصفحة 404 مصطلح يطلق على الصفحة التي تمثل جميع الصفحات الغير الموجودة على موقعك أو الصفحات الموجودة ولكن لا يحق للزوار الولوج اليها . و هذه الاضافة ستمكنك من تصميم هذه الصفحة باستعمال لغة HTML . اطلق العنان لابداعك و صمم الرسالة التي تريد تركها لمن ضاع بين صفحات موقعك و وجد نفسه أمام طريق مقطوعة . فاجؤوني يا معشر المبرمجين انا في انتضار ابداعاتكم .

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

<div dir="rtl" style="text-align: right;" trbidi="on">
<h2 style="text-align: center;">
<span style="font-size: x-large;">صفحة غير موجودة </span></h2>
<h3 style="text-align: center;">
<span style="font-size: small;">يبدو كأنك ضائع ، و وصلت هنا عن غير قصد ، لكن لا تقلق لدي شيء مميز من أجلك :</span></h3>
<div>
<b><br />
</b></div>
<div>
<b>     </b><br />
<b>أفضل مقالات [<a href="http:/#" target="_blank">اسم مدونتك</a>] حتى الآن :</b><br />
<br /></div>
<div>
<b>         . [<a href="http:/#" target="_blank">المقال الأول</a>]</b></div>
<div>
<b>         </b><b>. </b><b>[<a href="http:/#">المقال الثالث</a>] </b></div>
<div>
<b>         </b><b>. </b><b>[<a href="http:/#">المقال الرابع</a>]</b></div>
<div>
<b>         </b><b>. </b><b>[<a href="http:/#">المقال الخامس</a>]</b></div>
<div>
<ul style="text-align: right;"></ul>
</div>
<div>
<b><br />
</b></div>
<div style="text-align: center;">
<b><br />
</b> <b>عد للصفحة الرئيسية من <a href="http:/#">هنا</a></b></div>
<div>
<b><br />
</b></div>
<div style="text-align: center;">
<b>ان كنت فقدت الرغبة على مواصلة تصفح موقعي مازال بامكانك وكزي على فبيس بوك من <a href="http:/#">هنا</a>. </b></div>
</div>

لمشاهدة صفحة الـ 404 الخاصة بك حاليا أو معاينتها بعد اجراء التعديلات قم بكتابة عنوان موقعك و اضافة أي شخبطة لآخره و انظر ماذا سيظهر لك

<مثال> Betheproblogger.blogspot.com/hhhhhhhhhhhhhhhhhhhhh </مثال>

ثالثا : تخصيص روابط اعادة التوجيه للروابط الميتة :

البحث عن الروابط المعطلة الميتة في موقعك و اعادة توجيهها للصفحة الرئيسية

هذه الاضافة مفيدة في حالة قام طرف ثالث بالربط لموقعك باضافة رابط لا يعمل (اما غير موجود بتاتاً أو كان موجودا و قمت بازالته ) .

استخدم هذه الاضافة لاحقا في حالة قمت بازالة مقالة أو صفحة كانت موجودة . أو قم بالبحث عن جميع الـ 404 الموجودة في موقعك عن طريق أدوات جوجل ويب ماستر ، قد تكون عملية مملة و طويلة و لكن في الحقيقة هي جد مفيدة لتحويل تدفق الزيارات المفقود الى تدفق حقيقي و الاستفادة منه.

<اعلان> قد أقوم بكتابة شرح مطول عن طريقة البحث عن الروابط الميتة في موقعك باستخدام أدوات جوجل ماستر و طريقة اعادة توجيهها ان وجدت العديد من الحريصين على ايقاف نزيف تدفق الزيارات، لو كنت تحتاجه لا تتردد في طلبه باستعمال صفحة اتصل بنا سأكون سعيدا بمساعدتك </اعلان>

رابعا : ملف Robots.txt :

تعديل ملف Robots.txt لتحسين حركة برامج الروبوتات لأرشفة الموقع

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

يتم استعمال هذا الملف لايقاف برامج روبوتات محركات البحث عن الاطلاع عن المحتوى الغير مهم بموقعك و الذي لا تريد منها ان تقوم بأرشفته ، مثل : صفحة البحث ، صفحة الأرشيف ...

باختصار شديد ، أقترح عليك استخدام ملف Robots.txt لتوجيه البوت نحو فهرس موقعك (أو ما يدعى : خريطة الموقع | Site map ) و ايقافها عن أرشفة المحتوى المضاعف في الميتا تاج. لتتعرف على هذا الملف جيدا أنصحك بقراءة هذا المقال المعد خصيصا لك من طرف فريق بلوجر و كما سيساعدك هذا الشرح المقدم من طرف فريق جوجل ويب ماستر على تصميم ملفك الخاص بنفسك فقط اقرأ ثم طبق و جرب ملفك بالأداة المخصصة لذلك.

أنا أفضل أن تقوم أنت بكتابة ملفك الخاص وفق ما تحتاجه ووفق الأكواد المستعملة في برمجة قالبك و لكن ان عجزت عن فعل ذلك سيكون من دواعي سروري أن أخبرك أنني سأحاول في الأيام المقبلة القريبة كتابة شرح مفصل عن الطريقة الصحيحة لفعل ذلك مرفقة بنسخة لملفي Robot.txt الشخصي .

اقترك عليك الاشتراك في النشرة البريدية الخاصة بمدونتي من هنا لتكون أول من يعلم بذلك و لا تنسى تأكيد اشتراكك لو سمحت.

خامسا : تخصيص علامات الرؤوس المخصصة لبرامج الروبوت :

تخصيص علامات الرؤوس المخصصة لبرامج الروبوت لتحسين أرشفة الموقع من طرف برامج روبوتات البحث

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

كما سبق و أخبرتك سابقا أنا أفضل أن تقوم أنت شخصيا بتخصيص هذه الاضافات و لكن لمن تعذر عليه الأمر و أختلطت عليه المفاهيم اليك أقترح عليك أن تختار الاختيارات الموضحة في الصورة المرفقة أعلاه.

حسنا وصلنا للختام و لم يبقى لي سوى أن أؤكد على تطبيق هذه النقاط و بالطريقة المبينة للحصول على دفعة معتبرة لنتائجك على محركات البحث . ان أشكلت عليك أي نقطة من الشرح لا تتردد في سؤالي باستخدام التعليقات . كما ان أعجبتك هذه المقالة ووجدتها مفيدة لك لا تنسى مشاركتها مع معارفك من المدونين.

مع تحيات أبو معاذ ،

سلام

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

بعد انتهائي من انشاء المدونة و قبل البدئ في التدوين قررت القيام ببعض التحسينات لتقوية السيو الداخلي لمدونتي الجديدة و لتصبح صديقة لمحركات ال...

hes at 10:30 AM اقراء المزيد

snobtal

Thursday, October 1, 2015

اضافة شريط آخر المواضيع في بلوجر : طريقة جديدة و فعالة

كيف يمكنك بسهولة اضافة اداة آخر المواضيع لمدونتك :

اضافة شريط آخر المواضيع في بلوجر : طريقة جديدة و فعالة

Friday, September 18, 2015

اضافة لوحة متعددة النوافذ للسايد بار

ماذا يميز هذه الاضافة :

كيف تضيف هذه الأدات لموقعك :

اضافة لوحة متعددة النوافذ للسايد بار

Sunday, September 6, 2015

اضافة صندوق اعجابات فيس بوك منبثق لموقعك

ماذا ستربح من استعمال هذه الاضافة ؟

خصائص الاضافة ؟

طريقة تنصيب الاضافة :

طريقة تعديل الاضافة :

الخاتمة :

اضافة صندوق اعجابات فيس بوك منبثق لموقعك

Sunday, August 16, 2015

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

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

أولا : تعديلات وصف المدونة ( Description Meta tags) :

ثانيا : تصميم صفحة (404 not found) :

ثالثا : تخصيص روابط اعادة التوجيه للروابط الميتة :

رابعا : ملف Robots.txt :

خامسا : تخصيص علامات الرؤوس المخصصة لبرامج الروبوت :

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

حمل تطبيقنا الرسمي

تابعونا على الفيس بوك

التسميات

اكثر مواضيع زيارة في هذا الشهر

اخر فيديوهات على قناة هشام هاشم

عن المدونة