مدونة هلا تك

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

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

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

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

ادخل الى لوحة تحكم بلوجر وابحث عن /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 = '95%';
jQuery.colorbox.settings.maxHeight = '95%';
// ColorBox resize function
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.load(true);
}
}, 300);
}
// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
</script>
<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});
$('a[href$=jpg]').colorbox();
$('a[href$=jpeg]').colorbox();
$('a[href$=png]').colorbox();
$('a[href$=gif]').colorbox();
$('a[href$=bmp]').colorbox();
$('a[href$=JPG]').colorbox();
$('a[href$=JPEG]').colorbox();
$('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});
$('a[href$=swf]') .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">

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

و شكرا

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع اضافة فيديو مقترح منبثق لمدونات البلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.