الأربعاء، 4 مايو 2011

طريقة عرض إصدار الجوال لمدونتك على أجهزة المحمول Mobile Mode

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

الخطوة الأولى :
التوجه إلى لوحة التحكم الخاصة بمدوناتنا :


الخطوة الثانية : أسفل الصفحة من صندوق "الأدوات والموارد" نختار "مسودة Blogger" :




الخطوة الثالثة : عندما نفتح على مسودة Blogger تظهر لنا هذه النافذة ما علينا إلى الضغط على "تشغيل نماذج الجوال" :


النافذة ظهرت لي مباشرة لأن الخدمة جديدة , ولكن في حال لم تعد تظهر مباشرة فما علينا إلا إتباع الخطوات التالية :

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


الخطوة الثانية : من خيار "عرض نموذج الجوال" نختار "نعم , عرض إصدار الجوال لنموذجي على أجهزة الجوال" :


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

طريقة إضافة علامات التبويب أعلى مدونة Blogger

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

الخطوة الأولى : التوجه إلى لوحة التحكم >> إرسال >> صفحات التحرير :


الخطوة الثانية : الضغط على زر "صفحة جديدة" :


ليظهر المحرر الخاص بالصفحات :


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




يمكن إنشاء حتى 10 صفحات .

الفرق بين التدوينات والصفحات من حيث الرابط :

رابط الصفحة :
http://d7k.blogspot.com/p/comedy-videos.html
رابط التدوينة :
http://d7k.blogspot.com/2011/02/crazy-fm-5-6-7-8.html

تم تحديد الفرق بـاللون الأحمر , ملاحظة : تم تطبيق الدرس على إحدى مدوناتي "مدونة ضحك" لأن مدونة هاشم حين كتابة الموضوع كانت ما تزال جديدة .

طريقة إضافة "أقسام المدونة" إلى مدونات Blogger

تلبية لطلب أحد الزوار فسنتعرف في درسنا هذا على طريقة إضافة "أقسام المدونة" إلى مدونات Blogger . 


الخطوة الاولى : من لوحة التحكم >> نختار تويبة "تصميم" :


الخطوة الثانية : نختار تبويبة "عناصر الصفحة" :


الخطوة الثالثة : نختار "إضافة أداة" :


الخطوة الرابعة : نختار إضافة "التسميات" :


الخطوة الخامسة : هي ضبط الإعدادت كما في الصورة التالية :


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



فرز : ومن خلالها يتم تحديد رغبتك في طريقة الفرز هل هي أبجديا ً أم حسب التكرار 


تحديث : زيادة شرح من أجل الأخت فرشة مرح :


بالنسبة لإختيار الأقسام فسيكون على خطوتين :




الخطوة الأولى : هي الضغط على زر "تعديل" :




الخطوة الثانية : هي التأشير على الكلمات المفتاحية التي تود أن تظهرها تحت تسمية "أقسام المدونة" :



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

أرجو أن يكون الدرس واضحا ً للجميع , تمنياتي بالتوفيق لكم جميعا ً .

طريقة إضافة صندوق تعليقات الـ Facebook إلى مدونات Blogger

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

الخطوة الأولى : بعد التسجيل في الـ Facebook  نقوم بزيارة الرابط التالي : Facebook developer page


الخطوة الثانية : ملأ البينات كما موضح في الصورة التالية :


تنويه مهم جدا ً : الرابط يكون على الشكل التالي :

http://www.hashem-b.com/

قم بتغيير النص الملون باللون الأزرق فقط ! لا تنسى أن تبقي الـ "/" بعد الرابط لأنه مهم جدا ً .



الخطوة الثالثة : نقوم بالتحقق الامني بكتابة الأحرف المكتوبة في الصورة :


الخطوة الرابعة : ستظهر لك صفحة مهمة جدا ً فيها أهم شئ في درسنا هذا , قم بحفظ الـ "App ID" أو "معرف التطبيق" :


أعيد وأكرر : لا تسنى إنه أهم شئ في درسنا فقم بالإحتفاظ به لأننا سنستعمله بعد قليل .

الخطوة الخامسة : من لوحة التحكم >> تصميم >> تحرير HTML :





الخطوة السادسة : التأشير على "توسيع قوالب عناصر واجهة المستخدم" :





الخطوة السابعة : نبحث عن الكود التالي :





الخطوة الثامنة : نقوم بنسخ الكود التالي بعد الكود السابق تماما ً :


  
  
  
  
  



الآن نقوم بتعويض القيمة الملونة باللون الأحمر بالرقم الذي حصلنا عليه من  "App ID" أو "معرف التطبيق" .

الشكل النهائي بعد الإنتهاء :


الخطوة الثامنة : هي إخفاء التعليقات لأنه بعد إضافة صندوق تعليقات الـ FaceBook سيكون لدينا نموذجين للتعليقات , من لوحة التحكم >> إعدادات >> إخفاء . كما في الصورة التالية :


إسمحوا لي الآن أن أقوم بشرح صندوق التعليقات الخاص بالـ FaceBook :

ليس شرطا ً أن يكون الشخص الذي يود التعليق على موضوع ما ممتلكا ً لحساب على الـ FaceBook بل يمكنه إدخال إسمه ورابط موقعه أو بريده الإلكتروني :


وفي حال كونك قد قمت بتسجيل الدخول في وقت لاحق يكون الشكل كما في الصورة التالية :


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


لاحظ أن التعليقات تأتي الأحدث بالأقدم , أول Comment كان "مرحبا ً (:" وآخر Comment كان "أنا هنا (:" يمكن للزوار حذف الـ "Comment" الذي يكتبونه كالـ FaceBook تماما ً .

قد يسألني البعض هل يمكن أن نخضع تعليقات الـ FaceBook قبل النشر كما في Blogger ؟

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

طيب هل يمكن أن نحذف Comment أو نقوم بحظر أحد المزعجين ؟

الجواب : بالطبع نعم ولكن كما قلت في بداية الموضوع قبل الدخول إلى Facebook developer page يجب أن نكون قد سجلنا الدخول من قبل , وفي حال أردنا التحكم بالتعليقات يجب الدخول إلى حساب الـ FaceBook الخاص بنا عندما قمنا بإضافة هذه الإضافة .


كما يمكن الإستفادة من هذه الإضافة في نشر مدونتك أو موقعك أكثر وأكثر على الفيس بوك بحيث عندما يقوم الزائر بإضافة تعليق وإبقاء التأشيرة على "Post comment to my Facebook profile" فسيظهر الرد الذي كتبه مع رابط للصفحة على صفحته في الفيس بوك :


أرجو أن يكون الدرس مفيدا ً وواضحا ً للجميع , تمنياتي بالتوفيق للجميع :)

ملاحظة : الموضوع حصري , شكرا ً لتفهمكم وتقديركم للتعب المبذول عليه :)


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

طريقة إضافة تعليقات DisQus الشبيهة بتعليقات الـ FaceBook لصفحاتك


هذا النموذج شبيه بنموذج تعليقات الـ FaceBook لكنني أعتبره أفضل بـ 100 مرة , حيث أن المواقع الأجنبية الكبيرة تستعمل هذا النموذج مثل الموقع الإخباري CNN .

طريقة جعل الروابط في التعليقات NoFollow في مدونات Blogger

لمذا نسمح للـ Spanner بالحصول على باك لينك Backlink من صفحاتنا على الـ Internet , يمكننا إيقافهم عند حدهم بواسطة الـ Code الذي سأعرضه عليكم في هذا الدرس , في درسنا هذا سنتعلم طريقة جعل كافة الروابط التي تدرج في التعليقات "NoFollow" .
الكثير كان يبحث عن هذا الـ Code أولهم أنا , الآن يمكن الحصول عليه فلقد قام Thaya Kareeson ببرمجة هذا الـ Code على الـ JQuery , يمكنك تحميله ورفعه على سيرفرك الخاص من هنا , في حال لم يكن لديك سيرفر يمكنك إستخدام رابطي التي سأقوم بإدراجه بعد قليل .

الخطوة الأولى : من لوحة التحكم >> تصميم >> تحرير HTML :




الخطوة الثانية : التأشير على "توسيع قوالب عناصر واجهة المستخدم" :




الخطوة الثالثة : نبحث عن الكود التالي :




الخطوة الرابعة : نسخ الكود التالي قبل الكود السابق مباشرة :





الشكل النهائي للقالب بعد إضافة الـ Code : 





بعد الإنتهاء نقوم بـ "حفظ القالب" .



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

طريقة إضافة المؤثرات الحركية على صور مدونات Blogger

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

مثال لهذا العمل يمكنكم زيارة إحدى صفحاتي التي قمت بإضافة هذه الإضافة لها :

HA$H 4 Free Anime

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


الخطوة الأولى : من لوحة التحكم >> تصميم >> تحرير HTML :



الخطوة الثانية : 
التأشير على "توسيع قوالب عناصر واجهة المستخدم" :




الخطوة الثالثة : نبحث عن الكود التالي بالضغط على Ctrl + F :

]]



الخطوة الرابعة : إضافة الـ Code التالي قبل الـ Code الأول مباشرة :




.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}


يمكن تغيير الكتابات باللون الأحمر في الكود السابق للتحكم في درجة ميلان وإتجاه الميلان بتعويض "+" بـ "-" على سبيل المثال .

طريقة الحصول على Code الألوان , يساعد على ضبط ألوان إعلانات Adsense

في درسنا اليوم سنتطرق إلى اداة مفيدة جدا ً لا غنى لأصحاب المواقع والمدونات عنها , الأداة تعطيك الـ Code الألوان التي تعجبك , هل مررت يوما ً بمدونة أو موقع وأعجبك لون الخلفية وجلست ساعات طوال تجرب بلوحة الألوان لكي تحصل على لون قريب للون الذي أعجبك , الحل بين أيديك الآن إحصل على اللون نفسه من خلال برنامج Capture Couleur البرنامج أفضل من إضافات الـ FireFox التي لا تمكنك من أخذ الألوان إلا من صفحات الإنترنت , في درسنا هذا سنشرح برنامج Capture Couleur لضبط الألوان بالشكل المناسب !

كالعادة درسنا مقسم إلى خطوات !

الخطوة الأولى : تحميل البرنامج من خلال الرابط التالي : Capture Couleur DownLoad

التي تبلغ من الحجم 667 K.B تقريبا ً 


الخطوة الثانية : بعد تحميل الملف نقوم بفتح المجلد من المسار الذي حددته قبل التحميل :


الخطوة الثالثة : تحميل البرنامج بالضغط على ملف التحميل :


أيقونة البرنامج بعد التحميل :



واجهة البرنامج :


ما يهمنا الآن هو كيفية الحصول على الـ Code الخاص بلون معين .

الخطوة الرابعة : نحدد الزر الذي عندما نضغط عليه يقوم بإلتقاط اللون :


الخطوة الخامسة : التوجه إلى مدونة هاشم على سبيل المثال لإلتقاط إحدى الألوان :


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

الخطوة السادسة : نسخ Code اللون المراد إستعماله :


هذه الاداة يمكن الإستفادة منها في مجال Adsense وفي مجال مصمم قوالب Blogger أو في أي مجال يحتاج لتحديد الألوان بدقة عالية .