أضافة تأثير تحميل المدونة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS ديسمبر 15, 2017

أضافة تأثير تحميل المدونة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

ديسمبر 15, 2017

0 تعليقات

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

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

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

1. أضافة تأثير تحميل المدونة على شكل باخرة في البحر (عمل Loader انتظار تحميل الصفحة)
2. أضافة تأثير تحميل المدونة على شكل بطارية (عمل Loader انتظار تحميل الصفحة)
3. أضافة تأثير تحميل المدونة على شكل سبنر (عمل Loader انتظار تحميل الصفحة)
4. أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة)
5. أضافة تأثير تحميل المدونة على شكل بلايستيشن 4 ps4 (عمل Loader انتظار تحميل الصفحة)

الان إبحث على  وضع هذا الكود فوقه

<script> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script> <style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background:#030303; width: 100%; height: 100%; } svg { display: none; } .blobs { -webkit-filter: url(#goo); filter: url(#goo); width: 300px; height: 300px; position: relative; overflow: hidden; border-radius: 70px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; text-align: center; margin-right: 39%; margin-top: 15%; } .blobs .blob-center { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; background: #FFF200; top: 50%; left: 50%; width: 30px; height: 30px; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); -webkit-animation: blob-grow linear 3.4s infinite; animation: blob-grow linear 3.4s infinite; border-radius: 50%; box-shadow: 0 -10px 40px -5px #FFF200; } .blob { position: absolute; background: #FFF200; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; -webkit-animation: blobs ease-out 3.4s infinite; animation: blobs ease-out 3.4s infinite; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); -webkit-transform-origin: center top; transform-origin: center top; opacity: 0; } .blob:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .blob:nth-child(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .blob:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .blob:nth-child(4) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .blob:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes blobs { 0% { opacity: 0; -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%); transform: scale(0) translate(calc(-330px - 50%), -50%); } 1% { opacity: 1; } 35%,65% { opacity: 1; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); } 99% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(0) translate(calc(330px - 50%), -50%); transform: scale(0) translate(calc(330px - 50%), -50%); } } @keyframes blobs { 0% { opacity: 0; -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%); transform: scale(0) translate(calc(-330px - 50%), -50%); } 1% { opacity: 1; } 35%,65% { opacity: 1; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); } 99% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(0) translate(calc(330px - 50%), -50%); transform: scale(0) translate(calc(330px - 50%), -50%); } } @-webkit-keyframes blob-grow { 0%, 39% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } 40%, 42% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 43%, 44% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 45%, 46% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 47%, 48% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 52% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 54% { -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%); transform: scale(1.7, 1.6) translate(-50%, -50%); } 58% { -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%); transform: scale(1.8, 1.7) translate(-50%, -50%); } 68%, 70% { -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%); transform: scale(1.7, 1.5) translate(-50%, -50%); } 78% { -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%); transform: scale(1.6, 1.4) translate(-50%, -50%); } 80%, 81% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 82%, 83% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 84%, 85% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 86%, 87% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 90%, 91% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 92%, 100% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } } @keyframes blob-grow { 0%, 39% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } 40%, 42% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 43%, 44% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 45%, 46% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 47%, 48% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 52% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 54% { -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%); transform: scale(1.7, 1.6) translate(-50%, -50%); } 58% { -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%); transform: scale(1.8, 1.7) translate(-50%, -50%); } 68%, 70% { -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%); transform: scale(1.7, 1.5) translate(-50%, -50%); } 78% { -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%); transform: scale(1.6, 1.4) translate(-50%, -50%); } 80%, 81% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 82%, 83% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 84%, 85% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 86%, 87% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 90%, 91% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 92%, 100% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } } </style>


الان إبحث على  وضع هذا الكود اسفله

<div id='loading-abdoutechnologie'> <!-- Loader --><div class="blobs"> <div class="blob-center"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div></div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" /> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feblend in="SourceGraphic" in2="goo" /> </filter> </defs></svg></div>

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS ديسمبر 12, 2017

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

Admin Amer

ديسمبر 12, 2017

0 تعليقات

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

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

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

معاينة

مواضيع مشابهة

1. أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة)
2. أضافة تأثير تحميل المدونة على شكل شحنة سبنر 

نبدا الان بشرح

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

<style>/* Page Loader */ .cssload-loader{position:absolute;bottom:0;right:0;left:0;margin:auto;z-index:1000} myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;right:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite} myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''} myloader [role="progressbar"][aria-busy="true"]::before{left:50%} myloader [role="progressbar"][aria-busy="true"]::after{right:50%} @-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}} @keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}} @-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}} @keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}} </style>

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

<script type='text/javascript'>//<![CDATA[ // Loader $(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)}); //]]></script>





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

<div class='cssload-loader' id='loader'><myloader><div aria-busy='true' aria-label='إنتضر حتى يكتمل التحميل' role='progressbar'/></myloader></div><div class='page-loader' id='pagingx'/>


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

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر تطوير مواقع مارس 19, 2018

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

Admin Amer

مارس 19, 2018

0 تعليقات

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

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

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

لأضافة الكود ما عليك سوى البحث على   ووضع هذا الكود فوقه مباشرة

<script type='text/javascript'>/* <;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://d.top4top.net/p_799y1kxu1.gif",effect:"fadeIn",threshold:"0"})}); /* ]]> */ </script>

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

أضافة تأثير تحميل المدونة على شكل باخرة في البحر (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر يونيو 05, 2017

أضافة تأثير تحميل المدونة على شكل باخرة في البحر (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

يونيو 05, 2017

0 تعليقات

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

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

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background: #fff; width: 100%; height: 100%; } .boxed { margin: 0 auto; margin-bottom: 5rem; max-width: 90rem; min-height: 50rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15), 0 -0.5rem 1rem 0 rgba(0, 0, 0, 0.033); } .padded { padding: 2.5rem; } .padded--slightly { padding: 1.618rem; } .centered-container { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 75%; margin: 0 auto; text-align: center; } .group:after { content: ""; display: table; clear: both; } .vertical-align-helper:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -5px; } .vertical-align-helper > [class*=vertical-align--] { display: inline-block; width: 100%; } .text--centered { text-align: center; } .vertical-align--middle { vertical-align: middle; } ferry { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 64px; height: 32px; border-radius: 3px 0 0 0; background-color: #2b2b2b; z-index: 1; -webkit-animation: bop .48s ease-in-out alternate infinite; animation: bop .48s ease-in-out alternate infinite; box-shadow: inset 0 -5px 0 0 #e74c3c, inset 0 -15px 0 0 #2b2b2b, inset 0 -17px 0 0 #f0cf3c; border-top: 4px solid #ecf0f1; } @-webkit-keyframes bop { to { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } @keyframes bop { to { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } ferry:after { content: ""; position: absolute; top: -18px; right: 0; display: block; width: 45px; height: 15px; background-color: #ecf0f1; z-index: 1; border-radius: 3px 3px 0 0; } ferry:before { content: ""; position: absolute; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: -5px; left: -3px; width: 10px; height: 50px; background-color: white; } ferry chimney { position: absolute; top: -35px; display: block; width: 17px; height: 22px; background-color: #f0cf3c; left: 32px; z-index: -1; -webkit-transform: rotate(8deg); transform: rotate(8deg); box-shadow: inset 0 3px 0 0 #2b2b2b; } ferry waves { position: absolute; bottom: -37px; display: block; width: 100px; height: 50px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE1NSIgaGVpZ2h0PSI4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI4NyIgd2lkdGg9IjE1NyIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzkiPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z18xIiBjeT0iMzMuNSIgY3g9IjM0LjUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxlbGxpcHNlIHJ5PSIyNiIgcng9IjI2IiBpZD0ic3ZnXzMiIGN5PSIzMy41IiBjeD0iNjMuODY4NDkzIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z182IiBjeT0iMzMuNSIgY3g9IjkxLjcxODg4IiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z183IiBjeT0iMzMuNSIgY3g9IjEyMS4wODczNzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI0NiIgd2lkdGg9IjE0MC4wMDAwMDYiIHk9IjMyLjUiIHg9IjcuNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9IiNmZmYiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg=="); background-size: 133% 144%; -webkit-animation: sail 4s linear infinite; animation: sail 4s linear infinite; } @-webkit-keyframes sail { to { background-position: 400px 0; } } @keyframes sail { to { background-position: 400px 0; } } </style>

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<b:if cond='data:blog.pageType == "item"'> <div id='loading-abdoutechnologie'><center> <ferry><chimney></chimney><waves></waves></ferry> </center></div></b:if> <script type='text/javascript'> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script>

أضافة تأثير تحميل المدونة على شكل سبنر (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر يونيو 01, 2017

أضافة تأثير تحميل المدونة على شكل سبنر (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

يونيو 01, 2017

0 تعليقات

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

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

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background: #333; width: 100%; height: 100%; } .fidget { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 150px; height: 150px; overflow: hidden; -webkit-animation: rotate .85s linear infinite; animation: rotate .85s linear infinite; } @-webkit-keyframes rotate { from { -webkit-transform: translate(-50%, -50%) rotate(0) scale(2); transform: translate(-50%, -50%) rotate(0) scale(2); } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2); transform: translate(-50%, -50%) rotate(360deg) scale(2); } } @keyframes rotate { from { -webkit-transform: translate(-50%, -50%) rotate(0) scale(2); transform: translate(-50%, -50%) rotate(0) scale(2); } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2); transform: translate(-50%, -50%) rotate(360deg) scale(2); } } .end, .center2 { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: tomato; } .end:after, .center:after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; border: 2px solid #ccc; border-radius: 50%; background-color: #333; content: ''; } .center2 { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .end { z-index: 2; } .end:nth-child(1) { top: 5px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .end:nth-child(2) { bottom: 25px; right: 15px; } .end:nth-child(3) { bottom: 25px; left: 15px; } .gap { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: tomato; z-index: 1; } .gap:after { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: #333; content: ''; } .gap:nth-child(5) { top: 35px; left: 26px; -webkit-transform: rotate(-21deg); transform: rotate(-21deg); } .gap:nth-child(5):after { top: -15px; left: -15px; } .gap:nth-child(6) { top: 35px; right: 26px; -webkit-transform: rotate(21deg); transform: rotate(21deg); } .gap:nth-child(6):after { top: -15px; right: -15px; } .gap:nth-child(7) { bottom: 9px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .gap:nth-child(7):after { bottom: -15px; } @-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(1.0)} 40%{-webkit-transform:scale(0.4)} } @keyframes bouncedelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(1.0)} 40%{transform:scale(1.0); -webkit-transform:scale(0.4)} } </style>

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<b:if cond='data:blog.pageType == "item"'> <div id='loading-abdoutechnologie'> <div class='fidget'> <div class='end'/> <div class='end'/> <div class='end'/> <div class='center2'/> <div class='gap'/> <div class='gap'/> <div class='gap'/></div></div></b:if> <script type='text/javascript'> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script>

أضافة تأثير تحميل المدونة على شكل بطارية (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر يونيو 04, 2017

أضافة تأثير تحميل المدونة على شكل بطارية (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

يونيو 04, 2017

0 تعليقات

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

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

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background: #fff; width: 100%; height: 100%; } @keyframes load { 0% { top: 4.5rem; } 70% { top: 1.125rem; } 90% { top: 0; } 95% { top: 0; } 100% { top: 4.5rem; } } @keyframes liquid-1 { 0% { height: 0; opacity: 0; top: -0.5rem; } 22% { height: 0.28125rem; top: 0.375rem; opacity: 1; } 25% { top: -0.25rem; } 35% { height: 1.125rem; top: -0.5rem; } 55% { height: 0.28125rem; top: -0.125rem; } 60% { height: 0.61875rem; opacity: 1; top: -0.275rem; } 96% { height: 0.84375rem; opacity: 0; top: 0.5rem; } 100% { height: 0; opacity: 0; } } @keyframes liquid-2 { 0% { height: 0; opacity: 0; top: -0.5rem; } 17.5% { height: 0.28125rem; top: 0.2rem; opacity: 1; } 20% { top: -0.25rem; } 25% { height: 1.40625rem; top: -0.625rem; } 45% { height: 0.28125rem; top: -0.125rem; } 60% { height: 1.40625rem; opacity: 1; top: -0.5rem; } 96% { height: 0.84375rem; opacity: 0; top: 0.5rem; } 100% { height: 0; opacity: 0; } } .battery { display: inline-block; position: relative; width: 2.25rem; height: 4.5rem; box-shadow: 0 0 0 0.2rem #425C77; background: white; border-radius: 0.09rem; margin-top: 200px; } .battery:before { content: ''; position: absolute; left: 0.5625rem; right: 0.5625rem; top: -0.3375rem; height: 0.3375rem; width: 1.125rem; background: #425C77; border-radius: 0.18rem; } .battery:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-right: 2.25rem solid transparent; border-bottom: 4.05rem solid rgba(255, 255, 255, 0.325); } .liquid { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 2.25rem; background: #71FB85; animation: load 2.25s infinite; } .liquid:after, .liquid:before { content: ''; position: absolute; top: -0.5rem; height: 1.125rem; width: 1.4625rem; background: #71FB85; border-radius: 50%; opacity: 0; } .liquid:after { right: 0; animation: liquid-1 2.25s infinite; } .liquid:before { left: 0; animation: liquid-2 2.25s infinite; } @keyframes power { 0% { color: #bcbcbc; } 75% { color: #bcbcbc; text-shadow: none; } 90% { color: #58fa70; text-shadow: 0 0 0.8em #71FB85; } 100% { color: #bcbcbc; text-shadow: none; } } #loading-abdoutechnologie h5 { font-family:Lobster,ge_dinar_tworegular; font-weight: 300; letter-spacing: 0.025rem; text-transform: uppercase; color: #bcbcbc; animation: power 2.25s infinite; } </style>

1. قم بالبحث فى قالب مدونتك عن الوسم  ثم قم بوضع الكود التالى فوقة

<b:if cond='data:blog.pageType == "item"'> <div id='loading-abdoutechnologie'><center><div class='battery'> <div class='liquid'/></div><h5>جاري التحميل</h5></center></div></b:if> <script type='text/javascript'> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script>

أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS سبتمبر 15, 2017

أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

سبتمبر 15, 2017

0 تعليقات

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

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

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

1. ضع هذا الكود فوق ال  

<style> div#loading-abdoutechnologie{right:0;bottom:0;position:fixed;z-index:99999999999999999999;display:block;left:0;top:0;background:#fff;width:100%;height:100%} .indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2)} .indicator svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .indicator svg polyline#back{stroke:rgba(59,211,171,0.3)} .indicator svg polyline#front{stroke:#3bd3ab;stroke-dasharray:12,36;stroke-dashoffset:48;animation:dash 1s linear infinite} .cta{position:fixed;bottom:20px;right:30px;color:#222;font-weight:bold} @-moz-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} @-webkit-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} @-o-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} @keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}} </style>

1. ضع هذا الكود تحت ال  مباشرة

<div id='loading-abdoutechnologie'><div class="indicator"> <svg width="16px" height="12px"> <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> </svg></div><script type='text/javascript'> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script>

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

أضافة تأثير تحميل المدونة على شكل بلايستيشن 4 ps4 (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر أغسطس 05, 2017

أضافة تأثير تحميل المدونة على شكل بلايستيشن 4 ps4 (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 05, 2017

0 تعليقات

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

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

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