-->

مواضيع مهمة

السيو

بلوجر

برمجة

تطوير

تصميم

السبت، 28 فبراير 2015

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

إضافةأ داة التحكم في حجم خط المواضيع لبلوجر

السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونة برو أيوب درس اليوم الذي هو عبارة عن إضافة لقوالب البلوجر وبالضبط إضافة أداة التحكم في حجم خط المواضيع داخل بلوجر هذه الإضافة المميزة ظهرت أولا في مدونات ووردبريس لتنتقل إلى بلوجر حيث ستمكن الزائر من التحكم في الخط حسب الحجم الذي يريد كما ستزيد من جمالية الموقع.
إذن لننتقل للشرح :
إذهب للوحة تحكم بلوجر > قالب > تحرير HTML : 
ابحث عن </head> :
أضف فوقه أولا كود أيقونات font awesome
<link href='https://dl.dropboxusercontent.com/u/280199022/icons.css' id='fontawesome' rel='stylesheet' type='text/css'/>
ثم أضف فوقه الكود التالي :
<script type='text/javascript'>
$(document).ready(function(){
  var section = new Array(&#39;.body-post&#39;);  
  section = section.join(&#39;,&#39;);
  
  // Reset Font Size
  var originalFontSize = $(section).css(&#39;font-size&#39;);
  $(&quot;.resetFont&quot;).click(function(){
    $(section).css(&#39;font-size&#39;, originalFontSize);  
  });

  // Increase Font Size
  $(&quot;.increaseFont&quot;).click(function(){
    var currentFontSize = $(section).css(&#39;font-size&#39;);
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css(&#39;font-size&#39;, newFontSize);
    return false;
  });

  // Decrease Font Size
  $(&quot;.decreaseFont&quot;).click(function(){
    var currentFontSize = $(section).css(&#39;font-size&#39;);
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css(&#39;font-size&#39;, newFontSize);
    return false;
  });
});
</script>
في حالة عدم عمل الكود غير body-post. بـ post-body.
إبحث عن */]]></b:skin> :
أضف فوقه الكود التالي :
.plus .minus .repeat {
position:relative;
}

.plus:before,.minus:before,.repeat:before {
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
color:#0099CC;
font-size:17px;
margin-left:.5em;
right:5px;
float:left;
}

.plus:before {
content:"\f055"
}
.minus:before { content:"\f056" } .repeat:before { content:"\f01e" } .fontresize p { margin-right: 6px; float: right; } .fontresize { width: 154px; float: left; border: 1px solid #EDEDED; margin-left: -21px;}
الأن ابحث عن <data:post.body/> ستجد أكثر من واحد إختر الثالث:
أضف الكود التالي بعده :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fontresize'>
  <p>حجم الخط :</p>
<a class='increaseFont'><span class='plus'/></a><a class='decreaseFont'><span class='minus'/></a><a class='resetFont'><span class='repeat'/></a>
  </div>
  </b:if>
الأن أحفظ القالب.
إلى هنا إنتهى الدرس لا تنسو مشاركة الموضوع ومشاركتنا برأيكم عبر التعليقات.
مواضيع مفيدة :

الخميس، 26 فبراير 2015

100 100 100
شرح موقع hellofood لشراء الوجبات الغذائية عبر الإنترنت وتوصيلها إلى باب منزلك السلام عليكم ورحمة الله وبركاته اليوم سأشرح لكم موقع h...

شرح موقع hellofood لشراء الوجبات الغذائية عبر الإنترنت وتوصيلها إلى باب منزلك

السلام عليكم ورحمة الله وبركاته اليوم سأشرح لكم موقع hellofood - هيلوفود هذا الموقع الألماني الأصل والذي شمل مؤخرا بعض دول العالم العربي مثل المملكة السعودية العربية  في مطاعم الرياض و مطاعم جدة والمملكة المغربية  وجمهورية مصر العربية  ويعد اختصاص هذا الموقع هو طلب الطعام عن طريق الانترنت، انشىء ه\ا الموقع من قبل مختصين بحل المشاكل, ومفكرين، ومصمين، يعملون على مدار الساعة لجعل هلوفود أفضل تجربة لجميع الزبائن لطلب الطعام على الانترنت. ففريق هذا الموقع  يعمل حالياً في أكثر من 30 دولة حول العالم من بينها 3 دول عربية وسيشمل قريبا باقي الدول العربية, لتلبية طلبات المستخدمين الذين يحبون الأطعمة السريعة فنحن نعرف أن المهووسين وعمال الشركات ليس لهم وقت لتحضير الطعام أو الإنتقال لمحلات خاصة لشراءها فهذا الموقع سيكون البديل الأفضل لهم فبمجرد تصفح الموقع لدقائق واختيار طعامك ما عليك سوى الإنتظار 30 دقيقة كحد أدنى أو 60 دقيقة كحد أقصى لوصول وجبتك كما طلبتها.

الأن سنأتي للشرح بالصور لكيفية الطلب من موقع hellofood

1- سندخل للموقع "هلوفود المغرب" ستجدون الروابط في أخر الموقع :
2- الأن سنختار المدينة والمنطقة بالضبط ثم نضغط على !Trouvez :
حاليا هناك 4 مدن مدرجة ستتم إضافة المدن بعد مرور الأيام مثلا سأختار مدينة الدار البيضاء, عين الشق
3- الأن ستحصل على لائحة بعدد المحلات المتوفرة والثمن الأدنى للدفع ونوع التوصيل وتقييم المستخدمين, نختار المطعم ثم نضغط voir le menu :
4- الأن ستحصل على قائمة بالتفاصيل :
_1: قائمة بأنواع الطعام.
_2: أثمنة الأنواع.
_3: معلومات عن طلبك "تحصل عليها بعد إرسال طلبك".
_4: تعليقات واراء المشترين.
_5: معلومات أكثر.
5- سأختار طلب عشوائي لأنه فقط من أجل التجربة, طبعا سأختار على إطار فيه التفاصيل كما ذكرت في المثال السابق :

إلى هنا انتهى الشرح وإليكم روابط الموقع حسب الدولة :



مواضيع مفيدة :

الأربعاء، 4 فبراير 2015

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

كيف ترفع نسبة التفاعل في صفحتك على فيس بوك بشكل كبير!

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

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

أهم أسباب تراجع التفاعل في صفحات الفيس بوك :
1 ) ان من اهم اسباب تراجع التفاعل في صفحات الفيس بوك هو التحديثات التي تقوم بها فيس بوك على سياستها فالتقارير الأخيرة تقول ان نسبة وصول المنشور الى المعجبين انخفظت الى 10% وهناك من يقول اقل من ذلك، اي انه كل 100 شخص 10 منهم فقط من يصلهم المتشورمع احتمال عدم تفاعل هؤلاء العشرة كلهم.
2 ) الصفحات المتكررة أو المنسوخة عن الأصلية لعبت دور مهم في انخفاض تفاعل الصفحات الأصلية فلكل صفحة أصلية ستجد 10 فما فوق من الصفحات المنسوخة عنها, وهذا يسبب الإحباط للمستخدم وللمدراء أيضا.
3 ) المحتوى المتكرر ونشر التفاهات التي لا فائدة سبب من أسباب تراجع التفاعل فالزائر أو المتابع غالبا ما يبحث عن شئ يفيده أو يشعره بالرفاهية (معلومات ثقافية, قصص, صور مضحكة, دروس تعليمية ...) ولكن عندما يجد هذا المتابع شيئا غير الذي يبحث عنه فكن متأكد أنه لن يتفاعل مع منشورات صفحتك بل قد يلغي إعجابه بها, كذلك نجد أن بعض الصفحات تنشر نفس المحتوى وفي هذه الحالة سيتفاعل المعجبون من الصفحات التي تنشر أولا.
4 ) الإعلان الممول يعتبره الكثيرون سببا لزيادة المعجبين وزيادة التفاعل, لكن العكس صحيح, فربما ستحصل على معجبين نعم فأنا متفق معك, لكن هؤلاء المعجبين أغلبيتهم لن يتفاعلوا لأنهم ليسوا جميعا مهتمين بصفحتك كما تظن, فربما ضغطوا بالصدفة على زر إعجاب أو اثارهم الفضول, لكن عندما يأتي المستخدم ويبحث عن صفحتك ويضع لك اعجابا فهذا يعني أنه مهتم بها. 
نصائح للحفاظ على تفاعل صفحتك وزيادة نسبته :
بعدما  تطرقنا لبعض الأسباب سنناقش الحلول لزيادة تفاعل صفحتك و هذا هو سبب دخولك لهذا المضوع فسنقترح بعض الحلول المجربة و التي إنتهت بحسن الخاتمة و زيادة التفاعل :
1 ) نشر محتوى جيد و عليه إقبال ، و لا ننسى أن يكون مرتبطا بما تقدمه صفحتك !
2 ) عدم نشر الروابط  بكثرة  و إذا كانت صفحتك صغيرة فيستحسن نشر من 1 منشور إلى 3 في اليوم و في أوقات مناسبة .
3 ) عدم إستغلال الصفحة لعمل إشهارات .
4 ) حاول دائما تلبية طلبات المعجبين .
5 ) حاول دائما أن تضع نفسك في مكان الزائر لتكون قد فهمت الأمر بأكثر جدية.
6 ) قم بالإشارة إلى أشخاص وصفحات أخرى كبيرة في منشورات صفحتك وسترى أن التفاعل سيكون أكبر لأن المنشور يصل إلى عدد أكبر من ألأشخاص .
7 ) قم بعمل مسابقات أحيانا لأن المستخدم يحب دائما الأمور التي فيها منافسة وحتى إن لم تكن هناك جوائز.


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

مواضيع مفيدة :

الاثنين، 2 فبراير 2015

100 100 100
[درس] تأكد من أن وظائف هاتف الأندرويد تعمل قبل شراءه السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد في درس مفيد ومهم لكل من يريد أ...

[درس] تأكد من أن وظائف هاتف الأندرويد تعمل قبل شراءه

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

نبدأ على بركة الله, أولا إفتح هاتفك وادخل إلى لوحة المفاتيح وركب الكود التالي:
*#0*#


وستحصل تلقائيا على الصفحة التالية مليئة بالأزرار ولكل زر وظيفة.


نبدأ بشرح الوظائف الأزرار الثلاثة التالية خاصة بالألوان (الأحمر, الأخضر, الأزرق) أي الألوان الأساسية في الهاتف ويكمن دورها في معرفة جودة ألوان الهاتف.


زر Receiver للتأكد من صوت سماعة الهاتف والصوت العادي يكون عبارة عن طنين مستمر.


Vibration للتأكد من عمل الإهتزاز.


Dimming لمعرفة جودة اللون عند تغير والإضاءة.



Mega cam للتأكد من عمل الكاميرا الخلفية للهاتف.



Sensor يقدم لك عدة معلومات كتغير قيم الإرتفاعات أثناء تحريك الهاتف.



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


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



Sleep للتأكد من أن الهاتف قادر على الإنتقال للوضع المستقر أو النائم (شاشة منطفئة).


Speaker من أن صوت الهاتف أثناء التكلم جيد.


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


Front cam لتجريب الكاميرا الأمامية في حالة توفرها في الهاتف.


Black مثله مثل Red و Green حيث سيتعرف من خلاله جودة اللون الأسود في الهاتف.


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

مواضيع مفيدة:

الأحد، 25 يناير 2015

100 100 100
شرح مفصل للـ hreflang ودوره في الإستهداف الدولي السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونتنا اليوم وفي هذا الدرس سنتك...

شرح مفصل للـ hreflang ودوره في الإستهداف الدولي

السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونتنا اليوم وفي هذا الدرس سنتكلم عن الـ hreflang ودوره في الإستهداف الدولي, فكما نعرف جوجل تعمل دائما على تطوير محرك بحث وتقديم أفضل خدمة للمستخدم وهذا ما جعل محرك بحثها يعتبر الأفضل عالميا, وفي هذا الدرس سنجيب على ثلاث أسئلة محورية حول هذا الموضوع :
1- ما هو الـ hreflang ؟
2- كيف يمكننا استغلال الـ hreflang في التسويق الشبكي ؟
3- هل سيساعدنا الـ hreflang في استهداف زوار مناسبين لموقعنا ؟

إذن لنبدأ على بركة الله بالإجابة على هاته الأسئلة:
1- ما هو الـ hreflang ؟
الـ hreflang عبارة عن علامات أو سمات تستخدمها المواقع لتدل محركات البحث (خاصة جوجل) على اللغات والدول التي تستهدفها وهو عبارة عن كود يوضع داخل القوالب أو السكريبتات بعد وسم </head> وهو كالتالي :

<link rel="alternate" hreflang="لغة الموقع" href="رابط الموقع" />
مثال يوضح ذلك :
<link rel="alternate" hreflang="ar" href="http://www.proayoub.com" />
إن كنت تمتلك مدونة فيكفيك وضع الكود كما وضعته أنا, أما إن كنت تمتلك موقع متعدد اللغات مثل فيس بوك فعليك وضع الأكواد حسب اللغات التي لديك وهذا مثال يبسط ذلك :
<link rel="alternate" hreflang="ar" href="ar.facebook.com"/>
<link rel="alternate" hreflang="fr" href="fr.facebook.com"/>
<link rel="alternate" hreflang="en" href="en.facebook.com"/>
وهكذا حسب عدد اللغات, أما إن كان لديك موقع يدعم اللغات حسب المناطق مثلا (العربية المصرية : ar-eg) فهذا يعني أنه عليك وضع الروابط كالتالي :
<link rel="alternate" hreflang="ar-eg" href="ar-eg.exemple.com"/>
وإليك بعض رموز لغات الدول العربية :
العربية : ar
المغربية : ma
المصرية : eg
السعودية : sa
الجزائرية : dz
الإماراتية : ae
العربية المغربية : ar-ma
العربية المغربية : ar-eg
العربية المغربية : ar-sa
هذه إجابتنا على السؤال الأول ننتقل معكم للسؤال الثاني على بركة الله
2- كيف يمكننا استغلال الـ hreflang في التسويق الشبكي ؟
نحن جميعا نعرف أن التسويق الشبكي يعتمد على استهداف البلدان والأقاليم واللغات, خاصة الذي يعتمد على الحملات الإعلانية ومحركات البحث بالخصوص, إذن الـ hreflang سيفيدنا كثيرا في استهداف الفئات, فلنقل مثلا أنني أمتلك موقع معد للتسويق لمنتج ما shopexemple.com مثلا, وهذا المنتج موجه للدول العربية ومصر بالخصوص إذن الهدف الأول للمسوق هو الوصول إلى الدولة المستهدفة وهي مصر, إذن سوف أقوم بإعطاء الموقع السمات التالية :
الصفحة الأولى موجه نحو مصر
<link rel="alternate" hreflang="ar-eg" href="ar-eg.shopexemple.com"/>
الصفحة الثانية موجه نحو الدول العربية كافة :
<link rel="alternate" hreflang="ar" href="ar.shopexemple.com"/>
إذن هكذا سيعمل محرك البحث على استهداف المناطق العربية عامة ومصر خاصة, الأن سننتقل للإجابة على السؤال الثالث.
3- هل سيساعدنا الـ hreflang في استهداف زوار مناسبين لموقعنا ؟
بالطبع سيساعدنا في استهداف زوار مناسبين لموقعنا فالكثيرون منا عندما يذهبون للبحث عن شيئا ما في جوجل فهم يقومون بعمل اختيارات حسب اللغة والدولة التي ينتمي إليها المواقع التي يريد البحث فيها :
على سبيل المثال أنا أبحث عن هاتف أندرويد بسعر رخيص ومميزات جيدة, وأريد أن أبحث باللغة العربية وفي المواقع المغربية حيث ساقارن بين عملية البحث بشكل عادي وعملية البحث المخصصة (اختياراللغة والبلد)
- الصورة الأولى نتيجة البحث العادي :
- الصورة الثانية نتيجة البحث المخصصة :
كما نرى هناك اختلاف بين النتائج إذن تعريف محرك البحث بلغة موقعك يجله يعرض موقعك للفئات الأكثر اهتماما به مما يزيد احتمال النقر على رابطك.
إذن هكذا ننهي درسنا لهذا اليوم أتمنى أن تشاركوه مع أصدقائكم وكلمة شكر تكفينا على مجهودنا
مواضيع مفيدة:

السبت، 24 يناير 2015

100 100 100
أفضل كود ميتا تاج meta tag لسنة 2015 السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونتنا اليوم جئت لكم يأفضل كود ميتا تاج m...

أفضل كود ميتا تاج meta tag لسنة 2015

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

الأن نأتي إلى الكود الجديد :
<meta content='وصف المدونة هنا' name='description'/>
<meta content='index, follow' name='robots'/>
<meta content='الكلمات المفتاحية هنا' name='keywords'/>
<meta content='اسم الكاتب أو صاحب المدونة هنا' name='author'/>
<meta content='ll-cc' http-equiv='content-language'/>
<meta content='blogger' name='generator'/>
<meta content='ar' name='language'/>
<meta content='(c) 2015 اسم مدونتك هنا' name='copyright'/>
<meta content='blogger' name='generator'/>
<meta content='index, follow, ydir, odp, imageindex' name='googlebot'/>
<meta content='index, follow, ydir, odp, archive' name='slurp'/>
<meta content='index, follow, ydir, odp, archive' name='bingbot'/>
<meta content='2 hours' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='index, follow' name='robots'/>
<meta content='اسم بلدك هنا' name='country'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='your app id' property='fb:app_id'/>
<meta content='username facebook' property='fb:admins'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='https://plus.google.com/u/0/username/posts' rel='author'/>
<link href='https://plus.google.com/u/0/username' rel='publisher'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://twitter.com/username' rel='author'/> 
<link href='http://twitter.com/username' rel='publisher'/>
<b:include data='blog' name='all-head-content'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
    <title>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <data:blog.pageName/> | <data:blog.title/>
          <b:else/>
          Page Not Found | <data:blog.title/> 
        </b:if>
      </b:if>
    </title>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title> 
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
بعد إضافة الكود في مدونتك قم بتغيير ما لون بالأحمر إلى معلوماتك الخاصة ثم احفظ القالب وهنيئا لك
إلى هنا انتهى الدرس اتمنى أن تنشروه إذا أعجبكم ولا تنسوا تعليقاتكم المشجعة كنتم مع درس أفضل كود ميتا لسنة 2015 إلى اللقاء

مواضيع مفيدة:

الجمعة، 23 يناير 2015

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

اعرف كيف يظهر موقعك في كل الأجهزة بواسطة موزيلا

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

لنبدأ على بالشرح على بركة الله:
1- بعد الدخول لمتصفح موزيلا وفتح موقعك الموقع الذي تريد معاينته إذهب لأي مكان في الصفحة وإضغط بالزر الأيمن للفأرة وقم باختيار examiner l'élément :


2-بعد ذلك إضغط على أيقونة Vue adaptative كما في الصورة :


3-الأن ستحصل على صفحة كما في الصورة قم باختيار المقاس الذي تريد من خلال لائحة المقاسات أو قم بكتابة مقاس حسب الذي تريده :


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


إلى هنا انتهى درسنا لهذا اليوم أتمنى أن تشاركوا الموضوع مع أصدقاءكم ولا تنسو تعليقاتكم المشجعة
مواضيع مفيدة:

الخميس، 22 يناير 2015

100 100 100
[مقالة] جديد السيو (SEO) وتحديثات جوجل 2015 السلام عليكم ورحمة الله وبركاته أهلا بكم في هذا المقال حول جديد سيو-SEO وتحديثات عملاق م...

[مقالة] جديد السيو (SEO) وتحديثات جوجل 2015

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

من أبرز ما جاءت به جوجل هذه السنة تحديثي جوجل باندا-panda والبطريق-pengiun :


تحديث الباندا-panda:
جاء هذا التحديث مستهدفا المواقع الناشئة بالخصوص فبعد أن اعتمدت جوجل مؤخرا على أهمية المحتوى في تصدر نتائج البحث لم يعد هناك مجال للخطأ فأي موقع يعتمد على الأمور التالية سيعاقب وجوجل باندا هو المنفذ :
- تكرار نفس المحتوى في صفحات مختلفة من الموقع.
- الحشو العشوائي للكلمات الدلالية (الحشو الهمشي والغير مقنن للكلمات الدلالية خاصة التي لا ترتبط بالمحتوى تهدد موقعك بالمعاقبة).
- الصمعة السيئة لموقعك لدى المستخدم (جوجل تراقب انطباع المستخدم حول موقعك فكن حذرا).
- المحتوى الغير منظم والعشوائي والضعيف (كتابتك لمقالة أو موضوع من بضع أسطر يعرضك للعقاب).
- لا تخرج عن اطار تخصص موقعك (لا تكتب حول مواضيع تخالف تخصص موقعك).
- عدم تحديث المحتوى (لا بد من كتابة مواضيع باستمرار خاصة لأصحاب المواقع الإخبارية حتى لا تفقد ثقة جوجل).
إذن هذا أهم ما جاء به تحديث جوجل باندا فلا تستخفوا به فخذوه بعين الإعتبار لكي تتفادو السقوط في التحديث.
تحديث البطريق-pengiun:
هذا التحديث يعتبر الأكثر خطورة على المواقع خاصة بعد سقوط نسبة كبيرة من مواقع الإنترنيت في هذا التحديث مؤخرا, فجوجل البطريق جاءت للتصدي لأي موقع يستعمل وسائل غش (ان أمكن القول) في تصدر محرك البحث ومن أجل تجنب الوقوع في هذا التحديث عليك القيام بالأتي:
- ابتعد عن الحشو المكثف للكلمات الدلالية (حشو الموضوع بكلمات دلالية كثيرة يجعل موقعك مهددا بـ 90% من الوقوع في التحديث)
- عدم ربط موقعك بمواقع ليس لديها نفس محتوى موقعك (نحن جميعا وقعنا في هذا الخطأ حيث كان همنا هو جمع أكبر عدد من الباك لينك, فإن كان موقعك تقني اربطه مع مواقع تقنية, وإن كان تعليمي اربطه بمواقع تعليمية, وكذلك تجنب جلب الباك لينك عبر مواقع توليد الباك لنك).
- عدم نقل المواضيع وتكرار المحتوى (اكتب مواضيع حصرية).
- لا تعتمد على مصدر واحد لجلب الزوار (حاول تنويع مصادر جلب زوار موقعك).
كما رأينا تحديث البطريق مستعد لتدميرك لذا ابتعد عن أي وسيلة قد تقربك منه.

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

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

مواضيع مفيدة:

الأحد، 11 يناير 2015

100 100 100
أفضل قوالب 2015 قالب مدونة برو أيوب الأحمر السلام عليكم ورحمة الله وبركاته غياب طويل مبرر بالإستعداد للإمتحانات واليوم وقوبا عند رغب...

أفضل قوالب 2015 قالب مدونة برو أيوب الأحمر

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

✔ مميزات القالب :
بسيط بألوان متناسقة وهادئة
سريع الأرشفة ومجهزة ليتوافق مع محركات البحث
سيو 100%
متوافق مع الهواتف الذكية
إضافات مميزة وفريدة
سلايد شو تلقائي أنيق
 قائمة علوية متحركة نزولا وصعودا مع القالب
زر الصعود للأعلى
فوتر جميل 
✔ التعديلات :
الإضافات :
الإضافة 1:

الكود الخاص بها :
<style>
#fbar {
list-style-type: none;
list-style: none;
margin: -26px -10px 0px -6px;
background: #fff;
padding: 0px;
width: 347px;
margin-left: 12px;
}
#fbar0 {list-style-type:none;list-style: none;margin:-9px -10px -1px -10px;background:#fff;padding:0px;
}
#fbar1 {
float: right;
width: 50%;
display: block;
height: 380px;
}
#fbar1 ul {
list-style-type: none;
list-style: none;
margin: 0px;
}
#fbar2 ul{list-style-type:none;list-style: none;margin:0px;background:#fff;}
#fbar ul li {
padding: 14px 10px;
margin-bottom: -28px;
color: #666;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
width: 153px;
margin-left: 51px;
text-align: right;
}
#fbar ul li a {
color: #000;
font-size: 12px;
font-weight: normal;
text-decoration: none;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#fbar0 {
list-style-type: none;
list-style: none;
padding: 0px;
width: 50%;
margin: 0px 280px 10px 10px;
}
#fbar2 {
width: 50%;
display: block;
}
#fbar2 ul {
list-style-type: none;
list-style: none;
margin: 0px;
}
#fbar ul li {
padding: 14px 10px;
margin-bottom: -28px;
color: #666;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
width: 153px;
margin-left: 51px;
text-align: right;
}
li.lb1 {
margin-top: 22px;
background-image: url(http://alexgurghis.com/themes/vetro/wp-content/themes/Vetro_Preview/images/widget-title-shadow.png);
background-repeat: repeat-x;
background-position: bottom;
}
#fbar0 ul li a {
color: #848484;
font-size: 25px;
font-weight: normal;
text-decoration: none;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
i.icon-home {
font-size: 32px;
}
i.icon-dollar{
font-size: 32px;
}
i.icon-info{
font-size: 32px;
}
i.icon-ayoub{
font-size: 32px;
}
i.icon-c-us{
font-size: 32px;
}
i.icon-soal-plus{
font-size: 32px;
}
i.icon-map-marker{
font-size: 32px;
}
</style>
<div id="fbar">

<div id="fbar1">
<ul>
<li class="lb"><a target="_blank" rel="nofollow" href="https://www.twitter.com/blogproayoub"><img src="http://im77.gulfup.com/vcbDN3.png" /></a></li>
<li class="lb">
</li>
<li class="lb"><a target="_blank" rel="nofollow" href="https://www.facebook.com/blogproayoub"><img src="http://im77.gulfup.com/dx49WF.png" /></a></li>
<li class="lb">
</li>
<li class="lb"><a target="_blank" rel="nofollow" href="https://www.youtube.com/user/blogproayoub"><img src="http://im77.gulfup.com/MAvZ99.png" /></a></li>
<li class="lb">
</li>
<li class="lb"><a target="_blank" rel="nofollow" href="https://plus.google.com/113119554600079673075"><img src="http://im77.gulfup.com/DMh8Je.png" /></a></li>
<li class="lb">
</li>
</ul></div>
<div id="fbar0">
<div id="fbar2">
<ul>
<li class="lb1"><a target="_blank" href="http://www.proayoub.com/"><i class="icon-home"></i>الرئيسية</a></li>

<li class="lb1"><a target="_blank" rel="nofollow" href="https://khamsat.com/user/good-jobs"><i class="icon-dollar"></i>خدماتنا</a></li>


<li class="lb1"><a target="_blank"  href="http://www.proayoub.com/p/contact-us.html"><i class="icon-c-us"></i>راسلنا</a></li>

<li class="lb1"><a target="_blank" href="#"><i class="icon-soal-plus"></i>إسأل !</a>
</li>

<li class="lb1"><a target="_blank" href="http://www.proayoub.com/p/ayoub-boulaich.html"><i class="icon-ayoub"></i>من أنا؟</a></li>

<li class="lb1"><a target="_blank" href="#"><i class="icon-info"></i>استفسر</a>
</li>

<li class="lb1"><a target="_blank" href="#"><i class="icon-map-marker"></i>أعلن !</a>
</li>
</ul>
</div>
</div>
</div>
الإضافة 2:

الكود الخاص بها:
<style>
.ayoub img {
text-align: center;
margin-right: -16px;
}
</style>
<div class="ayoub">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqB_hyJo5sqabvC04Rpnx99Sh6rqLDoRjffEU2mQPegKxT2mHRSIvpjKU0dYw6WQ9U-djMmfactsc1VzFMGoPVem104hfOZzsskOm68ouFtYMx7ZuNVW2Gbsw5wNZZs250f2PRfUxQPQ/s1600/ayoub+boulaich+logo.png"/>
</div>
<style>
#social-wrapper {
padding: 10px 0 0;
overflow: hidden;
margin-right: 45px;
}
.social-icons.sticky-social {
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
display: block;
text-align:center;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
margin: 0 3.5px !important;
}
.social-icons a {
background-color: #dadada;
float:right;
}
.social-icons a.facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSskoCuho_i-n0Plt9RsHU7FEWkXAVKDeAsT-XhVqCtIY-DBIgNOMGF34ina3cKupIuziwJj_6QyosNhcPjyPnxAO-Qx4Vl1-2FT4s1hlR63CVpc7zF0A823UWrr1hcU_jvcaDh-aXBLw/s1600/facebook.png);
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoy8lGqgi_UJN2k0Ut69Y2BQknsBKtkSMLWhLubzXaSZAWKDdil1TkF5ijtF_ijWxvjJc_4uS3KcpI05apurppAKu2L7LXGb1s5R1C3GptTFNXECs0mCARePgXsvVs_OHJjPILpTeTLco/s1600/twitter.png);
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.khamsat {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOdJVqNiNLtqb353_eSXSk3dPHI24wmRVRoMPUIgYG8SWZCwe0BsKa-p0srQKPx_nGxd8_RezL_1mqzYCQCySzIYjVE6LRg-k5MHS47eP4brxLIUQ-Wzw-2bWIl2ZiCBlbI11gcV9eaI/s1600/kmst.png);
}
.social-icons a.khamsat:hover {
background-color: #F39C12;
}
</style>
<div id="social-wrapper">
<div class="social-icons sticky-social">
<a class="facebook" href="https://www.fb.com/boulaich.ayoub" target="_blank" rel="nofollow">
</a><a class="twitter" href="https://www.twitter.com/blogproayoub" target="_blank" rel="nofollow">
</a><a class="khamsat" href="https://www.khamsat.com/user/ayoubb" target="_blank" rel="nofollow">
</a></div>
</div>
<div id="call-wrapper">
<a style="font: 24px;color:#fff;text-align: center;">212611051511+</a><a href="#"><img src="http://www.dits.co.th/ip-pbx/images/callcenter-icon.png" /></a>
</div>
<style>
#call-wrapper {
margin: 0 auto;
text-align: center;
margin-top: 12px;
margin-left: -13px;
}
#call-wrapper a {
font-size: 20px;
}
#call-wrapper img {
width: 30px;
height: 30px;
}
</style>
الإضافة 3:

الكود الخاص بها
<div class="mawa9i3-tad3amona">
<ul>
<li><a target="_blank" rel="nofollow" href="http://www.proayoub.com/"><u class="icon-link"></u>اعلن هنا</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.proayoub.com/"><u class="icon-link"></u>اعلن هنا</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.proayoub.com/"><u class="icon-link"></u>اعلن هنا</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.proayoub.com/"><u class="icon-link"></u>اعلن هنا</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.proayoub.com/"><u class="icon-link"></u>اعلن هنا</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.proayoub.com/"><u class="icon-link"></u>اعلن هنا</a></li>
</ul>
<div>
<style>
.mawa9i3-tad3amona {
float: right;
}
.mawa9i3-tad3amona ul {
text-align: right;
width: 190px;
}
.mawa9i3-tad3amona ul li {
background-image: url(http://alexgurghis.com/themes/vetro/wp-content/themes/Vetro_Preview/images/widget-title-shadow.png);
background-repeat: repeat-x;
background-position: bottom;
}
.mawa9i3-tad3amona ul li a {
color: #fff;
font-size: 15px;
}
u.icon-link {
font-size: 25px;
margin-left: 12px;
}
</style></div></div>
 السلايد شو :
لتشغيل السلايد شو ابحث عن هذا الكود وغير كلمة internet بالتسمية التي تريد
label1 = &quot;internet&quot;;
هذه أهم التعديلات الأن إلى التحميل والمعاينة
تحميل | معاينة

نتمنى أن تتفاعلوا مع هذا المنشور بنشره ووضع تعليقاتكم أسفله وشكرا :)
مواضيع مفيدة :

السبت، 6 ديسمبر 2014

100 100 100
[درس] توضيح مبسط لصفحات أخطاء الويب السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونة برو أيوب اليوم سأوضح لكم ما تعنيه صفح...

[درس] توضيح مبسط لصفحات أخطاء الويب

السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونة برو أيوب اليوم سأوضح لكم ما تعنيه صفحات أخطاء الويب التي تظهر لك عند الوقوع في مشكل ما أثناء تصفح موقع ما, طبعا هذه صفحات الأخطاء كثيرة لكنني سأتحدث عن أهمها والتي ستصادفها كثيرا.
- صفحة الخطأ (400): تظهر هذه الصفحة عندما يخطئ المستخدم بكتابة العنوان الصحيح للصفحة التي يريد الاطلاع عليها.
- صفحة الخطأ (401): تظهر هذه الصفحة عند قيام المستخدم بزيارة أحد المواقع غير المأمونة. كما ويمكن أن يظهر هذا الخطأ في حالت حاول أحد مدراء الموقع الدخول كمستخدم عادي فبمجرد أن يخطأ في اسم المستخدم أو كلمة السر سوف تظهر له هذه الصفحة.
- صفحة الخطأ (403): يظهر غالبا عندما يقوم المستخدم بزيارة إحدى الصفحات غير المأمونة.
- صفحة الخطأ (404): هذا هو أكثر رموز الأخطاء شهرة لدرجة أن (404) أصبحت من أكثر الرموز استخداما بين الناس حول العالم مؤخرا. ويرجع السبب في ظهور مثل هذا الخطأ إما إلى وجود خلل في السيرفر الذي ركب عليه الموقع، أو لأنك لم تجدد الاشتراك مع الشركة المستضيفة لموقعك إن كنت تملك واحدا.
- صفحة الخطأ (408): يتعلق هذا الخطأ بالوقت, فعلى سبيل المثال لو طلب منك تزويد الصفحة بمعلومات معينة، (كبريدك الإلكتروني مثلا)، ومنحك الموقع وقتا معينا لكتابة المطلوب، فإنه سيظهر لك الخطأ (408) في حال انتهى الوقت ولم تقم بما طلب منك.
- صفحة الخطأ (502): غالب ما تظهر هذه الصفحة عند الوقوع في خطأ مؤقت,
- صفحة الخطأ (503): هذا المشكل يظهر عندما يكون هناك حمل زائد على النظام. وغالبا ما تكون حالة مؤقتة.
- صفحة الخطأ (504): يظهر هذا الخطأ عندما يكون إصدار HTTP غير معتمد.

اذن هذه أهم صفحات الأخطاء أتمنى أن أكون قد أفذتكم إلى اللقاء
اقرأ أيضا :