JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
recent
عاجل
الصفحة الرئيسية

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


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

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



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





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


ادخل الى لوحة تحكم بلوجر وابحث عن /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: -8px; }
#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">




و شكرا



author-img

maher

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