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

[تفوكت السوسية]

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

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


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


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

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

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

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

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

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

<!--www.condaianllkhir.com--> <****** src="https://code.jquery.com/jquery-1.12.0.min.js"></******> <link href="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.css" rel="stylesheet"></link> <****** src="https://cdn.rawgit.com/DrRO/jqGifPreview/46d8d1dd/jqGifPreview/jqGifPreview.js"></******> 4. ثم إحفظ القالب
5. توجه إلى تبويب HTML للتدوينة وقم بإضافة الكود التالى:
<img class="myImg" src="sample_first_frame.png" data-gif="sample_giphy.gif" /> ********** $(function() { $(".myImg").jqGifPreview(); }); </******>ملاحظات :

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

يمكنك أيضًا إستخدام حل آخر وهو عرض الصور المتحركة داخل Colorbox

كن داعيا للخير

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

[سمراء النيل]

تسلمي حبيبتي
الله يعطيكي العافية
دمتي في رعاية الله

[نسمة الغزالى]

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

[داليا]

شكرا على الموضوع والافادة والمعلومات القيمة

[نور الهدى]

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

[يسرا المرشدى]

شكرا على الموضوع الشيق والمعلومات والافادة

[شاهيناز]

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

[المغربية]

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

[حوراء]

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

[تسنيم]

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