الملاحظات

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

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

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

احصائياتى

الردود
0

المشاهدات
28
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud of

  • هيلبرنت غير متواجد حالياً

المشاركات
8,769

+التقييم
290

تاريخ التسجيل
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 للتدوينة.


النتيجة



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

اضافة رد

العلامات المرجعية

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


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: طريقة نشر الصور المتحركة GIF فى موقعك بخاصية Click to preview
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[blogger] طريقة أرشفة الصور بطريقة سليمة, طريقة جعل الصور اكثر صديقة لمحركات البحث هيلبرنت ركن تطوير المواقع. 1 01-09-2019 11:20 PM
كود رائع للمواقع الاجتماعية بخاصية css اليوم السابع ركن تطوير منتديات vb3.8.0 0 09-21-2018 01:15 PM
طريقة أضافه موقعك فى ياندكس yandex وتقديم وإضافة خرائط موقعك abo-karim ركن تطوير المواقع. 8 07-12-2018 10:26 PM
[ شرح ] منع ظهور الصور خارج موقعك هيلبرنت ركن تطوير المواقع. 2 06-28-2017 10:55 PM
طريقة نشر الصور المتحركة على فيسبوك هيلبرنت ركن مواقع التواصل الإجتماعي 0 10-12-2015 11:36 PM




الساعة الآن 01:21 AM
Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.