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

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

معاينة الإضافة إضغط هنا

شرح تركيب الإضافة :

أولا من لوحة تحكم القالب ثم غلي قسم القالب وبالضغط علي HTML.
بعد هذا قم بالبحث في القالب عن هذا الوسم </head>
وقم بوضع الاكواد الاتية فوقه.

<style type='text/css'>
/*Pop Up Responsive*/
.container{margin:100px auto}
.btnnya{background-color:#039be5;border:0;border-radius:2px;box-shadow:none;color:white!important;;cursor:pointer;display:inline-block;font:500 14px/20px Roboto,sans-serif;margin:0;min-width:36px;outline:0;overflow:hidden;padding:8px;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;transition:background-color .2s,box-shadow .2s;vertical-align:middle;white-space:nowrap;padding:7px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.btnnya.yt{background-color:red}
.wmBox_overlay{position:fixed;width:100%;height:100%;display:none;top:0;left:0;background:rgba(0,0,0,0.5);z-index:999}
.wmBox_centerWrap{display:table;position:absolute;width:100%;height:100%}
.wmBox_centerer{display:table-cell;vertical-align:middle}
.wmBox_centerer iframe{width:95%;display:table;margin:0 auto;position:relative}
.wmBox_contentWrap{width:50%;margin:0 auto;position:relative}
.wmBox_scaleWrap{position:relative;height:0;padding-top:20px;padding-bottom:56.25%;width:100%}
.wmBox_centerer iframe{position:absolute;top:0;border:0;outline:0;box-shadow:0 0 10px rgba(0,0,0,0.5);left:0;width:100%;height:100%;padding:12px;background:black;border-radius:12px}
.wmBox_closeBtn{z-index:2;position:relative;margin-top:-40px}
.wmBox_closeBtn p{line-height:0;margin:0;padding:0.5em 0 0.75em;color:#FFF;background:#000;width:1.3em;font-size:25px;border-radius:100%;text-align:center;font-family:Verdana,serif;position:relative;bottom:-0.5em;right:-1.5em;cursor:pointer;float:right;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:color 0.2s ease-out,background 0.2s ease-out}
.wmBox_closeBtn p:hover{background:#FFF;color:#000}
</style>

كذلك قم بالبحث في القالب عن هذا الوسم </body>
وقم بوضع الاكواد الاتية فوقه.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$.wmBox()}),function(o){o.wmBox=function(){o("body").prepend('<div class="wmBox_overlay"><div class="wmBox_centerWrap"><div class="wmBox_centerer">')},o("[data-popup]").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeIn(750);var a=o(this).attr("data-popup");o(".wmBox_overlay .wmBox_centerer").html('<div class="wmBox_contentWrap"><div class="wmBox_scaleWrap"><div class="wmBox_closeBtn"><p>x</p></div><iframe src="'+a+'">'),o(".wmBox_overlay iframe").click(function(o){o.stopPropagation()}),o(".wmBox_overlay").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeOut(750)})})}(jQuery);
//]]>
</script>