طريقة فتح الصور والفيديو والروابط الخارجية داخل صندوق منبثق رائع لمدونات بلوجر

مرحبا بكم أصدقائي الكرام في موضوع جديد من دورة بلوجر لكيفية  انشاء مدونة عربية احترافية من الصفر.. 

موضوعنا اليوم هو عن طريقة فتح الصور والفيديو والروابط الخارجية داخل صندوق منبثق رائع لمدونات بلوجر وسنتعرف على أداة رائعة تعطى تأثير جمالى إلى المدونة وهى تشبه صندوق منبثق داخل المدونة دون خروج للزائر منها وهذا ما يقلل من نسبة الإرتداد داخل الموقع ...

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

طريقة فتح الصور والفيديو والروابط الخارجية داخل المدونة

داخل نفس المشاركة

داخل صندوق منبثق رائع لمدونات بلوجر

سنتعرف على أداة رائعة تعطى تأثير جمالى إلى المدونة

 و هى تشبه صندوق منبثق داخل المدونة دون خروج للزائر منها

وهذا ما يقلل من نسبة الإرتداد داخل الموقع .

وأداة colorbox ليست لعرض الصور فقط بل لعرض مقاطع الفيديو وحتى مواقع خارجية

كاملة أو أدوات أون لاين كاملة داخل مدونتنا دون مغادرة الصفحة حتى.

كذلك وتتميز هذه الأداة أيضًا بالتجاوب على مختلف الشاشات الكمبيوتر والأجهزة اللوحية والهواتف الذكية أيضا.

إقرأ أيضا:

 طريقة إظافة خاصية التلميح على الأيقونات لبلوجر

طريقة إظافة الآلات الحاسبة إلى مدونات بلوجر / إظافات بلوجر

كيفية إظافة فيديو يوتيوب متجاوب باحترافية داخل مشاركات بلوجر

طريقة إظافة الصور لمدونة بلوجر بالطريقة الصحيحة للسيو وبصيغة webp 

طريقة وضع مربع وضع الأكواد في بلوجر

 اظافة صور متحركة لمدونة بلوجر

كيفية إظافة مواقيت الصلاة لمدونتك على بلوجر

كيفية القيام بتثبيت أداة Colorbox على مدونات بلوجر

1- نذهب إلى لوحة التحكم بلوجر.

2- نختار تبويب القالب.

 3-  نقوم بحفظ نسخة إحتياطية من القالب.

4- نضغط Cntrl+F للبحث.

5- نبحث عن الكود التالي:

</head> 

  

6- ننسخ الكود التالي ونقوم بإضافته فوق الكود السابق مباشرة:

<link href='https://cdn.rawgit.com/DrRO/colorbox/master/example1/colorbox.css' rel='stylesheet'/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script src='https://cdn.rawgit.com/DrRO/colorbox/master/jquery.colorbox.js'/> <script type="text/javascript"> // Make ColorBox responsive jQuery.colorbox.settings.maxWidth = '95%'; jQuery.colorbox.settings.maxHeight = '95%'; // ColorBox resize function var resizeTimer; function resizeColorBox() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { if (jQuery('#cboxOverlay').is(':visible')) { jQuery.colorbox.load(true); } }, 300); } // Resize ColorBox when resizing window or changing mobile device orientation jQuery(window).resize(resizeColorBox); window.addEventListener("orientationchange", resizeColorBox, false); </script> <script> $(document).ready(function(){ $("a[rel='images']").colorbox({transition:"fade"}); $("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='slideshow']").colorbox({slideshow:true}); $(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520}); $(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520}); $(".iframe").colorbox({width:"80%", height:"80%", iframe:true}); $('a[href$=jpg]').colorbox(); $('a[href$=jpeg]').colorbox(); $('a[href$=png]').colorbox(); $('a[href$=gif]').colorbox(); $('a[href$=bmp]').colorbox(); $('a[href$=JPG]').colorbox(); $('a[href$=JPEG]').colorbox(); $('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520}); $('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420}); }); </script>  

  

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

إذا كنت ممن يريدون تخصيصا أكثر لهذه للأداة

 و تغيير التأثيرات لعرض الصندوق المنبثق

 يمكنك ذلك بتحميل الإضافة من موقعها الرسمى 

  Colorbox   

والتعديل عليها ورفعها على إستضافتك الخاصة.

رابط المرجع المعتمد لإنشاء هذه المقالة

 conda3ianllkhir 

القسم>

إظافات بلوجر softpudia: طريقة فتح الصور والفيديو والروابط الخارجية داخل صندوق منبثق رائع لمدونات بلوجر طريقة فتح الصور والفيديو والروابط الخارجية داخل صندوق منبثق رائع لمدونات بلوجر

مشاركة [ line tumblr t ]