اضافة زر المشاهدة في نافذة منبثقة لمدونات بلوجر
اليكم اضافة اكثر من رائعة لوضع زر المشاهدة و عند الضغط عليه تنبثق نافذة تحتوي على الفيلم المراد مشاهدته بشكل اكثر من رائع
اضافة زر المشاهدة في نافذة منبثقة لمدونات بلوجر |
كما ان الاضافة تحتوي على اكثر من شكل سيتم شرحه ،و اليكم طريقة تركيبها
اولا ابحث عن الوسم </head> و ضع الكود التالي فوقه
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/><script src='http://www.jacklmoore.com/colorbox/jquery.colorbox.js' type='text/javascript'/><link href='http://www.jacklmoore.com/colorbox/example1/colorbox.css' media='screen' rel='stylesheet' type='text/css'/><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});$(".soundcloud").colorbox({width:"70%", height:"300", iframe:true}); $('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});$('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420});});</script>
ثانيا عند تحرير الموضوع اذهب الى html و قم باضافة الكود التالي مع تغيير اللازم
<div style="text-align: center;">
<a class="youtube cboxElement" href="رابط embed الفيلم" title="الوصف او عنوان الفيلم">
<img src="http://thepresleyclub.com/wp-content/uploads/2016/06/watch-now-button.png" height="60" width="200" /></a>
</div>
التعديلات
1- رابط embed الفيلم معروف فقط قم باخذه من شيفرة الفيلم كما يلي
شيفرة الفيلم
<iframe src="https://openload.co/embed/-7URHO3VOg0/" scrolling="no" frameborder="0" width="1000" height="500" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
ناخذ فقط الرابط
https://openload.co/embed/-7URHO3VOg0/
2- يمكنك تغيير شكل الزر عن طريق تغيير الرابط التالي
http://thepresleyclub.com/wp-content/uploads/2016/06/watch-now-button.png
3- يمكنك تغيير شكل النافذة عبر تغيير الرقم 1 الى 2 او 3 او … في داخل القالب
http://jacklmoore.com/colorbox/example<span style="background-color: #ffffff;"><strong>1</strong></span>/colorbox.css
4- الباقي سهل مثلا اكتب الوصف او عنوان الفيلم و حجم الزر 60*200 ..
مدير الموقع :Sory Mohajer
⚡ تابع معنا أهم أخبار التقنية و مراجعة أهم هاتف و حاسوب متوفر وتعلم سيو الموقع https://www.exe-apk.com/موقع EXE and APK مجاني 100%
رسائل أحدث
رسائل أحدث
رسائل أقدم
رسائل أقدم
تعليقات