مساحة إعلانية

2016-09-26

شرح صنع تطبيقات الأندرويد ببرنامج Android Studio

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

نظرة حول برنامج Android Studio:

هو برنامج يستخدم لبرمجة تطبيقات نظام الأندرويد ، تم إطلاقه من قبل جوجل لتوفير الأدوات اللازمة فى تطوير التطبيقات ويعتبر بديل لبرنامج Eclipse بل يتفوق عليه فى مجال برمجة الأندرويد.
android studio

تعرف على كيفية تحميل وتثبيت برنامج Android Studio

لماذا أندرويد استوديو هو الأفضل؟

بالرغم من توافر العديد من البرامج لإنشاء تطبيقات الأندرويد إلا أنه معظم المبرمجين يفضلون برنامج android studio وذلك لأن به العديد من المميزات أهمها:
  1. يقدم هذا البرنامج إمكانية كتابة الأكواد البرمجية بطريقة سهلة بدون أخطاء حيث يسمح بإستكمال الكود الذى تقوم بكتابته مع حفظه تلقائيًا.
  2. توفر المحاكى أو Android Emulator جيد من حيث السرعة والأداء وذلك لمعاينة التطبيق عند تطويره والذى يعتمد على موارد الجهاز وبعض العمليات مثل تكبير وتصغير الشاشة ،تعدد اللمس ،...... 
  3. يستخدم البرنامج نظام السحب و الإفلات لنقل المكونات خلال واجهة الإستخدام.
  4. يمكن أيضًا إختبار التطبيقات على مختلف أنواع شاشات والأجهزة بجميع قياساتها عبر خدمة جوجل السحابية للمطورين.
  5. يحتوى البرنامج على خاصية التشغيل الفورى Instant Run بحيث يعرض البرنامج أى تعديل يقوم به المطور داخل التطبيق مباشرة.
  6. إمكانية إكتشاف الأخطاء الرسومية عند برمجة التطبيقات أو الألعاب التى تعتمد على الرسومات عن طريق ميزة "مصحح الأخطاء الرسومية".
  7. يدعم خدمات جوجل مثل خرائط جوجل ، مستندات جوجل ،................
  8. إمكانية متابعة ظهور تطبيقك بعد نشره على جوجل بلاى وتحسين ظهوره خلال محرك البحث جوجل من خلال أداة "Google App indexing Test"
  9. البرنامج يوفر الترجمة لأكثر من لغة إذا إحتجت إلى  تعدد اللغات فى التطبيق.
  10. توافر القوالب مفتوحة المصدر التى يمكن التعديل عليها خلال موقع Github
والعديد من المميزات الأخرى التى سوف تكتشفها بنفسك عند التعامل مع البرنامج.

كيف أبدأ التعامل مع برنامج أندرويد ستوديو؟

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

كيفية بدء صنع تطبيق أندرويد بإستخدام برنامج Android Studio:

1 - إبدأ بإنشاء أول تطبيق أندرويد لك

بعد أن قمت بتثبيت البرنامج على جهازك يمكنك البدء (تابع كيفية تحميل وتثبيت آخر إصدار)
حتى تصل إلى شاشة البدء>> إضغط على على Start a new Android Studio project
android studio
فى النافذة التالية يمكنك إختيار إسم مناسب لمشروعك ورابط موقعك حتى يقوم البرنامج بإنشاء Package Name مخصص لتطبيقك وهو ضرورى ليكون لتطبيقك إسم معرف خاص به يميزه عن أى تطبيق آخر.
يمكنك أيضًا تحديد المسار الذى سيحفظ به ملفات التطبيق من خلال Project location

android studio

2- تحديد أنواع الأجهزة والإصدارات التى سيعمل عليها التطبيق

 يمكن تفعيل أنواع الأجهزة التى تريد أن تدعم تطبيقك سواء كان (الهاتف المحمول أو التابلت أو الساعات الذكية أو شاشة التلفاز أو نظام أوتو أو النظارات الذكية)
يمكن أيضًا إختيار أقل إصدار أندرويد يعمل عليه تطبيقك  Minimum SDK

android studio

3- إختيار نموذج مناسب لتطبيقك Add an Activity to Mobile

يتوفر بالبرنامج بعض النماذج الجاهزة التى يمكن أن تستخدمها لتطبيقك >>> قم بإختيار التخطيط المناسب الذى تريد إستخدامه فى تطبيقك.
android studio

4- إبدأ ببرمجة تطبيقك

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

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

2016-09-18

خطوات تثبيت Android Studio على الويندوز بدون مشاكل

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين


بعد أن قدمت شرح لإنشاء بعض التطبيقات بإستخدام منصة Appinventor طلب منى الكثير من المتابعين بتقديم شرح للتطبيقات بإستخدام برنامج 2.1 Android Studio لما به من إمكانيات أكثر إحترافية.
Android studio
 ولكن هناك بعض المعوقات التقنية لتثبيت البرنامج التى قد تواجه بعض المستخدمين ، لذلك خصصت هذا الموضوع لشرح كيفية التثبيت وللإجابة على الأسئلة الشائعة حول هذا البرنامج فإلى هناك.

إقرأ أيضًا: من أين أبدأ تعلم صنع تطبيقات الأندرويد

هل مواصفات جهازى متوافقة مع android studio 2 ؟ 

إذا كان جهازك يتميز بالمواصفات التالية ، فهو مناسب لعمل برنامج أندرويد ستوديو: (يمكن مراجعة متطلبات البرنامج من الموقع الرسمى)
  1.  يعمل بأحد الأنظمة  Linux أو  Mac أو widows 7,8,10
  2.  رامات لا تقل عن 2 جيجا ويفضل 8 جيجا
  3.  توفر مساحة على الهارد ديسك لا تقل عن 4 جيجا

تحميل منصة الجافا JDK

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

 تحميل برنامج android studio من موقعه الرسمى

إبدأ بتحميل برنامج Android Studio على حسب النظام الذى يعمل به جهازك (فى هذا الشرح على نظام Windows 7)
Download Android Studio

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

تثبيت برنامج Android Studio

بعد إتمام عملية التحميل قم بتثبيت ملف البرنامج  (Run as administrator)
 ثم إتبع الخطوات:
Setup Android Studio
أحيانًا فى بعض نسخ الويندوز أثناء التثبيت لا يتعرف البرنامج على مكان ملفات الجافا على الجهاز وتظهر شاشة كما بالصورة
Android Studio Setup
ولحل هذه المشكلة يمكن إضافة مسار الجافا يدويا كهذا المثال
Android Studio Setup
# حل آخر:
إذهب إلى لوحة تحكم الجهاز
Control Pannel>System Properties>Advanced system< Enviroment Variables
ثم قم بإنشاء متغير جديد وذلك بالضغط على New
أضف اسم المتغير JAVA_HOME وقيمة المتغير مسار تثبيت الـ JDK على جهاز الكمبيوتر كمثال C:\Program Files\Java\jdk1.8.0_20 .
Android Studio Setup Problems

بعد تغيير هذه الإعدادات حاول تثبيت البرنامج مرة أخرى وإتبع باقى الخطوات
تأكد من تفعيل Android SDK  ، Android Virtual Devices

Android Studio installation

بعد ذلك إختر مسار تثبيت البرنامج وملفات sdk (لابد ألا تقل المساحة عن 4 جيجا )
Android Studio installation
ثم أكمل الخطوات إلى أن تصل إلى نهاية التثبيت

عند فتح أندرويد ستوديو لأول مرة ستحتاج إلى تحميل بعض المكونات
ولتحميل هذه المكونات بدون مشاكل >> عليك بفتح البرنامج كمدير مسئول  (Run as administrator) 
..ثم إنتظر حتى إتمام التحميل
Android Studio installation

ويكون البرنامج جاهز للعمل >> إبدأ بإنشاء تطبيقك الأول
Android Studio

إقرأ أيضًا: كيفية إنشاء حساب مطور على Google Play

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

2016-09-05

لا تنس هذه النقاط عند تنسيق محتوى موقعك

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

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

تنسيق النصوص:

تنسيق النصوص
  1.  عدد الكلمات فى العنوان : تأكد من أن عدد الكلمات التى يحتويها العنوان لا يتجاوز 69 حرفًا متضمنًا المسافات حتى يظهر كاملا بمحرك البحث جوجل.
  2. إستخدم نوع خط واضح بحجم مناسب يريح عين القارئ.
  3. التركيز على الكلمات والجمل الهامة بتغيير تنسيقها بإستخدام الخط السميك (B) أو المائل (I) 
  4. الإهتمام بمحاذاة النص Justfiy حتى تبدو الفقرات منظمة.
  5. إستخدم العناوين الفرعية والثانوية فبجانب أهميتها فى تنظيم المقال ، فلها أهمية كبيرة فى أرشفة التدوينة فى محركات البحث.
  6. إبتعد عن النصوص المكدسة وحاول تقسيم النص الطويل إلى فقرات منفصلة تتخللها العناوين والصور .
  7. إحرص على أن تكون الفقرات قصيرة ، فالزائر يبحث دائمًا عن المعلومة السريعة.
  8. راجع النص جيدًا وتأكد أنه خال من الأخطاء الإملائية.
  9. الإهتمام بإستخدام علامات الترقيم  فى مواضعها المناسبة (- ، : ؟ .)
  10. إستخدم الصور مع النصوص لجذب إنتباه القارئ ودفع الملل عنه (سنتعرف فى الفقرة التالية على كيفية إختيار الصور) 

إختيار الصور المناسبة لتدويناتك:

الصورة بألف كلمة
  1. يفضل أن تقوم بتصميم صور خاصة بموقعك يكون لها طابع خاص وبصمة مميزة ، وإذا لم تكن لديك فكرة عن التصميم إليك بعض المهارات لغير المصممين التى ربما تفيدك فى تصميم صور موقعك.
  2. الإهتمام بإستخدام الصور عالية الجودة ...ربما تفيدك هذه المصادر.
  3. يجب الإنتباه إلى نوعية الترخيص الخاص بالصور تجنبًا لإنتهاك حقوق الملكية الفكرية.
  4. إستخدام الرسوم البيانية والتوضيحية (الانفوجرافيك) يدعم المحتوى بشكل كبير.
  5. يفضل التنوع فى إستخدام الصور ما بين إنفوجرافيك، صور هزلية ، لقطات الشاشة ، الأيقونات أو حتى بإستخدام كاميرا هاتفك المحمول.
  6. إختيار صيغة مناسبة للصورة jpg أو PNG مع مراعاة أن يكون حجم الصور صغير حتى تظهر بسهولة عند تحميل صفحات موقعك (تابع: كيفية تصغير حجم الصور).
  7. يجب مراعاة أبعاد الصورة التى تبدأ بها الموضوع بحيث تظهر بشكل مناسب فى الصفحة الرئيسية مع خاصية إقرأ المزيد أو مع الإضافات والأدوات التى تدعم مصغرات الصور.
  8. لا تغفل إضافة نص بديل للصورة حتى تظهر بمحرك بحث الصور وتكون مصدر جيد للزوار.
  9. إذا كان موقعك يعتمد على الصور بشكل كبير يفضل إستخدام عارض الصور lightbox أو colorbox  
  10. يجب عدم المبالغة فى إستخدام الصور على حساب نص المحتوى.

إستخدم أدوات التنسيق الإضافية

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

إختبر التجاوب

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

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

2016-08-05

إظهار صورة وملخص روابط مدونة بلوجر على تويتر Twitter Card

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

twitter card
كيف تضيف أدوات تويتر الرسمية إلى موقعك بدون تعقيد

لتركيب الاضافة على مدونات بلوجر:

  1. إذهب إلى لوحة تحكم بلوجر ثم اختر تبويب "قالب"
  2. قم بتحرير قالب بعد الاحتفاظ بنسخة احتياطية منه.
  3. قم بالبحث عن الوسوم <head> ثم اضف الكود التالى بعده مباشرة
<!-- twitter card details -->
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageTitle + &quot; &quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageName + &quot; كن داعيا للخير &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='http://2.bp.blogspot.com/-UsURhuC65KU/V4FOv4KHziI/AAAAAAAAIuw/l8obNGNMFF4X71AZt5DJp9EwLRGaPU3ZACK4B/s1600/new-logo.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@DrRo2' name='twitter:creator'/>

<!-- end twitter card details -->
  • إستبدل DrRo2@ بإسم المستخدم الخاص بحسابك على تويتر.
  • إستبدل رابط شعار الموقع الملون باللون الأخضر برابط شعار موقعك
  • إستبدل عنوان الموقع الملون باللون الأزرق بعنوان موقعك.
  • يمكن إختبار الكود من خلال هذا الموقع Card validatorومعرفة إذا كان يعمل بشكل صحيح أم لا.
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرًا

2016-07-31

كيفية تضمين قوائم تشغيل قناة اليوتيوب فى موقعك

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

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

أولًا : إنشاء قائمة تشغيل على قناة اليوتيوب

 إذهب إلى قناتك على اليوتيوب ثم إضغط على تبويب "قوائم التشغيل"أو "Playlists" ثم " قائمة تشغيل جديدة " كما بالصورة
create playlist
ثم إختر عنوان مناسب للقائمة وإضغط إنشاء
youtube playlist
بعد ذلك ستفتح نفذة يمكن من خلالها إضافة الفيديوهات التى لها صلة ببعضها و تريد عرضها فى  قائمة التشغيل.
add video

ثانيًا : الحصول على كود تضمين قائمة التشغيل

بعد إنشاء قائمة التشغيل على موقع اليوتيوب قم بالضغط على الفيديو الذى تريد أن يظهر فى المقدمة 
ثم إضغط مشاركة >> تضمين 
سيظهر لك كود التضمين لقائمة التشغيل هكذا قم بنسخه لإضافته بموقعك
embed youtube playlist
أو
إستخدام هذا الكود :
<iframe width="560" height="315" src="https://www.youtube.com/embed/i2Yh_oBJ8Ds?list=PLdGltxXkthDTbIywOdmDPQ7oOJ6PK95dE" frameborder="0" allowfullscreen></iframe>
مع تغيير الجزء الملون باللون الأحمر بالرمز المعرف.
تابع أيضًا: كيفية فتح الفيديو داخل صندوق الضوء Colorbox

ثالثًا: إضافة كود التضمين مع ميزة التجاوب للهواتف المحمولة

ليظهر الفيديو بشكل جيد على شاشة الموبايل أو التابلت أضف الكود التالى قبل كود تضمين الفيديو ليكون الكود بالكامل هكذا:
<style type="text/css">
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<br />
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/i2Yh_oBJ8Ds?list=PLdGltxXkthDTbIywOdmDPQ7oOJ6PK95dE" frameborder="0" allowfullscreen></iframe>
 
يجب تغيير السطر الملون بالأحمر بكود التضمين الخاص بك... تابع أيضًا: كيف تتحكم فى جودة الفيديو المضمن؟
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

2016-07-24

كيفية صنع مقاطع فيديو ناجحة على الإنترنت

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

لماذا يفضل العديد من مستخدمى الإنترنت المحتوى على هيئة فيديو ؟

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

الخطوة الأولى: إنشاء محتوى جيد للفيديو

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

وللحصول على محتوى أفضل إليك هذه الخطوات:

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

الخطوة الثانية: إنتاج مقطع فيديو عالى الجودة

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

mobile camera
فإذا كان الفيديو يعتمد على مشاهد مصورة يجب مراعاة الآتى:
  1. جودة الكاميرا المستخدمة فى التصوير.
  2. التأكد من وجود إضاءة كافية.
  3. إذا كنت تستخدم صوتك فى الفيديو يجب إستخدام ميكروفون خارجى مناسب مع الإبتعاد عن الضوضاء.
  4. خلفية الفيديو الموجودة بالكادر يجب أن تكون هادئة ولا تشتت عين المشاهد.
  5. إذا كان الفيديو يحتوى على شرح معين من جهاز الكمبيوتر يمكن الإستعانة بأفضل برامج تصوير الشاشة مثل Snagit  أو Camtasia Studio ، أو تصوير الشاشة من خلال اليوتيوب مباشرة 
تعرف أيضًاعلى : طرق تصوير شاشة الهاتف فيديو

  الخطوة الثالثة: مونتاج الفيديو

   
montage video
   هذه الخطوة الهامة تدل على مدى إحترافية الفيديو ، فمن خلال المونتاج تستطيع إجراء تعديلات على الفيديو مثل دمج أكثر من مقطع ، قص جزء معين، الكتابة على الفيديو ، إضافة المؤثرات،تصميم فواصل،.......إلخ.
وتوجد العديد من برامج المونتاج التى تقوم بهذه المهمة فبدءًا من البرامج التى توفر الإحتياجات الأساسية للمونتاج مثل: برنامج موفى ميكر Movie maker، أو المونتاج أون لاين عن طريق موقع اليوتيوب مباشرة Youtube editor وهذه البرامج سهلة الإستخدام ولا تحتاج إلى دراسة.
يمكن أيضًا إستخدام برامج أكثر إحترافية مثل Premiere Pro أو  After effects  ولكن هذه البرامج تحتاج إلى التعلم ومتابعة الدورات لتتمكن التعامل معها بسهولة.

إنشاء مقدمة للفيديو:

  يفضل أن تبدأ الفيديو بمقدمة جيدة بها اللوجو الخاص بك و عنوان الفيديو  فهى تعطى الإنطباع الأول عن عملك ، ويمكن تصميم هذه المقدمة بإستخدام أى برنامج من برامج المونتاج أو إستخدام أحد المواقع التى تقدم نماذج جاهزة مجانية أو مدفوعة يمكن التعديل عليها بما يناسبك:
  • MakeWebVideo   : يقدم العديد من الأدوات لإنشاء مقدمة إحترافية - الموقع مجانى لفترة محدودة.
  •  introchamp  :يضم مجموعة كبيرة من القوالب التى تستطيع التعديل عليها (يمكن تحميل الفديو مجانًا بإستخدام إنترنت داونلود مانجر)
  • FlixPress :يمكن عمل مقدمة فيديو بإستخدام النصوص.
بعد صنع المقدمة المناسبة للفيديو يمكنك دمجها بإحدى برامج المونتاج السابق ذكرها ولكن حاول أن تبتعد عن المقدمات الطويلة فيجب أن لا تتجاوز 15 ثانية .

الخطوة الرابعة : تسويق الفيديو على اليوتيوب

video marketing
    بعد الإنتهاء من إنشاء الفيديو لا يبقى سوى الترويج للفيديو و نشره ليشاهده الجمهور ، وإليك هذه النقاط التى تساعدك فى نشر فيديوهاتك وتحقيق نسب مشاهدة عالية:
  1. إبدأ بإنشاء قناة على اليوتيوب فهو ثالث موقع أكثر زيارة فى العالم (يمكن أيضًا إستخدام منصات أخرى كالفيس بوك وVimeo)
  2. إختر إسم وشعار للقناة مناسب لمجال الفيديوهات المقدمة من خلالها.
  3. إهتم بأن تكون مدة الفيديو مناسبة لاقصيرة جدًا ولا طويلة ومملة. 
  4. إستخدم عنوان جذاب ولابد أن يكون مطابق لمحتوى الفيديو. 
  5. إختيار صورة مصغرة مناسبة تعطى فكرة عن محتوى الفيديو.
  6. الإهتمام بوصف الفيديو بحيث يحتوى على كل التفاصيل المتعلقة بموضوع الفيديو.
  7. إستخدام الكلمات المفتاحية فهى تساعد على إنتشار الفيديو خلال محركات البحث.
  8. أضف الوسوم Tags  التى لها صلة بمقطع الفيديو .
  9. نظم فيديوهات القناة بقوائم التشغيل لتسهيل بحث المشاهد فى هذه الفيديوهات.
  10. يمكنك الإستفادة من ميزة إضافة ملاحظة أو تعليق توضيحى على الفيديو Youtube Annotation 
  11. إذا كان لديك موقع أو مدونة قم بتضمين الفيديو مع مراعاة التجاوب و كتابة نبذة مختصرة عن محتواه. (تابع : كيفية فتح الفيديو داخل صندوق الضوء لموقعك) ، (تابع أيضًا: كيفية تضمين قوائم التشغيل لقناة اليوتيوب)
  12. نشر روابط الفيديو فى المواقع والمنتديات التى لها نفس الإهتمام بمجال الفيديو للحصول على باك لينك يجعل الفيديو متقدم بنتائج البحث.
  13. متابعة إحصائيات القناة لمعرفة أى الموضوعات تجذب المشاهدين أكثر.
  14. إنشاء حسابات على مواقع التواصل الإجتماعى الأخرى وربطها بقناة اليوتيوب لنشر الفيديوهات من خلالها.

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

2016-07-09

كيف تنظم وقتك كمدون لإدارة موقعك ؟

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

Blog Mock up
      من المشاكل الشائعة التى تواجه المدونين هى مشكلة الوقت ، فالتدوين من الأنشطة التى تحتاج إلى وقت كبير لإدارة المدونة بصورة جيدة .
    فإذا كنت مدون ، فبالتأكيد أهم شئ لديك هو بناء ثقة الزوار بموقعك ، وذلك يتطلب وقت كافى لتقديم محتوى جيد يقوم بتلبية توقعات متابعينك حتى يكون موقعك بمثابة مرجع لهم يعاودون لزيارته من حين لآخر.
وبالنسبة لى شخصيًا تعتبر مشكلة الوقت عائقًا فى تطوير الموقع ، لذلك قررت أن أبحث فى الموضوع وأن أقوم بإعداد خطة لإدارة موقعى ، وسأشارككم خطتى فى السطور التالية والتى تتلخص فى:
  • تحديد المهام الرئيسية لإدارة المدونة.
  • إستخدام بعض الأدوات لتنظيم الوقت.
  • بعض التوصيات لزيادة الإنتاجية فى أقل وقت.
  • بعض الحلول  لمشكلة ضيق وقت.

أولا: تحديد المهام الرئيسية لإدارة المدونة

من الأفضل ترتيب الأولويات وتقسيم الوقت المتاح لدينا على المهام المطلوب منا إنجازها و الإنفوجرافيك التالى مثال لذلك:
time managment infographic

1 - إنشاء محتوى جيد :

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

2- القراءة والبحث:

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

3- تحسين السيو:

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

4- التسويق عبر الشبكات الإجتماعية:

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

5- الرد على التعليقات وإستفسارات القراء:

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

6- تجديد المحتوى القديم:

يجب إلقاء نظرة على المقالات القديمة وتحديث المعلومات بها إن جد جديد.

7- صيانة المدونة:

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

8- متابعة إحصائيات المدونة:

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

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

أدوات تنظيم وقت المدون

هذه بعض الأدوات التى تساعد فى تنظيم الوقت:

جدول لتنظيم وقت المدون

يمكن إعداد جدول ينظم المهام التى تحدثت عنها ، طبعًا لكل مدون طريقته الخاصة فى تنظيم وقته ولكنى أعددت جدول به خطة شهرية كمثال (يمكن طباعته أو تحميله والتعديل عليه ببرنامج excel كما يناسبك من هـــنا )
جدول تنظيم الوقت

 تقويم جوجل Google Calendar

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

توصيات ونصائح لتوفير وقت المدون وزيادة إنتاجيته:

  1. يفضل إختيار أكثر الأوقات التى نكون بها على درجة كبيرة من التركيز والنشاط الذهنى للإبداع وترتيب أفكار صياغة المحتوى.
  2. على العكس يمكننا إختيار الأوقات التى نكون بها على درجة أقل من التركيز للمهام التى لا تحتاج منا مجهود مثل مشاهدة الكورسات والفيديوهات المجمعة فى مفضلتك.
  3. إستخدام المفكرة الورقية أو الموجودة على الهاتف لتسجيل أى فكرة تخطر ببالنا ربما نحتاجها مرة أخرى.
  4. الإبتعاد عن مضيعات الوقت أثناء ساعات العمل التى نحددها مثل التلفاز ، النوم ، الفيس بوك،.....
  5. الإعتماد على بعض تطبيقات الهواتف الذكية التى توفر الوقت مثل :
  • تطبيق Pocket لحفظ الموضوعات لقراءتها لاحقًا فى أى مكان حتى بدون إنترنت.
  • تطبيق Feedly : لمتابعة جديد المواقع المنافسة أو التى لها نفس إهتماماتك.
  • تطبيق Blogger: للتدوين من خلال الهاتف فى أى وقت.

بعض الحلول لمشكلة ضيق الوقت

نحن بشر ووارد طبعًا أن تقابلنا فترات إنشغال يضيق فيها وقتنا ، فهل نترك الموقع خامل لمجرد حدوث ظرف معين؟
لا بل هناك بعض الإقتراحات التى تجعل موقعك ينبض دائما مثل:

جدولة المشاركات:

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

السماح لكتاب آخرين بالكتابة بالموقع Guest Posts: 

إعطاء مؤلفين آخرين الفرصة لكتابة مقال حصرى يعتبر حل آخر ليبقى محتوى المدونة متجدد دائمًا .

غلق التعليقات:

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

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

2016-06-20

فتح الصور والفيديو والروابط الخارجية داخل صندوق الضوء Colorbox

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

كيفية تثبيت إضافة Colorbox على مدونات بلوجر

1. إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب ( قم بالإحتفاظ بنسخة إحتياطية من القالب).
2. إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F
</head>
3. ثم أنسخ الكود التالى وقم بإضافته فوق الكود السابق مباشرة

<link href='https://cdn.rawgit.com/DrRO/colorbox/master/example1/colorbox.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
  <script src='https://cdn.rawgit.com/DrRO/colorbox/master/jquery.colorbox.js'/>
<script type="text/javascript">
 // Make ColorBox responsive
 jQuery.colorbox.settings.maxWidth  = '95%';
 jQuery.colorbox.settings.maxHeight = '95%';

 // ColorBox resize function
 var resizeTimer;
 function resizeColorBox()
 {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.load(true);
    }
  }, 300);
 }

 // Resize ColorBox when resizing window or changing mobile device orientation
 jQuery(window).resize(resizeColorBox);
 window.addEventListener("orientationchange", resizeColorBox, false);
</script>
<script>
$(document).ready(function(){
$(&quot;a[rel=&#39;images&#39;]&quot;).colorbox({transition:&quot;fade&quot;}); 
$(&quot;a[rel=&#39;imagessamesize&#39;]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;75%&quot;, height:&quot;75%&quot;});
$(&quot;a[rel=&#39;slideshow&#39;]&quot;).colorbox({slideshow:true}); 
$(&quot;.youtube&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520}); 
$(&quot;.vimeo&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&quot;.iframe&quot;).colorbox({width:&quot;80%&quot;, height:&quot;80%&quot;, iframe:true}); 
$(&#39;a[href$=jpg]&#39;).colorbox();
$(&#39;a[href$=jpeg]&#39;).colorbox();
$(&#39;a[href$=png]&#39;).colorbox();
$(&#39;a[href$=gif]&#39;).colorbox();
$(&#39;a[href$=bmp]&#39;).colorbox();
$(&#39;a[href$=JPG]&#39;).colorbox();
$(&#39;a[href$=JPEG]&#39;).colorbox();
$(&#39;a[href$=pdf]&#39;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&#39;a[href$=swf]&#39;) .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>

4. ثم إحفظ القالب.

ملاحظات هامة:

  • يفضل إزالة السطر الملون بالأزرق إذا كان لديك مكتبة jQuery فى القالب. 
  • يجب التأكد من تعطيل خاصية Lightbox الموجودة فى قوالب بلوجر لتجنب فتح الصور مرتين :
 وذلك بالذهاب إلى لوحة تحكم بلوجر ثم تبويب الإعدادات ثم تبويب مشاركات وتعليقات
ثم قم بإختيار "لا" بجوار "عرض الصور فى العرض المبسط"
blogger lightbox
والآن نتجه إلى تفعيل الإضافة على الصور والفيديو والروابط الخارجية

أولا: تفعيل إضافة Colorbox على الصور

  • تعمل إضافة Colorbox تلقائيًا دون تدخل منك بالنسبة للصور (كل صورة بالموضوع تفتح مستقلة عن الأخرى)
  •  ولكن إذا أردت أن تعرض الصور على هيئة عرض شرائح Slideshow إتبع الآتى:
  1. قم برفع الصور التى تريد إدراجها إلى المشاركة
  2. ثم إذهب إلى تبويب HTML  للمشاركة وإبحث عن كود الصور
  3. إضف الوسوم rel="slideshow"  بين a  و herf  لكل الصورة 
ليكون كالمثال التالى:

<a rel="slideshow" href="رابط الصورة الأولى  " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="رابط الصورة الأولى مصغرة" width="290" /></a></div>

<a rel="slideshow" href="رابط الصورة الثانية" imageanchor="1"  style="margin-left: 1em; margin-right: 1em;"><img border="0" src="رابط الصورة الثانية مصغرة" /></a></div>
.
.
وهكذا

ثانيًا: تفعيل إضافة Colorbox على الفيديو

يمكن من خلال أداة Colorbox فتح الفيديو داخل صندوق الضوء وذلك من خلال الضغط على رابط نصى أو صورة مصغرة ولتفعيل ذلك على بلوجر إتبع الآتى:
  1. داخل مشاركة بلوجر قم بإضافة نص يؤدى إلى الفيديو مثلا : "إضغط هنا لمشاهدة الفيديو" ثم قم بإضافة رابط تضمين للفيديو على اليوتيوب على هذا النص
  2. إذهب إلى تبويب HTML للمشاركة وإبحث عن الكود الذى به رابط الفيديو.
  3. أضف الوسوم class="youtube" بين a  و herf  لرابط الفيديو إذا كان من اليوتيوب ليكون كالمثال التالى:
<a class="youtube" href="رابط تضمين مباشر للفيديو على اليوتيوب" title="كيفية إنشاء تطبيق القرآن الكريم">اضغط هنا لمشاهدة الفديو</a>

ملاحظات هامة:

  • إذا كان الفيديو من موقع فيمو >> قم بإضافة الوسوم class="vimeo" بين a  و herf لرابط تضمين الفيديو المباشر.
  • يمكن أيضًا إستبدال النص الذى يحمل رابط الفيديو بصورة مصغرة بالضغط عليها يتم فتح الفيديو داخل صندوق الضوء ، ولتنفيذ ذلك يمكن رفع الصورة المصغرة للمشاركة وإضافة رابط تضمين الفيديو إليها ثم إضافة الوسوم class="youtube" بين a  و herf  لرابط الفيديو  
مثال لكود صورة مصغرة تحمل رابط فيديو

https://www.youtube.com/embed/i2Yh_oBJ8Ds
إضغط على الصورة لمشاهدة الفيديو
الكود المستخدم:
<a  class="youtube"  href="https://www.youtube.com/embed/i2Yh_oBJ8Ds">
<img src="https://1.bp.blogspot.com/-h_mXwHvfgUo/VGZFVgbGphI/AAAAAAAAHds/v3aa-ZZ-eI4/s1600/quraan-icon.png"></a>

ثالثُا: تفعيل إضافة Colorbox على الإطارات التى تحتوى على الروابط الخارجية iframe

يعتبر Colorbox من الحيل التى تستخدم للحفاظ على إحصائيات الموقع فى حالة وجود روابط خارجية ، فبدلا من أن يترك الزائر الموقع بسرعة ليتبع رابط تحميل أو معاينة أى موقع يمكن أن يقوم بهذه المهمة من خلال فتح الرابط بإطار iframe داخل صندوق الضوء ، وبالتالى يقضى الزائر فى الصفحة فترة أطول...، ولتفعيل هذه الميزة إتبع الآتى:
  1. قم بإضافة النص مرتبط به الرابط الخارجى داخل المشاركة.
  2. توجه إلى تبويب HTML للمشاركة و إبحث عن سطر الكود الخاص بالرابط الخارجى.
  3. أضف الوسوم class="iframe" بين a  و herf  للرابط الخارجى ليكون الكود كالتالى:
<a class="iframe" href=" الرابط الخارجى" rel="nofollow" target="_blank">إضغط هنا للمعاينة </a></div>

مميزات أخرى للـ Colorbox

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

إذا كنت تريد تخصيص أكثر للأداة و تغيير تأثيرات عرض صندوق الضوء ، يمكنك تحميل الإضافة من موقعها الرسمى Colorbox والتعديل عليها ورفعها على إستضافتك الخاصة أو الإستضافة على Github أو Dropbox.

أتمنى أن يكون الشرح واضح وأى إستفسار أرجو كتابته بتعليق .
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
Privacy-Policy | عودة الى الاعلى
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2016 ©

تصميم كن مدون