مشغل فيديوهات متعدد الاستخدامات لمدونات بلوجر - 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
• و تغيير رابط الفيديو طبعى

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

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر محرك بحث CSS html java مارس 06, 2018

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

Admin Amer

مارس 06, 2018

0 تعليقات

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

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

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

1. ابحث على  وضع هذا الكود اسفله

<div class='seacgoom'><div class='inputpoint'><form class='machine' id='search'><div class='input'><input class='search' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='search' value='إبحث...'/><button class='submit fa fa-search' type='submit' value=''/></div><button class='fa fa-times' id='close' type='reset' value=''/></form></div><div class='search-content'><div class='search-result' id='scroll-hide'><div class='inner'><span/></div></div><div class='query-result'>تحميل المزيد</div></div></div>

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

<style>/* Search ajax */ #search .input,#search .input .search{height:40px;transition:all .3s ease-out} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none} .seacgoom{position:fixed;overflow:auto;top:15%;right:20%;left:20%;bottom:10%;max-width:879px;margin:auto;background:rgba(0, 0, 0, 0.92);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s} .seacgoom.active{opacity:1;visibility:visible;margin:auto;transform:scale(1)} .seacgoom .inputpoint{background:rgb(1, 64, 152);margin:0 auto 15px;padding:10px 0} .seacgoom .machine{width:90%;margin:auto;padding:10px 0;outline:0;display:block} #search .input{background:rgba(255,255,255,1);width:100%;margin:30px auto;padding:0 20px 0 0;max-width:1000px} #search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9} #search #close,#search .input .search,#search .input .submit{padding:0;margin:0;border:0;outline:0} #search #close,.query-result{border-radius:5px;text-align:center;cursor:pointer} #search .input .search{float:right;width:calc(100% - 140px);background:0;font-size:16px;color:rgba(0,0,0,.4);line-height:40px} #search .input .submit{display:inline-block;float:left;cursor:pointer;width:14%;height:40.7px;background:#0045a6;font-size:14px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;transition:all .3s ease-out} #search .input .search:active,#search .input .search:hover,font-awesome.min.css:4 #search .input .search:focus{color:rgba(0,0,0,.8)} #search .input .submit:focus,#search .input .submit:hover{background:#0b408a;color:rgba(255,255,255,1)} #search #close{position:absolute;top:10px;left:10px;width:32px;font-size:30px;height:32px;font-weight:200;font-family:fontawesome;background:0;color:rgba(0,0,0,.3);line-height:32px;transition:all .3s} .queryword,.sidebar h2{font-weight:700} #search #close:hover{color:rgba(0,0,0,.6)} .search-content{z-index:6;display:none;position:relative} .seacgoom .search:focus{outline:0} .search-result{padding:0 20px;margin:0 auto 15px} .search-result .search-item{overflow:auto;padding:10px 0;border-bottom:1px solid #eee} .search-result .search-item:last-child{border-bottom:0} .search-item img{width:120px;height:85px;float:right;background:#fdfdfd} .search-item a{width:calc(100% - 150px);float:left;display:block;color:#014098;text-decoration:none;padding:10px 0;font-size:24px;line-height:30px} .search-item a:hover,.search-item:hover a{color:#014098} .query-result{display:none;background:#014098;color:#fff;padding:12px;margin:20px auto 40px;font-weight:500;text-transform:uppercase;line-height:normal;font-size:80%;max-width:90px;transition:all .3s ease-out} .query-result:hover{background:#bb4d23;color:#fff;border-color:transparent} .query-result a{text-decoration:none;color:#3bbb8e} .query-result a:hover,.query-result:hover a{color:#fff} .searchbutton{margin-top: 0.4%;text-align:center;float:left;padding-right:10px;padding-left:10px;font-size:20px;cursor:pointer} .searchbutton i.fa{color:#fff} </style>

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

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

<div class="searchbutton" title="بحث"><i aria-hidden="true" class="fa fa-search"></i></div>


ملاحظة: لتحكم بشكل زر المحرك فكود الستايل المسوول عنه هوا .searchbutton  و لتحكم ب الايقونة فبهذا .searchbutton i.fa


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

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر تلميحات CSS html يناير 18, 2018

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

Admin Amer

يناير 18, 2018

0 تعليقات

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

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

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

معاينة

الان نتجه الى الشرح

1. بعد فتح تحرير html في بلوجر
2. تبحث على 
3. و تضع هذا الكود فوقه مباشرة

<link href='http://rawgit.com/abdelalilebbihi/techabdou/master/master/css/tooltip.css' rel='stylesheet'/>

و الان نتجه الى جزء اضهار الاضافة 

<span class="tooltip tooltip-effect-1"><span class="tooltip-item">هنا الكلمة المسطر عليها</span><span class="tooltip-content clearfix"><img src="هنا صورة"/><span class="tooltip-text"><strong>هنا الكلمة المسطر عليها</strong> هنا وصف الكلمة المسطر عليها <a target="_blank" href="هنا تضع رابط يخص الكلمة المسطر عليها">هنا عنوان الرابط الذي تضعه</a></span></span></span>

1. الان اذا اردت تغيير طريقة ضهور التلميحة ما عليك سوى tooltip-effect-1 الى tooltip-effect-2 او tooltip-effect-3 او tooltip-effect-4
2. مثال  الى 

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

كود هذا هوا 

<span class="tooltip tooltip-effect-5"><span class="tooltip-item">كلمة مسطر عليها</span><span class="tooltip-content clearfix"><span class="tooltip-text"><strong>كلمة مسطر عليها</strong>وضف للكلمة مسطر عليها <a href="رابط كلمة مسطر عليها">كلمة مسطر عليها</a></span></span></span>


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