web hit counterاضافة زر المشاهدة في نافذة منبثقة لمدونات بلوجر » موقعي.كوم

موقعي.كوم

Menu

معاينة الاضافة اضافة زر المشاهدة في نافذة منبثقة لمدونات بلوجر

متابعي موقعي.كوم اليكم اضافة اكثر من رائعة لوضع زر المشاهدة و عند الضغط عليه تنبثق نافذة تحتوي على الفيلم المراد مشاهدته بشكل اكثر من رائع كما ان الاضافة تحتوي على اكثر من شكل سيتم شرحه ، يمكنك معاينة الاضافة من الزر الازرق في الفوق و اليكم طريقة تركيبها

 

اولا ابحث عن الوسم </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(){
$(&quot;a[rel=&#39;images&#39;]&quot;).colorbox({transition:&quot;fade&quot;});
$(&quot;a[rel=&#39;imagessamesize&#39;]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;75%&quot;, height:&quot;75%&quot;});
$(&quot;a[rel=&#39;slideshow&#39;]&quot;).colorbox({slideshow:true});
$(&quot;.youtube&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&quot;.vimeo&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&quot;.iframe&quot;).colorbox({width:&quot;80%&quot;, height:&quot;80%&quot;, iframe:true});
$(&quot;.soundcloud&quot;).colorbox({width:&quot;70%&quot;, height:&quot;300&quot;, iframe:true});  
$(&#39;a[href$=pdf]&#39;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&#39;a[href$=swf]&#39;) .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/example1/colorbox.css

4- الباقي سهل مثلا اكتب الوصف او عنوان الفيلم و حجم الزر 60*200 ..

 

القسم :   بلوجر