عيد الاضحى المبارك


مواضيع تهمك

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

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

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

احصائياتى

الردود
1

المشاهدات
8575
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant future

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

المشاركات
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 للتدوينة.


النتيجة



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


قديم 04-25-2019, 10:12 PM
المشاركة 2
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: طريقة نشر الصور المتحركة GIF فى موقعك بخاصية Click to preview
يعطيك الف عافية

اضافة رد

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

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


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

الانتقال السريع
المواضيع المتشابهه للموضوع: طريقة نشر الصور المتحركة GIF فى موقعك بخاصية Click to preview
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
طريقة أضافه موقعك فى ياندكس yandex وتقديم وإضافة خرائط موقعك abo-karim ركن تطوير المواقع 11 06-18-2022 10:59 AM
ضبط خاصيه ال preview في برنامج htmlpad Mohamed yasser ركن تطوير المواقع 3 08-17-2019 12:10 PM
[blogger] طريقة أرشفة الصور بطريقة سليمة, طريقة جعل الصور اكثر صديقة لمحركات البحث هيلبرنت ركن تطوير المواقع 1 01-09-2019 11:20 PM
[ شرح ] منع ظهور الصور خارج موقعك هيلبرنت ركن تطوير المواقع 2 06-28-2017 10:55 PM
طريقة نشر الصور المتحركة على فيسبوك هيلبرنت ركن مواقع التواصل الإجتماعي 0 10-12-2015 11:36 PM




الساعة الآن 09:02 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum