وصف المدون

Hello, I am Abdulaziz, a technical blogger and founder of technology website, interested in the internet and web design field. My goal is to create a website that provides design and problem-solving services.

إعلان الرئيسية

الصفحة الرئيسية إضافة تأثير تحميل الصفحة لمدونات بلوجر

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

Abdulaziz El-lithy
0

صفحة تحميل بلوجر

فائدة تأثير صفحة التحميل

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


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


1.قم بتسجيل الدخول إلي مدونة بلوجر.

2.من الشريط الجانبي انتقل إلى مظهر القالب.

3.من الثلاث نقاط اضفط فوق تعديلHTML.

4.الآن أبحث داخل القالب باستخدام Ctrl+F عن <body/> .

5.قم بنسخ الكود التالي فوقه مباشرةً .

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut
("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>



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

1.أبحث داخل القالب باستخدام Ctrl+F عن الوسم <body> .

2.أسفله مباشر قم بلصق الكود التالي .

3.أحفظ القالب الأن.

معاينة الشكل قبل التركيب معاينة


<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.balls&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>



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

1.أبحث داخل القالب باستخدام Ctrl+F عن الوسم <body> .

2.أسفله مباشر قم بلصق الكود التالي .

3.أحفظ القالب الأن.

معاينة الشكل قبل التركيب معاينة


<div id='loader'>
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">loading...</span>
<span class="text"><data:blog.title/></span>
</div> </div></div></div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>


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

1.أبحث داخل القالب باستخدام Ctrl+F عن الوسم <body> .

2.أسفله مباشر قم بلصق الكود التالي .

3.أحفظ القالب الأن.

معاينة الشكل قبل التركيب معاينة


<div id='loader'>
<div class="spinner"></div>
    </div>
<script 
      src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-wiggle 1.2s infinite}@keyframes spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>




إضافة تأثير تحميل الصفحة لمدونات بلوجر الشكل الرابع

1.أبحث داخل القالب باستخدام Ctrl+F عن الوسم <body> .

2.أسفله مباشر قم بلصق الكود التالي .

3.أحفظ القالب الأن.

معاينة الشكل قبل التركيب معاينة


<div id='loader'>
<div class='preload-juggle'>
  <div class='ball'></div>
  <div class='ball'></div>
  <div class='ball'></div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.preload-juggle&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>
#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000}
.preload-juggle {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}
.preload-juggle div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;}
.preload-juggle div:nth-child(1) {animation-delay: -0.7s;}
.preload-juggle div:nth-child(2) {animation-delay: -1.4s;}
@keyframes juggle {
0% {transform: translateX(0px) translateY(0px);}
12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;}
25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out;  }
37.5% {transform: translateX(25px) translateY(55px);}
50% {transform: translateX(0px) translateY(0px);}
62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; }
 75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;}
87.5% {transform: translateX(-25px) translateY(55px); }
100% {transform: translateX(0px) translateY(0px);}
}
</style>


إنضم الي جروب تلجرام للربح من بلوجر وحل المشاكل التي قد تواجهك.
إنضم الي جروبنا علي تلجرام

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

1.أبحث داخل القالب باستخدام Ctrl+F عن الوسم <body> .

2.أسفله مباشر قم بلصق الكود التالي .

3.أحفظ القالب الأن.

معاينة الشكل قبل التركيب معاينة


 <div id="loader">
        <div class="spinner">
            <div class="spinner-inner"></div>
        </div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>




ليست هناك تعليقات
إرسال تعليق

إعلان أول الموضوع

إعلان وسط الموضوع

إعلان أخر الموضوع

Back to top button