طريقة تركيب AMP على بلوجر

السيو الداخلي بلوجر تصميم المواقع جوجل سيو AMP

طريقة تركيب AMP على بلوجر

glokall 12:12 م اضف تعليق

أكمل المقال

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

للمزيد من المعلومات تفضل بقراءة المقال كاملاً: ما هو AMP

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

طريقة تركيب AMP على بلوجر

حتى لحظة كتابتنا لهذا الموضوع لم تسمح جوجل بوضع AMP على منصات مدوناتها بلوجر , ولكن يمكنك أنت أن تقوم ببعض التعديلات بجعل قالب مدونتك مركب به ميزة AMP يدوياً , فإتبع هذه الخطوات بدقة من الألف للياء:

1 - قم بحفظ قالب مدونتك القديم أولاً , وهي نقطة هامة جداً تفادياً لأية أخطاء وحتى يمكن أن يكون إسترجاع قالبك سهلاً.

2 - قم بالدخول على القالب Template ومنها تعديل Edit HTML.

3 - قم بالبحث داخل مربع أكواد القالب عن الكود التالي:

<html>

في حالة لم تجده قم بالبحث عن :

<html

فقد يكون بهذا الكود بعض الأكواد الأخرى قبل رمز إغلاقه مثلاً:

<html b:version='2' class='v2' dir='rtl' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

في جميع الحالات نحن بحاجة إلى وضع الكود التالي بداخل وسم الهتمل مباشرة , بمعنى أنه في حالة إنك وجدت الكود <html> مباشرة فقم بوضع هذا الكود بداخله:

amp='amp'

ليصبح الشكل النهائي:

<html amp='amp'>

وفي حالة وجدت أكواد إضافية مثل مثالنا بالأعلى يكون الشكل النهائي للكود:

<html amp='amp' b:version='2' class='v2' dir='rtl' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

فكل ما يهمنا هو وضع هذا الكود amp='amp' بداخل الوسم <html>

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

4 - قم بالبحث عن هذه الأكواد في قالبك فإن وجدتها فلا تضيفها مرة أخرى أما لو لم تجدها فقم بإضافتها أسفل الوسم <head>

<meta charset='utf-8'> <meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>

بالنسبة للكود بالأعلى نحن أنفسنا لاحظنا مشكلة عندما قمنا بوضعه في قالب مدونة بلوجر وهي أن القالب يؤكد علينا أنه هناك كود meta مفقود ويجب علينا وضعه , قمنا بحل هذه المشكلة كالتالي:

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

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

وهو الكود الخاص بجعل مدوناتنا متجاوبة Responsove في حجمها مع حجم الشاشة التي يتم عرضها عليها , وبما إنه متاح بقالب مدونتنا بالفعل فقد إكتفينا بوضع الكود الخاص بالترميز <meta charset='utf-8'> أسفل وسم الهيد <head>

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

5 - بعد أن وضعت أو تأكدت من أن الكود الخاص بجعل قالب مدونة بلوجر الخاص بك متجاوبة في مدونتك ولتتذكره فقد كان:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

قم بإضافة هذا الكود أسفله مباشرة 

<link expr:href='data:blog.url' rel='canonical'/>

, ولكن تأكد أولاً إنه غير متاح بأي مكان أخر في قالبك , وإن كان متاحاً فقم بحذفه ووضعه أسفل الكود بالأعلى.

6 - قم بالبحث عن الكود:

</head>

وقم بإستبداله بالكود التالي:

<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async='async' src='https://cdn.ampproject.org/v0.js'></script> </head>

7 - والأن مع خطوة التعامل مع الصور الخاصة بالقالب لجعلها متوافقة مع AMP , قم بالبحث عن وسوم الصور img وإستبدلها ب amp-img كمثال قم بإستبدال التالي:

<img src="AmpImage.jpg" alt="img" height="500" width="500"></img>

بهذا الكود:

<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

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

طرق الكشف على توافق القوالب مع AMP:

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

#development=1

كمثال: سيصبح رابط موضوعنا هذا كما يلي:

http://www.romisya.com/2016/11/create-amp-blogger.html#development=1 

بدلاً من:

http://www.romisya.com/2016/11/create-amp-blogger.html

بعدها قم بالضغط بزر الفأرة الأيمن وقم بفتح Chrome DevTools console وإفحص أخطاء الصلاحية Validation Errors.

2 - الطريقة الثانية أسهل كثيراً وهي من خلال موقع فحص الأخطاء الخاصة بمشروع AMP من الرابط الرسمي:

validator.ampproject.org

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

مع تحيات روميسيا للخدمات الإلكترونية

ما هو مشروع AMP

السيو الداخلي تصميم المواقع جوجل سيو AMP

ما هو مشروع AMP

glokall 10:59 ص اضف تعليق

أكمل المقال

اليوم درسنا عن واحد من أهم الميزات الجديدة المطلوبة في جميع في مواقع العصر لتصدر نتائج البحث في جوجل وهذه الميزة هي ميزة Accelerated Mobile Pages أو ما يطلق عليها بإختصار AMP , ما هو AMP وما فائدته ووظيفته؟ لنتعرف معاً على أهمية AMP لمواقعنا ومدوناتنا.

بالنسبة لطريقة التركيب على موقعك أو مدونتك فسنضع بهذا المقال روابط لمقالات أخرى عن:
1 - طريقة تركيب AMP على بلوجر.
2 - طريقة تركيب AMP على ووردبريس.
فلا تقلق وتعرف أولاً على كل شئ عن AMP.

ما هو AMP

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

كانت هذه خلاصة مفهوم مشروع AMP ويبدو إننا وضعنا ضمن المفهوم أيضاً وظيفة وفائدة هذا المشروع المميز والتي يمكن إختصارها في كلمة واحدة "السرعة" نعم , فمع تحويلك موقعك إلى موقع يعمل بتقنية AMP ٍيمكن لزوارك تصفح موقعك بسرعة تصل إلى من أربعة (4) إلى عشرة (10) أضعاف سرعة تصفحه المعتادة له على الأقل.

إقرأ أيضاً: تركيب AMP على بلوجر

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

يمكنك التعرف على تقنية ومشروع AMP أكثر من خلال الموقع الرسمي للمشروع https://www.ampproject.org والذي يقدم الكثير من الفيديوهات والتعريف بهذه التقنية وكل ما قد ترغب بمعرفته , أما إذا كنت قد إتبعت خطوات تركيب AMP على موقعك وترغب بالتأكد إنك لا توجد أية مشكلات في تركيبه لديك فعليك بالتأكد من رابط الكشف والتحقق التالي:
https://validator.ampproject.org
بعد الدخول إلى هذا الموقع قم بوضع رابط موقعك الذي قمت بتركيب تقنية AMP عليه في المربع URL وقم بالضغط على مفتاح Validate للتأكد من خلو موقعك من أي أخطاء , وحتى لا قدر الله في حالة وجدت أية أخطاء فلا تنزعج مهما كانت كثرتها وتأكد إنك لست وحدك , فالجميع تقريباً واجهوا نفس مشكلتك في البداية وحلوا هذه المشاكل وصححوا الأخطاء واحداً تلوا لأخر حتى صارت مواقعهم ومدوناتهم متوافقة بشكل كامل مع تقنية AMP.

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

أفضل 4 شركات تقدم إستضافة مجانية للمواقع و المدونات

استضافة مجانية إسم نطاق إنشاء مدونة انشاء موقع تصميم المواقع للمبتدئين ووردبريس

أفضل 4 شركات تقدم إستضافة مجانية للمواقع و المدونات

glokall 6:05 ص اضف تعليق

أكمل المقال

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

فهل أنت واحد منهم؟

هل ترغب فى البدء في إنشاء موقعك أو مدونتك مجاناً؟

إذا كانت إجابتك بنعم فسأقوم اليوم بمشاركة أفضل أربع استضافات مجانية للمبتدئين.

قائمة لبعض مقدمي الإستضافات المجانية للمواقع و المدونات:

1. شركة x10Hosting.com

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

• لديهم احدث إصدار من لوحة التحكم cPanel. 
• إستضافة سحابية خاصة. 
• إصدارات متقدمة من MySQL و PHP. 
• لا توجد أبداً إعلانات إجبارية. 
• تتيح دعم فني جيد.

إضغط هنا للتسجيل و إنشاء حساب مجاني في هذه الشركة.

2. شركة ByetHost.com

 هذه الشركة أيضا تحتوي على الكثير من المزايا الرائعة، و هذا ما يجعلها أيضا في أعلى القائمة، فهي تقدم لك حساب FTP و مدير للملفات و لوحة تحكم و دعم فني مجاني، و تتيح لك إضافة نطاقات "دومينات" (domains) و نطاقات فرعية (sub-domains) و المزيد من المزايا الرائعة، و هذه بعضها:

• أفضل شيء هو أنك سوف تحصل على مثبت السكريبتات و التطبيقات تلقائياَ Softaculous. 
• توفر 200 جيجابايت من كمية نقل البيانات (Bandwidth) كل شهر.
• توفر 1000 ميجابايت كمساحة على القرص  الصلب. 
• تسمح لك بإضافة 50 نطاق (Domain) ، و 50 نطاق احتياطى (Parked domain) و 50 نطاق فرعى (Sub-domain). 
• توفر 5500 ميجابايت مساحة فارغة على القرص الصلب. 
• توفر 50 قاعدة بيانات MySQL.
• دعم فني مجاني 24/7.
• حساب FTP.
• لوحة تحكم لإدارة موقعك بشكل سهل.
• إدارة صفحة الأخطاء بشكل جيد.
• استضافة مجانية بدون إعلانات أو صفحات منبثقة.

إضغط هنا للتسجيل و إنشاء حساب مجاني في هذه الشركة.

3. شركة FreeHostingNoAds.net

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

• العديد من القوالب المختلفة و الجاهزة و لديهم أيضا منشئ للمواقع. 
• يمكنك إستعمال نطاقك الخاص أو قم باستخدام نطاق فرعي مجاني مقدم من الشركة. 
• توفر 20 جيجا بايت مساحة فارغة على القرص الصلب متاحة مع 200 جيجا بايت لكمية نقل البيانات (الباندويث Bandwidth).
• أدوات مثل جووملا، phpBB و بالطبع الووردبريس.
• توفر 3 إصدارات PHP مقدمة من طرف الشركة، بحيث يمكنك الاختيار من بينها طبقا لمتطلبات موقعك. 
• تتيح لك أيضا انشاء حسابات البريد الإلكتروني.

إضغط هنا للتسجيل و إنشاء حساب مجاني في هذه الشركة.

4. شركة Biz.nf

 مع هذه الاستضافة يمكنك إنشاء موقع أو مدونة خلال دقيقتين، وهي أيضا تتيح لك اسم نطاق (co.nf) فرعي مجاني، و هذه بعض المزايا الأساسية للشركة:

• توفر 1000 ميجا بايت مساحة الموقع.
• توفر 5000 ميجا بايت كمية نقل البيانات.
• يمكنك استضافة اسم نطاق واحد مجاناً.
• يمكنك الحصول على اسم نطاق مجاني (co.nf).
• يقوم Biz.nf بتقديم استضافة مجانية لمدونة الووردبريس و استضافة مجانية لجووملا و التي تتضمن تثبيت تلقائي. 
• يقدمون دعم  PHP4 و PHP5، لكن PHP7 يبقى بدون دعم.
• أداة إنشاء مواقع مجانية.

إضغط هنا للتسجيل و إنشاء حساب مجاني في هذه الشركة.

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

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

عيوب استخدام استضافة مجانية

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

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

تحميل قالب بلوجر My Blogger Tricks 2016 الأجنبي

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

تحميل قالب بلوجر My Blogger Tricks 2016 الأجنبي

glokall 4:27 ص اضف تعليق

أكمل المقال

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

قالب My Blogger Tricks

ومع الوقت نبحث عن القوالب المجانية التي يتيحها أصحاب المدونات الكبرى وهنا نجد الكثير مما يؤدي الغرض وأكثر .. ومع بحثي اليوم عن قالب جديد لأحد مدوناتي وجدت قالب رائع هو قالب المدونة الأجنبية الشهيرة في عالم البلوجينج My Blogger Tricks.

رابط معاينة القالب من الموقع الرسمي: My Blogger Tricks

هذه مجموعة من صور القالب لمعاينتها قبل التركيب

صورة القسم العلوي من القالب

My Blogger Tricks

صورة الهيدر فقط

هيدر My Blogger Tricks

صورة تبويبات القالب المطورة

تبويبات My Blogger Tricks

صورة النظام الإعلاني المتطور للقالب

إعلانات ماي بلوجر تريكس

الأن وقد شاهدت وعاينت القالب بإمكانياته المتطورة وشكله المميز

ننتقل إلى مميزات القالب

ملحوظة: القالب في الأصل سريع وخفيف للغاية .. هو متوافق مع الجوال بشكل كامل 100% ويعطي إنطباع للمستخدم بقوة 100% أيضاً , ولكن عند الكشف عن سرعة القالب للجوال ستجده 63% وعند الكشف عن سرعته للكمبيوتر ستجده 66% .. السبب الأساسي في ذلك أن القالب به صور كبيرة للغاية ولم يتم تصغيرها من قبل أصحاب الموقع الرسمي .. وعند تصغير هذه الصور لن تقل سرعة القالب للجوال والكمبيوتر عن 85% تقريباً. لتصغير الصور يمكنك إستخدام موقع shrinkpictures.com

مميزات قالب My Blogger Tricks

1 - قالب متجاوب بنسبة 100% .. أي إنه يمكن تصف مدونتك به من أي جهاز مهما إختلفت مقياس شاشته سواء لابتوب أو هاتف أو تابلت أو كمبيوتر عادي.

2 - يحتوي القالب على 3 عواميد مما يسهل عليك وضع جميع خياراتك وإختياراتك أمام زوارك ويساعد على زيادة الفترة التي يقضيها الزائر بموقعك وهو أمر في منتهى الأهمية لزيادة ترتيب وأهمية موقعك أمام محركات البحث.

3 - قائمة تبويبات منسدلة متطورة وفي قمة الروعة.

4 - محسن ومهيأ بشكل كامل للسيو مما يساعدك على تحسين ترتيب مدونتك وجلب المزيد من الزوار وتصدر نتائج البحث بأقل مجهود.

5 - القالب جاهز لإضافة إعلانات أدسنس الخاصة بك بدون الحاجة للتعديل عليه نظراً لجاهزية اماكن الإعلانات الأفضل بالفعل وبخيارات متعددة.

6 - صندوق خاص عن كاتب المقال بشكل مميز ولافت للنظر.

7 - أدوات المشاركة الإجتماعية على الفيس بوك وتويتر وغيرها.

8 - خلفية داكنة.

9 - سرعة كبيرة في التحميل.

10 - فوتر وهيدر في قمة الروعة والتنظيم.

11 - أماكن إعلانية بأسلوب متطورة.

12 - القالب متوافق مع جميع متصفحات الإنترنت مثل جوجل كروم وإنترنت إكسبلور وفايرفوكس وغيرها.

13 - خاصية إقرأ المزيد التلقائية لوضع وصف مختصر لكل موضوع.

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

15 - خاصية الموضوع الأكثر شهرة Trending بأعلى قالب المدونة.

16 - خاصية إشتراك الزوار بالمدونة لإستقبالهم أخر المقالات بريدياً.

17 - خاصية أسماء المواضيع السابقة والتالية.

والأن لتحميل قالب My Blogger Tricks تفضل بالضغط هنا.

مع أطيب أمنياتنا للجميع بالتوفيق

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

بلوجر تصميم المواقع دروس بلوجر

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

glokall 9:59 ص اضف تعليق

أكمل المقال

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

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

فلنبدأ موضوعنا اليوم عن

طريقة تقسيم موضوع بلوجر واحد على عدة صفحات بدون الحاجة لإنشاء عدة تدوينات مختلفة

مشتملات هذا المقال:

1 - نصائح هامة قبل الإستخدام ومثال على تقسيم تدوينة بلوجر على عدة صفحات.

2 - فائدة تقسيم موضوع بلوجر على أكثر من صفحة.

3 - طريقة التنفيذ لتقسيم مقال Blogger على أكثر من رابط.

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

1 - يجب أن يكون موضوعك في الأصل طويلاً للغاية .. لإنك عندما تقوم بإستخدامها حاول أن لا تقل الصفحة الواحدة من موضوعك بعد التقسيم عن 350 كلمة مثلاً وهو أقل تقدير ممكن نصح به خبراء السيو الحاليين.

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

2 - كل صفحة من صفحات مقالتك يجب أن تقوم بوضع إسم لها هو نفس إسم الفقرة التي تتحدث عنها الصفحة مع توضيح ما سبق أن تحدثت عنه بالصفحة السابقة وما ستتحدث عنه بالصفحة التالية من نفس المقالة.

ولكن ليس ذلك كل شئ .. فبعد أن تضع عنوان لكل صفحة على حدى قم بتحديد هذا العنوان وبأعلى أدوات محرر محتوى مقالتك في بلوجر قم بتغيير نوع هذا العنوان من العادي Normal إلى Subheading نظراً لأن عنوان موضوع بلوجر في الأصل يكون هو ال Heading .. ومن المؤكد إنك تعلم ما هو الهيدينج والصب هيدينج أو سمعت عنهم والمرموز إليهم ب H1 , H2 وحتى H3 .. وهم في منتهى الأهمية في محركات البحث.

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

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

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

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

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

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

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

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

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

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

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

والأن مع طريقة التنفيذ ونعتذر عن التطويل:

أولاً: قم بأخذ نسخة إحتياطية من كامل مدونة بلوجر الخاصة بك .. وليس القالب فقط بل حتى مقالاتك.

ثانياً: قم بالدخول إلى قالب مدونتك من Template والتأكد من أن الكود التالي متاح به أو حتى إضافته كما سنشرح لاحقاً بالضغط على Edit HTML وتابع الخطوات.

ثالثاً: ما يجب أن تبحث عنه بقال مدونتك هو كود الجيكويري الذي يكون أسفل فتحة ال Head عادة والذي يأخذ هذا الشكل

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

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

رابعاً: الأن قم بالبحث في قالب مدونتك عن الكود

]]></b:skin>

وأضف أعلاه مباشرة هذا الكود

.post-pagination { margin: 40px auto; text-align: center; width: 100%; float:left; } .button_1, .button_2, .button_3 { border: 2px solid #f4655f; font-weight: 900; padding: 6px 36px; color:#f4655f; transition:ease 0.69s !important; } .button_1:hover, .button_2:hover, .button_3:hover { background: none repeat scroll 0 0 #f4655f; color: #fff; text-decoration: none; }

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

خامساً: قم بالبحث مرة أخرى عن رمز إغلاق الهيد </head> وبأعلاه مباشرة قم بإضافة الكود التالي:

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.button_1').click(function(){ jQuery('.content_1').fadeIn('slow'); jQuery('.content_2').fadeOut('fast'); jQuery('.content_3').fadeOut('fast'); jQuery(this).css('background','#F4655F'); jQuery(this).css('color','#fff'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#F4655F'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#F4655F'); return false; }); jQuery('.button_2').click(function(){ jQuery('.content_1').fadeOut('fast'); jQuery('.content_2').fadeIn('slow'); jQuery('.content_3').fadeOut('fast'); jQuery(this).css('background','#F4655F'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#F4655F'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#F4655F'); return false; }); jQuery('.button_3').click(function(){ jQuery('.content_1').fadeOut('fast'); jQuery('.content_2').fadeOut('fast'); jQuery('.content_3').fadeIn('slow'); jQuery(this).css('background','#F4655F'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#F4655F'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#F4655F'); return false; }); }); </script>

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

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

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

والأن في صفحة محرر الأكواد لموضوعك قم بإضافة الكود التالي:

<div class="content_1"> Add Content Here </div> <div class="content_2" style="display: none;"> Add Content Here </div> <div class="content_3" style="display: none;"> Add Content Here </div> <div class="post-pagination"> <a class="button_1" href="#">1</a> <a class="button_2" href="#">2</a> <a class="button_3" href="#">3</a> </div>

وكما لاحظة فإن الكود به جملة Add Content Here 3 مرات .. وهي ما عليك إستبداله بمحتوى كل فقرة .. الأولى للفقرة الأولى والثانية للثانية والثالثة للصفحة الثالثة بالترتيب.

ويمكنك فيما بعد نشر موضوعك المقسم الأول ومبروك.

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

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

<div class="content_1"> Add Content Here </div> <div class="content_2" style="display: none;"> Add Content Here </div><div class="post-pagination"> <a class="button_1" href="#">1</a> <a class="button_2" href="#">2</a></div>

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

مع أطيب أمنياتنا للجميع بالتوفيق .. روميسيا للخدمات الإلكترونية