مشغل فيديوهات متعدد الاستخدامات لمدونات بلوجر - mp3 mp4 youtube vimeo كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سكربت html أكتوبر 18, 2018

مشغل فيديوهات متعدد الاستخدامات لمدونات بلوجر - mp3 mp4 youtube vimeo كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أكتوبر 18, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

معاينة

الان نشرح طريقة التركيب الاضافة

1. اولا تبحث على  او /head>
2. وضع هذا الكود فوقه مباشرة

1. الان ابحث على  وضع الكود التالي فوقه مباشرة

<script src='//cdn.plyr.io/3.4.4/plyr.js'></script><script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>

• الان احفظ القالب 
• و لاضافة فيديو او شئ اخر ضع الاكواد التالية مع التغيير بما يناسبك

<audio class="js-player" controls=""> <source src="رابط الام بي ثري" type="audio/mp3"></source></audio> <video class="js-player" controls="" playsinline="" poster="الصورة المصغرة"><source src="رابط الفيديو ام بي فور" type="video/mp4"></source></video> <div class="js-player" data-plyr-embed-id="معرف الفيديو في اليوتيوب" data-plyr-provider="youtube"></div><div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="معرف الفيديو في الفيمو"></div>

إذا اعجبتك اضافة اليوم لا تنسى الاشتراك في المدونة لكي تتوصل بكل ماهوا جديد

شريط اخبار مثبت يعرض اخر المواضيع على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق 2018 2019 اضافات بلوجر بلوجر تطوير مواقع سكربت شريط اخبار CSS html java أغسطس 23, 2018

شريط اخبار مثبت يعرض اخر المواضيع على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 23, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

الاكواد تمتاز بأخر  الاكواد البرمجية الحصرية 

معاينة

شرح التركيب

1. إبحث على 

<b:tag name='style' type='text/css'><b:if cond='data:view.isMultipleItems'>.clearfix:after,.clearfix:before,.container:after,.container:before{display:table;content:" "} .container{position:relative} @media (min-width:1200px){.container{width:1170px}} @media (min-width:992px){.container{width:970px}} @media (min-width:768px){.container{width:750px}} .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} @media (min-width:768px){.container{width:750px}} @media (min-width:992px){.container{width:970px}} @media (min-width:1200px){.container{width:1170px}}#breakingnews{background-color:#003350;bottom:0;height:50px;position:fixed;right:0;width:100%;z-index:9999} #breakingnews .title{background-color:#d60f0a;float:right;height:65px;line-height:65px;position:relative;text-align:center;top:-15px;width:4%} #breakingnews .title img{height:40px;width:40px;margin-top: 14px} #breakingnews .title::after{border-style:solid;border-width:0 0 15px 15px;border-color:transparent transparent #cc0500 transparent;_border-color:#000000 #000000 #cc0500 #000000;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');content:"";display:inline-block;height:0;left:-15px;line-height:0;position:absolute;top:0;width:0} .marquee{direction:ltr;float:right;height:50px;overflow:hidden;width:96%} #breakingnews .marquee .js-marquee ul li{direction:rtl;display:inline-block;float:right;font-size:18px;line-height:50px;margin:0 0 0 35px;padding:0 0 0 35px;position:relative} #breakingnews .marquee .js-marquee ul li::before{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc16N0XfIFNXWVchoZw3LHyVedSLg7iFHsjKk96M1RWY_tambeP7zS5p_CoVFdi78nEngKRrnAMvI9ylPpttsmdFI1EGd_p7yBUSU30-AKxG2VLN2RrDYyJX7HzTuUX-l-3eBcdAwrmqA/s1600/small-logo.png");background-size:35px 35px;content:"";display:inline-block;height:35px;left:-35px;line-height:35px;margin:0 15px;position:absolute;top:5px;width:35px} #breakingnews .marquee .js-marquee ul li a{color:#fff} #breakingnews .marquee .js-marquee ul li a:hover{color:#e01914} #breakingnews button.closebtn{background-color:#df0303;border:medium none;border-radius:3px;color:#fff;float:left;font-family:play;font-size:20px;height:30px;left:5px;line-height:30px;padding:0;position:absolute;text-align:center;top:10px;width:30px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} #breakingnews button.closebtn:hover{background-color:#d00000} </b:if></b:tag>

1. الان إبحث على  وضع الكود التالي فوقه مباشرة

تحميل الملف

• الان لتغيير الوجو الخاص بي إبحث على رابط  الصورة هذا من هنا  وغيره بصورة التي تريدها انت

الان إحفظ القالب ومبروك عليك الاضافة لاتنسى الاشتراك في المدونة لكي تتوصل بكل ما هوا جديد

اضافة رسالة ترحيبية على شكل مسنجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS html java أغسطس 22, 2018

اضافة رسالة ترحيبية على شكل مسنجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 22, 2018

0 تعليقات

شاركه غرد جوجل+

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

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير شرح اليوم على اضافة قد اضفتها من قبل على المدونة 

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

1. إبحث في القالب على  او 

<style>/* shadow sec */ .shadow{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);transition: .3s ease-out;} .shadow:hover{box-shadow: 0 14px 25px rgba(0,0,0,.16);} /*اضافة من الخبير عامر بشير*/ .ball-message{position:fixed;bottom:12px;z-index:999999999999;right:52px;margin-top:-50px;margin-left:-50px;height:100px;width:100px;border:3px solid #FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbv6g5SqgcYL4I0wMdMn8tXpZQoKRhyrFixPoVR8SGAzvy5OMdQpvlCXIQbUTDzsARgBw7PvU3fNFjzT_DT4fwYeRpqQlWq9JASl6zuCdn-zWq1sCunBxifYRnJ8n-kpoMNsBLfsLfTX4/s320/24294136_1809479985752209_1304656175277181735_n.png);background-size:contain;border-radius:1000px;transform:scale(0);transition-duration:0;transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);} .ball-message .msg-count{position:absolute;top:0;left:0;color:#FFF;border:3px solid #FFF;background:#E80202;height:25px;width:25px;border-radius:1000px;text-align:center;line-height:18px;font-size:12px;opacity:0;transform:scale(0);transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);} .ball-message .halo{position:absolute;top:18px;left:18px;right:18px;bottom:18px;border-radius:1000px;background:rgba(255,255,255,0.6);transform:scale(0)} .ball-message .notif{position:absolute;top:-50px;left:-45px;width:183px;opacity:0} .ball-message .notif .bar{position:relative;border-radius:1000px;background:#FFF;height:30px;line-height:30px;width:0;margin:0 auto;padding:0 10px;overflow:hidden} .ball-message .notif .bar .text{position:absolute;margin:0;font-size:12px;color:#555;width:175px;z-index:1} .ball-message .notif .bar .action{position:relative;z-index:2;height:20px;width:20px;background:#BABABA;float:left;margin-top:5px;border-radius:100px;box-shadow:10px 0 0 0 #FFF,-10px 0 10px 0 #FFF,inset 0 0 0 1px #FFF;border:1px solid #BABABA;} .ball-message .notif .bar .action::after{content:'';border-left:5px solid #FFF;border-top:4px solid transparent;border-bottom:4px solid transparent;display:block;margin-left:7px;margin-top:4px} .ball-message .notif .arrow{top:30px;border-top:7px solid #FFF;border-left:7px solid transparent;border-right:7px solid transparent;width:0;margin:0 auto;transform-origin:top;transform:scale(0)} .anim-start .ball-message{transform:none;transition-duration:.3s} .anim-start .ball-message .notif{opacity:1;transition-duration:.2s;transition-delay:1.6s} .anim-start .ball-message .notif .bar{width:100%;transition-duration:.6s;transition-delay:1.6s} .anim-start .ball-message .notif .arrow{transform:none;transition-delay:1.6s;transition-duration:.3s} .anim-start .ball-message .halo{opacity:0;transform:none;transition-duration:.6s;transition-delay:1.2s} .anim-start .ball-message .msg-count{opacity:1;transform:none;transition-duration:.3s;transition-delay:.6s} .autowrite{animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite} @keyframes typing{from{width:0}to{width:100%}} @keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#dedede}} </style>

1. إبحث على 

• تحميل الكود من هنا

إذا اعجبتك اضافة اليوم لا تنسى الاشتراك في المدونة لكي تتوصل بكل ما هوا جديد

إضافة اداة إقرا ايضا وسط مواضيع بشكل اكثر من إحترافي كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS html أغسطس 02, 2018

إضافة اداة إقرا ايضا وسط مواضيع بشكل اكثر من إحترافي كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 02, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

معاينة الاضافة من هنا

تركيب الاضافة 

• إبحث على 

<b:if cond='data:view.isPost'><style type='text/css'>/*RelatedPost*/ .post-related_results{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%} .post-related_results h4{background:#2b3946;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0} .post-related_results h4:before{display:none} .post-related_results ul{margin:0;padding:0} .post-related_results ul li:hover{overflow:visible} .post-related_results ul li{list-style:none;padding:1px 0;line-height:1.5em;overflow:hidden;position:relative;z-index:1;position:relative} .post-related_results a{color:#2b3946;font-size:13px} .post-related_results a:hover{color:#000;text-decoration:underline} .post-related_img{position:absolute;top:-120%;border:10px solid #2b3946;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;left:102%;z-index:99999999;color:#fff;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.2),0 2px 5px 0 rgba(0,0,0,.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.2),0 2px 5px 0 rgba(0,0,0,.2);box-shadow:0 0 5px 0 rgba(0,0,0,.2),0 2px 5px 0 rgba(0,0,0,.2);background-color:#fff;-webkit-transition:-webkit-transform .25s .1s;transition:-webkit-transform .25s .1s;-o-transition:-o-transform .25s .1s;-moz-transition:transform .25s .1s,-moz-transform .25s .1s;transition:transform .25s .1s;transition:transform .25s .1s,-webkit-transform .25s .1s,-moz-transform .25s .1s,-o-transform .25s .1s;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:translateY(-50%) scale(0);-moz-transform:translateY(-50%) scale(0);-ms-transform:translateY(-50%) scale(0);-o-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);height:125px;margin-top:43px;width:23%;opacity:0} .post-related_results ul li:hover .post-related_img{opacity:1;-webkit-transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);-o-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);right:auto;left:51%;margin-left:0;z-index:999999999999999999999999999999} .post-related_img img{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;width:100%;height:100%} .post-related_img:after{content:"";display:block;position:absolute;right:calc(-10% - 13px);top:31%;width:0;height:0;border:0 solid transparent;border-bottom-width:23px;border-top-width:20px;border-left:31px solid #2b3946} </style> </b:if>

• إبحث على 

<b:if cond='data:view.isPost'><script type='text/javascript'> /*<![CDATA[*/ var numpost =5,no_image="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4c5fbuZRWTujSbrxR6iVHXs0WjTL4SMk0jUyGfBPBfZbQaUPWtObldh8ZJRPHD0cVrqwya6odbtdCmcxxsBNXB0nYa_HEilOqXSmDw87__vrmNiSzoRH8zexTm90CWNsDaBTDVL0hrc/s1600-r/nth.png"; var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = '//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/related_post_insideposte.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript); /*]]>*/ </script> </b:if>

• الان إبحث على هذا  في بعض القوالب يوجد منه 3 مرات لذا انت جرب في كل واحد ضع الكود اتالي حتى يضه معك

<b:if cond='data:view.isPost'><div class='post-related_results'><h4>اقرأ أيضا</h4><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><div class='related_NAME'><data:label.name/></div></b:if></b:loop></b:if></div></b:if>

الان احفظ القالب و مبروك عليك الاضافة و لا تنسى الاشتراك في المدونة و القناة لكي تدعمني على تقديم المزيد

مشغل فيديوهات احترافي على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS html أبريل 29, 2018

مشغل فيديوهات احترافي على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أبريل 29, 2018

0 تعليقات

شاركه غرد جوجل+

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

السلام عليكم و مرحبا بكم في مدونة الخبير عامر بشير اليوم لدينا شرح عن اضافة ستايل لفيديوهات في بلوجر 

يمكنك معاينة الاضافة من هنا

طريقة التركيب سهلة جدا 

1. إبحث على  وضع هذا الكود فوقه مباشرة

<style>/*<![CDATA[*/ /*videojs abdoutech*/ @font-face{font-family:player;src:url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.eot);src:url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.eot?#iefix) format("embedded-opentype"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.woff) format("woff"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.ttf) format("truetype"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.svg#1480808305) format("svg");font-weight:400;font-style:normal}.video-js{max-width:100%;width:auto;max-height:100%;height:auto;position:relative}.video-js .vjs-tech{width:100%;height:100%;display:block}.video-js button,[class*=button]{border:0;background:0 0;outline:0;padding:0;margin:0;display:inline-block;line-height:0;cursor:pointer}.video-js button:before,[class*=button]:before{font-family:player!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:30px;vertical-align:middle;color:#fff;position:relative;top:2px}.video-js.vjs-controls-disabled .vjs-control-bar,.vjs-control-text,.vjs-has-started .vjs-big-play-button,.vjs-hidden,.vjs-remaining-time{display:none}.video-js .vjs-big-play-button:before,.video-js .vjs-play-control:before{content:"\64"}.video-js .vjs-play-control.vjs-playing:before{content:"\6e"}.video-js .vjs-vol-0:before,.video-js .vjs-vol-1:before{content:"\61"}.video-js .vjs-vol-2:before{content:"\62"}.video-js .vjs-vol-3:before{content:"\63"}.video-js .vjs-fullscreen-control:before,.video-js .vjs-icon-fullscreen-enter:before{content:"\6c"}.video-js .vjs-icon-fullscreen-exit:before,.video-js.vjs-fullscreen .vjs-fullscreen-control:before{content:"\6d"}.video-js .vjs-big-play-button{position:absolute;top:50%;left:50%;opacity:.8;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.video-js .vjs-big-play-button:before{font-size:10em}.video-js .vjs-big-play-button:hover{opacity:1}.video-js .vjs-control-bar{background:#252428;padding:1em;display:flex;justify-content:flex-start;align-items:center;position:relative}.video-js .vjs-control{padding:0 1em}.vjs-volume-menu-button .vjs-menu-content{display:block;width:5em;height:2px}.vjs-volume-menu-button{display:flex;justify-content:flex-start;align-items:center}.video-js .vjs-slider{background:rgba(255,255,255,.2);width:100%;height:100%}.video-js .vjs-volume-level,.vjs-play-progress.vjs-slider-bar{background:#00cfe8;height:100%;position:relative;cursor:pointer}.video-js .vjs-volume-level:before,.vjs-play-progress.vjs-slider-bar:before{content:"";position:absolute;right:-8px;width:12px;height:12px;background:#00cfe8;top:-5px;border-radius:50%;box-shadow:0 0 2px 2px rgba(0,207,232,.35);z-index:10;-webkit-transform:scale(.8);transform:scale(.8);-webkit-transition:transform .3s;transition:transform .3s}.video-js .vjs-volume-level:hover:before,.vjs-play-progress.vjs-slider-bar:hover:before{-webkit-transform:scale(1);transform:scale(1)}.vjs-volume-menu-button .vjs-menu{padding:.85em 0 .85em 1em;margin:auto;height:30px}.video-js .vjs-control.vjs-time-control,.vjs-time-control.vjs-time-divider{font-weight:700;color:#fff}.video-js .vjs-progress-control{position:absolute;top:0;width:100%;height:2px;left:0;padding:0}.video-js .vjs-load-progress{background:rgba(255,255,255,.75);height:100%;position:absolute}.video-js .vjs-play-progress.vjs-slider-bar:before{display:none}.vjs-has-started .vjs-play-progress.vjs-slider-bar:before{display:block}.video-js.vjs-user-active .vjs-play-progress.vjs-slider-bar:before{-webkit-transform:scale(1);transform:scale(1)}.video-js.vjs-user-inactive .vjs-play-progress.vjs-slider-bar:before{-webkit-transform:scale(0);transform:scale(0)}.video-js .vjs-fullscreen-control{margin-left:auto}.video-js.vjs-fullscreen{width:100%!important;height:100%!important}.video-js.fluid .vjs-control-bar,.video-js.vjs-fullscreen .vjs-control-bar{position:absolute;bottom:0;transition:opacity .3s;width:100%}.video-js.fluid.vjs-user-active .vjs-control-bar,.video-js.vjs-fullscreen.vjs-user-active .vjs-control-bar{opacity:.9}.video-js.fluid.vjs-user-inactive .vjs-control-bar,.video-js.vjs-fullscreen.vjs-user-inactive .vjs-control-bar{opacity:0}@-webkit-keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;opacity:.85;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:60px;height:60px}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block}.vjs-loading-spinner:after{content:'';border-radius:50%;animation:spinner .6s linear infinite;-webkit-animation:spinner .5s linear infinite;position:absolute;border-width:8px;border-style:solid;border-color:transparent #fff #fff transparent;width:100%;height:100%}@media only screen and (max-width:800px){.vjs-volume-menu-button .vjs-menu{display:none}.video-js .vjs-control{padding:0 .5em}.video-js .vjs-progress-control{padding:0}}@media only screen and (max-width:540px){.video-js .vjs-control-bar{padding:.5em 0}.video-js .vjs-big-play-button:before{font-size:5em}.video-js button:before,[class*=button]:before{font-size:25px}} /*]]>*/ </style>

1. الان ابحث على  وضع هذا فوقه

<script src="//vjs.zencdn.net/5.8.8/video.min.js"></script>

• الان احفظ القالب و في كل تدوينة تريد اضافة فيها فيديو تضع هذا الكود

<video class='video-js' data-setup='{"controls": true}' id='vid1' poster='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1cFw0X8Gud25857r5o141WR_mnYfjPCOV0PiRyhHnOgqT-ee0UVrVq64SvmZXvzKmTp5inZerV5ePA8DmBQnuzW3G4N5BKr6zQpcbLqJ-3s5_SSHCJprGCc6AXYrc3_UE2zDjlwmY4eI/s1600/3.jpg' preload='auto'><source src='https://www.gulf-up.com/04-2018/1524931369181.mp4' type='video/mp4'></source></video>

• مع تغيير الصورة المصغرة التي تنتهي ب jpg
• و تغيير رابط الفيديو طبعى

اذا اعجبتك اضافة اليوم لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد في بلوجر