2018-05-19

كيف يدعم تطبيقك عدة لغات مختلفة Localize your app

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

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

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

2018-04-06

حماية مصدر كود تطبيق الاندرويد من الهاكر

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

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

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

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

2018-01-31

كيفية ضبط العناوين فى قوالب بلوجر h1,h2,h3

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

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

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

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

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

 أهمية إضافة عناوين H1,H2,H3 إلى تدويناتك

العناوين أو "الترويسات" Heading tags واحدة من أهم آليات السيو فهى لا تقل أهمية عن الميتاتاج أو الكلمات المفتاحية، .........و غير ذلك من الآليات التى يجب أن تستخدمها لزيادة عدد الزوار القادمون من محرك البحث.
تنقسم وسوم العناوين إلى : H1,H2,H3,H4
بحيث تحاط هذه الوسوم العناوين على حسب أهميتها :
فلنفرض أن عنوان الموضوع هو الأهم بالنسبة للزائر >>> فيجب أن يحاط بالوسوم H1
،هناك عناوين فرعية داخل الموضوع >>> يجب أن تحاط بالوسوم H2
وعلى ذلك تعطى إشارة لمحرك البحث بأن يعطى الأولوية للعنوان المحاط بالوسوم H1 ويتقدم عن العناوين المحاطة بالوسوم H2 للظهور فى نتائج البحث.

مبادئ أساسية عن استخدام الترويسة 1،2،3

  1.  أهم عنوان فى الصفحة يجب أن يحاط بالوسوم H1  ، لذلك يمكن أن يستخدم لعنوان المدونة أو عنوان التدوينة.
  2. يفضل أن يستخدم الوسوم H1 مرة واحدة فى صفحة الويب.
  3. يستخدم الوسوم H2 فى العناوين الفرعية ، H3,H4 للعناوين الثانوية الأقل أهمية.
  4. تستخدم الكلمات المفتاحية فى العناوين حسب أهميتها.

تنسيق العناوين بقوالب بلوجر:

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

heading tags
يجب أن يكون ترتيب وسوم العناوين فى صفحات التدوينات كما بالصورة:

heading tags
لاحظ تبديل الوسوم بين h1,h2 فى الصفحة الرئيسية للمدونة و صفحات التدوينات.

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

يمكنك إضافة وسوم العناوين من خلال شريط أدوات المشاركة ، وذلك عن طريق تحديد النص الذى تريد ثم إختيار التنسيق المناسب (عادى أو عنوان أو عنوان فرعى أو ثانوى) حسب أهمية النص
heading tags
هذا بالنسبة للعناوين داخل الموضوعات ، فهل بتطبيق ما سبق ستحتوى هذه وسوم  هذه العناوين على الترتيب الصحيح ؟؟

اختبر موقعك من ناحية Seo

يمكنك إستخدام بعض الأدوات لتتعرف على توافق عناوين موقعك مع محركات البحث مثل :
  1.  أداة   seositecheckup  فمن خلال إختبار رابط موقعك سيتبين لك كم عدد الوسوم H1,H2,H3,.......... والعناوين التى تحتوى عليها.
  2. تحميل وتثبيت شريط أدوات Web Developer لمتصفح فايرفوكس  أو جوجل كروم 
قم بفتح موقعك وإختباره بهذه الأداة من خلال تبويب "Outline" وتنشيط outline headings , show element name 
كما بالصورة

لاحظ ظهور الوسوم بجانب العناوين بالشكل الصحيح

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

اصلاح الأكواد فى موقعك

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

إذهب إلى تحرير قالب ، ثم إبحث عن هذا الكود  <header>
ثم قم بإستبداله بالسطر التالى:

<header itemscope='itemscope' itemtype='http://schema.org/Organization'>
ثم إبحث عن هذا الكود : <!--Show the image only--> سوف تجد تحته هذا الكود
<a expr:href='data:blog.homepageUrl' style='display: block'> 
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> 
        </a>
قم بإستبداله بالكود التالى:
<!--Header Tags Optimized Code by MBT-->

<b:if cond='data:blog.pageType == &quot;index&quot;'> 
                          <h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'> 
                            <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>your Blog title</span></a> 
                            </h1>

<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>

<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'> 
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>My Blogger Tricks</span></a> 
</h1>

<b:else/> 
                                   <h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'> 
                            <img itemprop='logo' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><span>My Blogger Tricks</span></a></h2>            </b:if>
إستبدال  your Blog title بعنوان مدونتك
ثم إبحث عن هذا الكود :   <!--No header image -->  سوف تجد تحته هذا الكود

<div class='titlewrapper'> 
                          <h1 class='title'> 
                            <b:include name='title'/> 
                          </h1> 
                        </div>
إستبدله بالكود التالى:
<!--Header Tags Optimized Code by MBT-->

<div class='titlewrapper'> 
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
                          <h1 class='title'> 
                            <b:include name='title'/> 
                          </h1>

<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<h1 class='title'> 
<b:include name='title'/> 
</h1>

<b:else/> 
  <h2 class='title'> <b:include name='title'/></h2> 
</b:if> </b:if> 
                        </div>

تنسيق العناوين فى قالب بلوجر :

بعد ضبط العناوين ستحتاج  إلى بعض التنسيق:
إبحث عن هذا الكود :  ]]></b:skin> أضف فوقه مباشرة الكود التالى:
#header h1 a,#header h2 a, #header h1 a:visited, #header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0} 
.header h1 span, #header h2 span{text-indent:-999em; display:block;}

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

2017-12-23

مستقبل التدوين بعد إلغاء قانون حيادية الإنترنت

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

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

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

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

2017-11-10

متجر بلاى أفضل بديل عربى لـ جوجل بلاى

(مقال دعائى ممول) 

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

مميزات متجر بلاى - بديل جوجل بلاى :


matjarplay

  1. سهولة فى التعامل ،وسرعة فى تحميل التطبيقات مع إمكانية إستكمال التحميل فى حالات قطع الإتصال.
  2. جميع التطبيقات على متجر بلاى مجانية.
  3. يمكنك الإستفادة من جميع مميزات متجر بلاى بدون تسجيل حساب.
  4. رابط مباشر لتحميل التطبيقات بدون وجود روابط إعلانية مزعجة.
  5. توافر شرح مفصل مدعوم بالصور لكل تطبيق على متجر بلاى ، للإطلاع عليه قبل تحميله.
  6. توافر إمكانية البحث عن أى تطبيق تريده داخل المتجر.
  7.  تحديث مستمر للتطبيقات والالعاب الموجودة بمتجر بلاى.
  8. المتجر يدعم كلا من اللغتين :العربية ، واﻹنجليزية.

نظرة على متجر play :

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

رابط الموقع : متجر بلاى

2017-10-27

كيفية تحويل الفيديو الى كتابة على اليوتيوب مباشرة

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

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

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

     بالطبع موقع اليوتيوب من أكثر المواقع إستخداما على الإنترنت ، فأصبحت فيديوهات هذه المنصة تحتوى على إجابة لأى سؤال تبحث عنه ، بالإضافة إلى الكم الكبير من المعلومات الثقافية والترفيهية التى يقدمها فى المجالات المختلفة ، وقد دعمت جوجل اليوتيوب بالعديد من الادوات التى تساعد المستخدمين من الإستفادة القصوى أثناء مشاهدة الفيديوهات التابعة له، من ضمن هذه الأدوات أداة تساعدك فى تحويل الفيديو إلى نص مكتوب video transcription ، هذه الميزة التى تعتمد على تقنية تحويل الكلام إلى نصوص أو " speech recognition technology" التى تطورت بشكل كبير فى الآونة الأخيرة.
youtube transcription
وسيتضمن الموضوع هذه النقاط:
  1. أهمية ميزة تحويل الفيديو إلى نص
  2. كيفية تفعيل تحويل الفيديو الى نص مكتوب على اليوتيوب
  3. طرق أخرى لتحويل الفيديوهات الى نصوص

1- أهمية تحويل الفيديو إلى نص ؟

أهمية ميزة video transcription بالنسبة للمستخدم:

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

أهمية ميزة video transcription بالنسبة لليوتيوبر:

لم تقتصر هذه الميزة فقط على المستخدم ، إنما بالإمكان  لمالك الفيديو أو "اليوتيوبر " الإستفادة منها أيضًا كالتالى:
  1. تحسين سيو الفيديو، أى تقدم الفيديو فى نتائج البحث الأولى ، حيث أنه من الصعب على محركات البحث فهم محتوى الفيديو ، ولكن بعد تحويله إلى نص ستكون نتائج ظهور الفيديو أفضل.
  2. إمكانية إعادة صياغة الفيديو لنوع آخر من المحتوى ، فإذا كنت تملك فيديو على اليوتيوب بإمكانك تحويل هذه الفيديوهات إلى كتاب pdf أو مقالات داخل مدونة أو حتى على المواقع الإجتماعية - طبعا مع حفظ حقوق الملكية الفكرية . 

2- كيفية تفعيل تحويل الفيديو الى نص مكتوب على اليوتيوب


1-إضغط على رمز "more" أو (...) الموجود أسفل الفيديو ثم إختر open transcript.
كن داعيا للخير
2- قد يطلب منك تحديد اللغة ، قم بتحديد اللغة المناسبة لديك ليظهر لديك ترجمة نصية للفيديو.
video transcription
3- يمكنك نسخ هذا النص بسهولة ﻷى محرر نصى
video transcription
لا حظ : 
تتوقف دقة مطابقة النص المكتوب بالصوت الموجود بالفيديو على الأصوات المحيطة بالصوت الرئيسى .
ولتحقيق أفضل نتيجة :
إضغط على زر الإعدادات الموجود أسفل الفيديو ثم إختر subtitle  cc سيظهر النص فوق شاشة الفيديو باللون الأبيض ، بينما ستظهر بعض الكلمات باللون الرمادى وهى الكلمات التى يكون هناك إحتمال أن تكون خطأ ، يمكنك بسهولة تحريرها داخل transcript 
video transcription
مثال من فيديو على قناة : National geographic

3- طرق أخرى لتحويل الفيديو إلى نص

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

2017-10-20

6 بدائل لبرنامج اندرويد ستوديو Android studio alternatives

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

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

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

بالرغم من أن منصة Android studio هى البرنامج الرسمى والمعتمد من جوجل لتطوير تطبيقات الأندرويد ويعتبر الأفضل فى هذا المجال ، إلا أنه قد تجد بعض المستخدمين يبحثون عن بديل لهذا البرنامج لتطوير تطبيقاتهم ، ربما لأحد هذه الأسباب:
  1. مواصفات جهاز الحاسوب المُستخدم غير مناسب لتثبيت أندرويد ستوديو. (تعرف على متطلبات Android studio)
  2. الحاجة إلى تصميم تطبيق يعمل على أنظمة أخرى بالإضافة إلى نظام الأندرويد مثل ios , windows
  3.  إستخدام لغات برمجية أخرى غير لغات  Kotlin أو Java التى يدعمها أندرويد ستوديو.
فإذا كنت ممن يتطلع إلى أدوات أخرى فى تطوير تطبيقاتك، فتابع هذه المقالة التى تعرض إمكانيات كل برنامج،  لكى تستطيع أن تقرر أى البرامج يمكن أن تستخدمها طبقًا لإحتياجاتك:

2017-09-30

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

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

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

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

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

تابع:  أسرع الطرق لإنشاء صور متحركة بدون برامج

طريقة نشر الصور المتحركة GIF على موقعك بخاصية Click to preview

أولًا: إستخدمت فى هذه التدوينة إضافة مفتوحة المصدر jqGifPreview للإستفادة من ميزة Click to preview إضغط هنا للمعاينة
ثانيًا: يجب أخذ لقطة أو تصوير الشاشة لإلتقاط صورة ثابتة بصيغة PNG من الصورة المتحركة لتظهر بشكل إفتراضى قبل الضغط عليها، ورفعها على حسابك فى جوجل بلس أو أى موقع.
ثالثًا: إذا كنت تستخدم الصور المتحركة فى معظم موضوعات موقعك إتبع الخطوات:
1. إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب ( قم بالإحتفاظ بنسخة إحتياطية من القالب).
2. إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F

</head>
3. ثم أنسخ الكود التالى وقم بإضافته فوق الكود السابق مباشرة

<!--www.condaianllkhir.com-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.css" rel="stylesheet"></link>
<script src="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.js"></script>
4. ثم إحفظ القالب
5. توجه إلى تبويب HTML للتدوينة وقم بإضافة الكود التالى:
<img class="myImg" src="sample_first_frame.png" data-gif="sample_giphy.gif" />
<script>
 $(function() {
  $(".myImg").jqGifPreview();
 });
</script>
ملاحظات :
  • إذا كان لديك مكتبة JQuery بالقالب ، فلا داعى لإضافة السطر الأزرق بالكود .
  • قم بإستبدال الجزء الملون باللون الأصفر بالكود برابط الصورة الثابتة بصيغة PNG
  • قم بإستبدال الجزء الملون باللون الأخضر بالكود برابط الصورة المتحركة بصيغة Gif
  • إذا كنت تريد إستخدام هذه الخاصية فى موضوع معين فقط يمكنك إضافة جميع الأكواد داخل تبويب HTML للتدوينة.
يمكنك أيضًا إستخدام حل آخر وهو عرض الصور المتحركة داخل Colorbox
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2017 ©

تصميم كن مدون