الى كل من واجه مشكله اثناء التسجيل بالمعهد



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

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

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

احصائياتى

الردود
1

المشاهدات
5453
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت 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

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

المشاركات
10,269

+التقييم
304

تاريخ التسجيل
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
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
ضبط خاصيه ال 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
ضغط الصور مع الحفاظ على جودتها لتسريع موقعك من google speed abo-karim ركن تقنيات محركات البحث سيو SEO 0 07-26-2015 05:30 PM




الساعة الآن 06:26 AM
Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd. TranZ By Almuhajir
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum