اضافة فيديو مقترح منبثق لمدونات البلوجر

شرح تركيب فيديو مقترح منبثق لمدونات البلوجر

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

شرح تركيب الاضافة على القالب بالفيديو

تركيب الاضافة و الاكواد الخاصة بها

ادخل الى لوحة تحكم بلوجر وابحث عن /head
ثم ضع الكود التالي فوقه :

<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  = &#39;95%&#39;;
 jQuery.colorbox.settings.maxHeight = &#39;95%&#39;;
 // ColorBox resize function
 var resizeTimer;
 function resizeColorBox()
 {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery(&#39;#cboxOverlay&#39;).is(&#39;:visible&#39;)) {
      jQuery.colorbox.load(true);
    }
  }, 300);
 }
 // Resize ColorBox when resizing window or changing mobile device orientation
 jQuery(window).resize(resizeColorBox);
 window.addEventListener(&quot;orientationchange&quot;, resizeColorBox, false);
</script>
<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});
$(&#39;a[href$=jpg]&#39;).colorbox();
$(&#39;a[href$=jpeg]&#39;).colorbox();
$(&#39;a[href$=png]&#39;).colorbox();
$(&#39;a[href$=gif]&#39;).colorbox();
$(&#39;a[href$=bmp]&#39;).colorbox();
$(&#39;a[href$=JPG]&#39;).colorbox();
$(&#39;a[href$=JPEG]&#39;).colorbox();
$(&#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>

إذهب إلى التخطيط و قم
بإضافة أداة جديدة javascript /html
و أحفظها بدون أسم بعد وضع الكود بداخلها

<name="txt" rows="100" wrap="VIRTUAL" cols="55">
<b:if cond="data:blog.pageType == "item"">
<style type="text/css">
#mahir-wrap .mahir-button { background: #ca0900 url("https://4.top4top.net/p_1406h7csz1.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height:70px; left: 40px; position: fixed; width:70px; z-index: 99999; }
#mahir-wrap .mahir-button:hover { background-color: #8c0000; }
#mahir-wrap .mahir-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0px; bottom: 50px; right: 0;  transition: opacity .25s ease; z-index: 999999; }
#mahir-wrap .mahir-bg-close { position: absolute; top: 0; left: 0; bottom: 0; right: 0; cursor: pointer; }
#mahir-wrap .mahir-trigger { display: none; }
#mahir-wrap .mahir-trigger:checked + .mahir-bg { opacity: 1; visibility: visible; }
#mahir-wrap .mahir-trigger:checked + .mahir-bg .mahir-form { top: 0; }
#mahir-wrap .mahir-form { transition: top .25s ease; position: absolute; top: -20%; left: 0; bottom: 0; right: 0; max-width: 300px; margin: auto; padding: 0.5em; max-height: 223px; background: #ca0900; text-align: center; }


#mahir-wrap .mahir-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 26px; }
#mahir-wrap .mahir-content { font-size: 16px; line-height: 26px; }
#mahir-wrap .mahir-footer { font-size: 75%; font-style: italic; }
#mahir-wrap .mahir-form-close { position: absolute; left: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#mahir-wrap .mahir-form-close:after,
#mahir-wrap .mahir-form-close:before { content: ''; position: absolute; width: 5px; height: 1.1em; background: #400300; display: block; transform: rotate(45deg); right: 50%; margin: -9px 0 0 -1px; top: 0; }
#mahir-wrap .mahir-form-close:hover:after,
#mahir-wrap .mahir-form-close:hover:before { background: #CC7000; }
#mahir-wrap .mahir-form-close:before { transform: rotate(-45deg); }
</style>
<div id="mahir-wrap">
<label class='mahir-button' for='mahir-trigger'></label>
<input class='mahir-trigger' id='mahir-trigger' type='checkbox'/>
<div class='mahir-bg'>
<label class='mahir-bg-close' for='mahir-trigger' id='mahir-close'></label>
<div class='mahir-form'>
<label class='mahir-form-close' for='mahir-trigger' id='mahir-close'></label>
<div class='mahir-inner'>
<span class="mahir-title"></span>
<a  class="youtube"  href="https://www.youtube.com/embed/AXLGhVKn65c">
<img src="https://3.top4top.net/p_14061t0cw1.png " /></a>
</div>
</div>
</div>
</div>
</b:if></name="txt">

قم بتغير اللذي بالود الاحمر بالرمز الخاص بالفيديو اللذي تريده

و شكرا

تحرير المقال