close

أخر الاخبار

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

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

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

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


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

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

داخل نفس المشاركة
داخل صندوق منبثق رائع لمدونات بلوجر

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

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

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

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

1- نذهب إلى لوحة التحكم بلوجر.
2- نختار تبويب القالب.
 3-  نقوم بحفظ نسخة إحتياطية من القالب.
4- نضغط Cntrl+F للبحث.
5- نبحث عن الكود التالي:
 
  

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

7- نقوم بحفظ القالب.


ملاحظات هامة:

أولا:

إبحث عن الكود باللون الأحمر
https://ajax.googleapis.com/
إذا وجدته بالقالب قم بحذفه (حذف السطر الأحمر كليتا) من الكود السابق

ثانيا:

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

Disable the Lightbox feature on the Blogger platform


 تفعيل أداة 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   

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


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



أرجوا ان ينال هذا الدرس افادتكم  وانتظرونا في المزيد من الدروس المفيدة في كيفية إنشاء مدونة بلوجر  عربية واحترافية , لاتنسوا مشاركة الموضوع مع أصدقائكم.. بالتوفيق للجميع..

إلى هنا نكمل هذا الدرس.. تقبلو تحياتي.
والسلام عليكم ورحمة الله تعالى وبركاته
اللهم صلي وسلم على نبينا محمد
(صلى الله عليه وسلم)


إذا أعجبك الموضوع يمكنك مشاهدة مواضيع أو دروس أخرى بقسم بلوجر لاتقل أهمية إضغط هنا للإنتقال لقسم بلوجر.

ليصلك جديدنا تابعنا على صفحاتنا الاجتماعية: الفيسبوكالتويتر ,tumblrpinterestlinkedininstagram
 

الحصول على رابط هذا الموضوع

رابط:
رابط الموضوع بكود html:
رابط الموضوع للمنتديات:

مواضيع أخرى قد تهمك



تعليقات
ليست هناك تعليقات
إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -