مرحبا بكم أصدقائي الكرام في موضوع جديد من دورة بلوجر لكيفية انشاء مدونة عربية احترافية من الصفر..
موضوعنا اليوم هو عن طريقة فتح الصور والفيديو والروابط الخارجية داخل صندوق منبثق رائع لمدونات بلوجر وسنتعرف على أداة رائعة تعطى تأثير جمالى إلى المدونة وهى تشبه صندوق منبثق داخل المدونة دون خروج للزائر منها وهذا ما يقلل من نسبة الإرتداد داخل الموقع ...
في هذا الموضوع إن شاء الله سنعرف طريقة فتح الصور والفيديو والروابط الخارجية داخل صندوق منبثق رائع لمدونات بلوجر ..
طريقة فتح الصور والفيديو والروابط الخارجية داخل المدونة
داخل نفس المشاركة
داخل صندوق منبثق رائع لمدونات بلوجر
سنتعرف على أداة رائعة تعطى تأثير جمالى إلى المدونة
و هى تشبه صندوق منبثق داخل المدونة دون خروج للزائر منها
وهذا ما يقلل من نسبة الإرتداد داخل الموقع .
وأداة colorbox ليست لعرض الصور فقط بل لعرض مقاطع الفيديو وحتى مواقع خارجية
كاملة أو أدوات أون لاين كاملة داخل مدونتنا دون مغادرة الصفحة حتى.
كذلك وتتميز هذه الأداة أيضًا بالتجاوب على مختلف الشاشات الكمبيوتر والأجهزة اللوحية والهواتف الذكية أيضا.
إقرأ أيضا:
كيفية القيام بتثبيت أداة Colorbox على مدونات بلوجر
1- نذهب إلى لوحة التحكم بلوجر.
2- نختار تبويب القالب.
3- نقوم بحفظ نسخة إحتياطية من القالب.
4- نضغط Cntrl+F للبحث.
5- نبحث عن الكود التالي:
6- ننسخ الكود التالي ونقوم بإضافته فوق الكود السابق مباشرة:
7- نقوم بحفظ القالب.
ملاحظات هامة:
أولا:
إبحث عن الكود باللون الأحمر
https://ajax.googleapis.com/
إذا وجدته بالقالب قم بحذفه (حذف السطر الأحمر كليتا) من الكود السابق
ثانيا:
يجب أن نتأكد من تعطيل خاصية Lightbox الموجودة فى منصة بلوجر لتجنب فتح الصورة مرتان :
وذلك بالذهاب إلى لوحة تحكم بلوجر ثم إختيار الإعدادات ثم مشاركات وتعليقات
ثم إختيار "لا" بجوار "عرض الصور فى العرض المبسط" كما هو موضح بالصورة التالية:
تفعيل أداة Colorbox
والآن نتجه لتفعيل الأداة على الصور والفيديو والروابط الخارجية بالمشاركة
أولا: تفعيل أداة Colorbox على الصور
إن إضافة Colorbox تعمل تلقائيا على جميع الصور لاتحتاج لتثبيت
لاكن في حالة أردت عرض الصور كشرائح Slideshow قم بتحميل الصور التي تريد عرضها
كشرائح بمشاركتك ثم إذهب إلى تحرير HTML
وابحث عن رابط الصور وأضف الوسم
rel="slideshow"
بين a و href
كما بالمثال:
<a rel="slideshow" href="رابط الصورة الأولى " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="رابط الصورة الأولى مصغرة" width="290" /></a></div>
<a rel="slideshow" href="رابط الصورة الثانية" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="رابط الصورة الثانية مصغرة" /></a></div>
.
.
وهكذا
طبعا روابط الصور بالأزرق لاتغيرها أتركها كما هيا.
ثانيًا: تفعيل أداة Colorbox على الفيديوهات
يمكن من خلال أداة Colorbox فتح الفيديو داخل صندوق بنفس المشاركة دون مغادرة الصفحة بطريقة جيدة
وبكل سهولة .
بعد وضع صورة او نص يشير للزائر عن وجود فيديو بداخل المشاركة
مثلا نضيف صورة أو عبارة "إضغط هنا لمشاهدة الفيديو"..الخ ثم نذهب لليوتيوب
ونأخذ رابط التضمين لوحده دون بقية الكود وننشىء له هنا إرتباط مع النص إضغط هنا مثلا
ثم نفتح تحرير HTML
نضيف هذه المرة باللون الأحمر
class="youtube"
بين a و href
الخاصين برابط الفيديو كما يلي:
<a class="youtube" href="رابط تضمين فيديو لليوتيوب" rel="nofollow"> إضغط هنا لمشاهدة هذا الفيديو <br /></a>
شاهد المثال التالي:
ملاحظة هامة:
اذا كان الفيديو من موقع vimeo نضيف
class="vimeo"
بين a و href
ثالثُا: تفعيل أداة Colorbox على الروابط الخارجية iframe
تعتبر أداة Colorbox من الطرق النستخدمة لعدم الإرتداد من الموقع فى حالة وجود روابط خارجية هامة
فبدلا من أن يترك الزائر الموقع ليذهب لرابط تحميل أو معاينة أو إستغلال أي موقع آخر يمكننا بسهولة
الإحتفاظ به هنا عندنا وإحضار الموقع أو الخاصية له بتقنية الiframe المنبثقة كما وتوجد أخرى غير منبثقة
تفتح ضمن إطار ضمن صفحتك وتصلح للأدوات لأن الزائر سيطول مكوثه عندنا لاكن colorbox أو النوافذ المنبثقة
لايحتاجها للزائر طويلا فتصلح للمعاينات التحميل.. الخ
وبالتالى يقضى الزائر فى الصفحة أطول فترة ممكنة بالموقع...
ولتفعيل هذه الخاصية نتبع التالي:
نقوم بإضافة النص أو الصورة مع ربطها بالرابط الخارجى كما بالسابق داخل المشاركة.
ثم نتوجه توجه إلى تحرير HTML
و البحث عن سطر الكود الخاص بالرابط الخارجى.
نضيف هذه المرة باللون الأحمر
class="iframe"
بين a و href
الخاصين برابط الفيديو كما يلي:
<a class="iframe" href="https://ar.wikipedia.org/wiki/" rel="nofollow">إضغط هنا لمعاينة ويكيبيديا</a>
شاهد المثال التالي:
مميزات أخرى لأداة Colorbox
يمكننا إستخدام هذه الأداة الرائعة فى العديد من المهام
= فيمكننا إستخدامها فى فتح الكتب الإلكترونية PDF مثلا
= كذلك يمكننا إستخدامها مع ملفات الفلاش
لتجنب صعوبة تحميل وفتح الصفحات التى بها الفلاش).
= يمكننا أيضًا إستخدامها مع نماذج الإتصال.
= ولعرض أدوات المشاركة على المواقع الإجتماعية
إلخ.
تخصيص أكثر لأداة Colorbox
إذا كنت ممن يريدون تخصيصا أكثر لهذه للأداة
و تغيير التأثيرات لعرض الصندوق المنبثق
يمكنك ذلك بتحميل الإضافة من موقعها الرسمى
والتعديل عليها ورفعها على إستضافتك الخاصة.
رابط المرجع المعتمد لإنشاء هذه المقالة