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

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

طريقة تركيب تأثير تحميل الصفحة لمدونات بلوجر :

قم بتسجيل الدخول إلي مدونة بلوجر من هنا.
بعد هذا انتقل إلى مظهر القالب.
انقر فوق تعديلHTML.
الآن أبحث داخل القالب باستخدام Ctrl+F عن <body/> .
فوقة مباشر قم بلصق الكود التالي .

تركيب تأثير تحميل الصفحة لمدونات بلوجر (1)

الآن أبحث داخل القالب باستخدام Ctrl+F عن <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)

الآن أبحث داخل القالب باستخدام Ctrl+F عن <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)

الآن أبحث داخل القالب باستخدام Ctrl+F عن <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>

ملحوظة

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

نرحب بالإستفسار والتعليق