إضافة تأثير تحميل مدونات بلوجر لاشك و انت تتصفح مدونة المحترف العربي تشاهد عند انتقال بين مواضيع صفحة خاصة بتحميل مدونات بلوجر حيث هذه الصفحة عبارة عن اضافة تضهر في اوقات تحميل محتوى مدونتك و عندما يكتمل تحميل تختفي بطريقة رائعة و هذا بطيبعة الحال يجعل مدونتك احترافية و مدهلة مع تركيب اضافات بلوجر احترافية بواسطة مدونة المحترف العربي القسم الخاص باضافات بلوجر
لهذه اضافة العديد من ايجابيات مثل مشاهدة جميع اعلانات الصفحة حيث ان في الغالب يكون الزوار او قراء المدونة الخاص بك على عجلة فينتقلون الى اخر الموضوع بدون انتضار تحميل الصفحة لكن مع هذه الاضافة لن يتم عرض المحتوى حتى ينتهي المتصفح من تحميل و بالتالي قضاء وقت اكثر على مدونتك، و مشاهدة جميع المحتوى و اعلاناتك.
طريقة تركيب إضافة تأثير تحميل مدونات بلوجر:
- توجه الى لوحت تحكم بلوجر الخاص بمدونتك
- ثم قالب ثم تحرير html :
- ابحث عن وسم </body> و اضف الكود التالي فوقه :
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>لإضافة تأثير تحميل مدونات بلوجر رقم 1 : معاينة
ابحث عن وسم <body> و اضف الكود التالي اسفله :<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>لإضافة تأثير تحميل مدونات بلوجر رقم 2 : معاينة
ابحث عن وسم <body> و اضف الكود التالي اسفله :
<div id='preloader'>
<div id='container' class='spinner'>
<div id='dot'></div>
<div class='step' id='s1'></div>
<div class='step' id='s2'></div>
<div class='step' id='s3'></div>
</div>
</div>
<style type='text/css'>
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style>لإضافة تأثير تحميل مدونات بلوجر رقم 3 : معاينة
ابحث عن وسم <body> و اضف الكود التالي اسفله :
<div id='preloader'>
<div class='loader spinner'>
<div class='l_main'>
<div class='l_square'><span></span><span></span><span></span></div>
<div class='l_square'><span></span><span></span><span></span></div>
<div class='l_square'><span></span><span></span><span></span></div>
<div class='l_square'><span></span><span></span><span></span></div>
</div>
</div>
</div>
<style type='text/css'>
#preloader{overflow:hidden;background:#FA3663;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.loader{height:100%;width:100%}
.loader .l_main{position:absolute;top:50%;left:50%;width:172px;height:128px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
@media (max-width:550px){.loader{-webkit-transform:scale(0.75);transform:scale(0.75)}}
@media (max-width:440px){.loader{-webkit-transform:scale(0.5);transform:scale(0.5)}}
.l_square{position:relative}
.l_square:nth-child(1){margin-left:0px}
.l_square:nth-child(2){margin-left:44px}
.l_square:nth-child(3){margin-left:88px}
.l_square:nth-child(4){margin-left:132px}
.l_square span{position:absolute;top:0px;left:20px;height:36px;width:36px;border-radius:2px;background-color:#FFFFFF}
.l_square span:nth-child(1){top:0px}
.l_square span:nth-child(2){top:44px}
.l_square span:nth-child(3){top:88px}
.l_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-in;animation:animsquare1 2s infinite ease-in}
.l_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-in;animation:animsquare2 2s infinite ease-in}
.l_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-in;animation:animsquare3 2s infinite ease-in}
.l_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-in;animation:animsquare4 2s infinite ease-in}
.l_square span:nth-child(1){-webkit-animation-delay:0.00s;animation-delay:0.00s}
.l_square span:nth-child(2){-webkit-animation-delay:0.15s;animation-delay:0.15s}
.l_square span:nth-child(3){-webkit-animation-delay:0.30s;animation-delay:0.30s}
@keyframes animsquare1{0%,5%,95%,100%{transform:translate(0px,0px) rotate(0deg)}30%,70%{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare2{0%,10%,90%,100%{transform:translate(0px,0px) rotate(0deg)}35%,65%{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare3{0%,15%,85%,100%{transform:translate(0px,0px) rotate(0deg)}40%,60%{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare4{0%,20%,80%,100%{transform:translate(0px,0px) rotate(0deg)}45%,55%{transform:translate(-40px,0px) rotate(-90deg)}}
</style>
تعليقات
إرسال تعليق