راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

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



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

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



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





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


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








hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان