النسخة الاولى من قالب مدونة ارشر , مجانا لكم

بسم الله الرحمن الرحيم


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

لنتحدث الان عن القالب ... النسخة الاولى من قالب مدونة ارشر هو عبارة عن نسخة مطورة من القالب الانجليزي (( Gvusion 2 )) تم تعريب القالب بواسطة المدون " منير محمد " وتم تطوير القالب بواسطتي انا " محمد ارش " , فكرة تصميم القالب غير منقولة من اي مدونة او موقع اخر , فهي افكار و تصاميم اساسية موجودة في القالب قمت باضافة لمستي الخاصة عليها  .




الالوان و خلفية القالب



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

الخطوط المستخدمة في القالب


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

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

فكرة الظلال


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

تجاوب متكامل 100%


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

كما ان شركات الهواتف المحمولة و بالاخص " آبل Apple " تمنع مستخدميها من دخول المواقع الغير متجاوبة مع الهاتف , ويعتبر هذا بمثابة عقوبة للموقع , لانه سيفقد زائر جديدا الان و في المستقبل , فبعد استخدامك لقالب مدونة ارشر يمكنك ان تنسى جانب تجاوب قالبك تماما , كل ما عليك هو التركيز على الجوانب الاخرى في موقعك .

لمعاينة تجاوب القالب " responsinator.com  " .

خصائص ومميزات اخرى في القالب

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


تعديلات مهمة قبل استخدام القالب

🔧 تعديل القائمة العلوية :


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

<ul>
              <li class='active'><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
              <li class='home5'><a href='#'>اتصل بنا</a></li> 
              <li class='home3'><a href='#'>ادعم ارشر</a></li>
              <li class='home4'><a href='#'>التبادل الاعلاني</a></li>
              </ul>

🔧 تعديل القائمة الرئيسية :


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

 <ul>
    <li class='homers'><a href='/'>الرئيسية</a></li>
<li><a class='archtip' href='#' title=' دورة ترسم لك طريق النجاح في مجال التدوين'>دورة كن مدون</a></li>
    <li><a class='archtip' href='#' title='قسم يحتوى على مجموعة من المقالات المتعلقة بمدونات بلوجر'>دروس بلوجر</a></li>
<li><a class='archtip' href='#' title='تريد قوالب احترافية لمدونتك !! هذا هو القسم المناسب'>قوالب بلوجر</a></li>
<li><a class='archtip' href='#' title='افضل الاضافات و الادوات لمدونات بلوجر تجدها في هذا القسم'>اضافات بلوجر</a></li>
<li><a class='archtip' href='#' title=' كل مايتعلق بمجال السيو تجده هنا'>سيو - SEO</a></li>
<li><a class='archtip' href='#' title=' لديك استفسار او سؤال حول التدوين اطرحه هنا'>اسأل ونحن نجاوب</a></li>
  </ul>


 🔧 تعديل ازرار التواصل الاجتماعي :


لتعديل روابط ازرار التواصل الاجتماعي الموجودة في القائمة الرئيسية قم بالبحث عن الاكواد ادناه وقم باستبدال الروابط حيث ان الرابط باللون الاحمر هو رابط الفيسبوك و الازرق هو رابط جوجل + و الاخضر هو رابط خلاصة RSS الخاص بمدونتك ثم احفظ القالب  .

<ul id='socialmedia'>
<li class='tooltip'><a href='https://www.facebook.com/archer.blog/' target='_blank'><img class='sfacebook' src='http://store6.up-00.com/2017-02/148826855063931.png'/></a><span class='tooltiptext'>Facebook</span></li>

<li class='tooltip'><a href='http://feeds.feedburner.com/archer-blog' target='_blank'><img class='srss' src='http://store6.up-00.com/2017-02/148826855088013.png'/></a><span class='tooltiptext'>RSS</span></li>
<li class='tooltip'><a href='https://plus.google.com/u/0/me?tab=jX' target='_blank'><img class='sgoogle' src='http://store6.up-00.com/2017-02/148826855074362.png'/></a><span class='tooltiptext'>Google+</span></li>
</ul>

🔧 تشغيل السلايد شو :


القالب يحتوى على سلايد شو ديناميكي او شريط يقوم بعرض اخر المواضيع لتشغيل السلايد شو بحيث يقوم بعرض مواضيع مدونتك قم بالبحث عن الكود ادناه واستبدل الرابط باللون الازرق الى رابط مدونتك بدون اللاحقة http:// ثم قم بحفظ القالب .

<div class='ticker-wrap' data-domain='ar-cher.blogspot.com'>

🔧 تعديل الكاتب :


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

<div class='author_description_container'><div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href='#'>
<img class='author_avatar' expr:alt='data:post.author' height='110' src='http://www.mrkzgulf.com/do.php?img=491193' width='110'/>
</a>
</div>
<h4>الكاتب : <a rel='author'><data:post.author/></a></h4>
<p>
مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر 
<data:post.authorAboutMe/>      
</p>
<div class='authorsocial'>
<a class='img-circle1' href='https://www.facebook.com/mo7medarch' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle3' href='https://plus.google.com/u/0/me?tab=jX' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>

🔧 التعديل على اضافات السايدبار و الفوتر يمكنك التجكم فيها بواسطة التخطيط


📥  التحميل و 🔐  حقوق القالب

حذف الحقوق ,, العادة المنبوذة التي توجد في المحتوى العربي بكثرة , حتى انها قد اصبحت امرا عاديا ولاينظر الى فاعلها على انه سارق بل و يؤيده الكثيرين على مافعل , هذا الامر له عقوبة من الله في الدنيا قبل الاخر , فاخذ حق ليس لك او استحلال حق دون علم صاحبه امر لايصح في ديننا الحنيف , فارجوا منكم عدم حذف الحقوق او التلاعب او التعديل عليها , حقوق التصميم محفوظة لـ " مدونة ارشر " , وحقوق التعريب محفوظة لمدونة " مدون محترف " ...



ودمتم في حفظ الله ورعايته
{ رَبِّ لا تَذَرْنِي فَرْدًا وَأَنتَ خَيْرُ الْوَارِثِينَ }

اجعل موقعك قابلة للقراءة , لنتائج افضل في جوجل

بسم الله الرحمن الرحيم


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

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

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


كيف اجعل موقعي ممتع و قابل للقراءة ؟

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

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

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

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

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

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

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

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

الخلاصة

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

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

اللهم صلى وسلم على سيدنا محمد

صندوق منبثق للاشتراك في قناة اليوتيوب

بسم الله الرحمن الرحيم


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

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

معاينة الاضافة "Codepen "

شرح طريقة التركيب

توجه الى لوحة التحكم في بلوجر > التخطيط > اضافة اداة > اداة HTML/JavaScript > والصق بداخلها الكود ادناه, واترك حقل العنوان فارغا , ثم احفظ الاداة .


 <style type='text/css'>
#bloggerspiceFBpop:hover {
  border:2px solid gray;
  border-radius:0px;
}
#bloggerspiceFBpop {

position:fixed !important;

position:absolute;

top:-1000px;

left:50%;

margin:0px 0px 0px -182px;

width:300px;

height:auto;

padding:16px;

background:#fff;font:normal Dosis, Georgia, Serif;

color:#111;

border:2px solid #eee;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

#bloggerspiceFBpop a.bsclose {

position:absolute;

top:-10px;

right:-10px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:#000000;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:25px;

cursor:pointer;

}
</style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type='text/javascript'>

$(window).bind("load", function() {

// Animate Top

$('#bloggerspiceFBpop').animate({top:"50px"}, 1000);

// Widget by ww.bloggerspce.com

$('a.bsclose').click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

<div id="bloggerspiceFBpop">
<center>
<iframe src=http://www.youtube.com/subscribe_widget?p=xV7lTzGiTlJSntUYoi_Upw style="overflow: hidden; height: 72px; width: 300px; background: #fff;background: -moz-linear-gradient(top,#F0EFEF,#fff);background: -webkit-linear-gradient(top,#F0EFEF,#fff); box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999; padding:1px; " scrolling="no" frameborder="0"></iframe> <a style="font-size: 6px;float:right;text-decoration:none;color: #616469;" href="http://ar-cher.blogspot.com">
Widget by mo7med arch</a></div</center>
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;"></span></center></div>

قم بتغيير المعرف باللون الاحمر الى معرف قناتك في اليوتيوب 

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

افضل الخطوات لتكوين جمهور في مواقع التواصل الاجتماعي

بسم الله الرحمن الرحيم 



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

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

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

1 . جهز صفحتك لاستقبال الزوار :
بعد انشائك للصفحة يجب عليك تنسيقها و تنظيمها ويكون ذلك بتصميم غلاف احترافي لصفحتك و تصميم صورة شخصية رائعة تلفت النظر , وادخل معلومات كاملة عنك وعن موقعك , وكل ذلك لتكون صفحتك جاهزة عندما يزورها شخص ما , فمظهر الصفحة و المعلومات التي تقدمها يدخل انطباعا ممتازا في ذهن الزائر حيث انه سيشعر بان هذه صفحة رسمية لموقع له مكانته بين المواقع .

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

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

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

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

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

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

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

{ وَاجْعَلْنِي مِن وَرَثَةِ جَنَّةِ النَّعِيمِ }

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

بسم الله الرحمن الرحيم


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

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

لمعاينة صناديق الاقتباس  اضغط على هذا الرابط (( من هنا ))


شرح طريقة التركيب

نتوجه الى لوحة التحكم في بلوجر > المظهر > تحرير HTML ثم نضغط على Ctrl+f ونبحث عن الوسم  <b:skin><[[ ثم نضع فوقه الكود التالي :

.pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 1px 1px          rgba(0,0,0,.08);
}
pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 15px;
    border-left: 2px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "اضغط مرتين لنسخ الكود";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}
pre.code-text code {
color:red;
}

ثم نبحث عن الوسم </body> ونلصق فوقه الكود التالي :

<script type='text/javascript'>
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

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

طريقة استخدام الصناديق

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


<pre class='code code-html'><label>HTML</label><code>... Code HTML  ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... Code CSS ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... Code JavaScript ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... Code jQuery ...</code></pre>

<pre class='code code-text'><label>اقتباس</label><code>... اقتباس ... </code></pre>

نوع المحتوى الذي تريد وضعه داخل الصندوق سيحدد الكود الذي ستسخدمه فمثلا اذا ارت استخدام صندوق لتكتب كود CSS بداخله ستستخدم الكود الثاني او اردت ان تكتب بداخله كود HTML ستسخدم الكود الاول او اردت ان تكتب نص عادي او اقتباس ستسخدم الكود الاخير وهكذا ...

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

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

قالب فرينندس , قالب مصمم بنكهة عربية

بسم الله الرحمن الرحيم


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

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

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

معاينة القالب " قالب فريندس "

صورة كملة للقالب


اهم مايميز القالب

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

والمزيد من المميزات الاخرى اكتشفها بنفسك ...

التحميل و حقوق التصميم و التعريب

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

التحميل : (( ميديا فاير ))

____________________________
ودمتم في حفظ الله ورعايته
رَبِّ اجْعَلْنِي مُقِيمَ الصَّلاَةِ وَمِن ذُرِّيَّتِي رَبَّنَا وَتَقَبَّلْ دُعَاءِ }