هيلبرنت | Helpernt - عرض مشاركة واحدة - [blogger] طريقة نشر الصور المتحركة GIF فى موقعك بخاصية Click to preview

احصائياتى



الردود
1



المشاهدات
8575



هيلبرنت

.:: رفيق درب ::.



المشاركات
11,551



+التقييم
321



تاريخ التسجيل
Jul 2015



الاقامة
فى الدنيا



نظام التشغيل
windows 8



رقم العضوية
18

04-17-2019, 08:28 PM

المشاركة 1

04-17-2019, 08:28 PM

المشاركة 1

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

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

كود:

</head>

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

كود PHP:


			
<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 للتدوينة.

النتيجة

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