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

السلام عليكم ورحمة الله وبركاته

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

كيفية الإضافة:

توجه إلى لوحة التحكم في مدونتك > القالب > إضغط على تحرير html ثم أبحث عن الرمز </body>

ثم قم بإضافة الكود التالي فوق الرمز </body> مباشرةً.

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjSTZlnUary-aWuwaKIvRG-q4gSqd7x-AZWLT9DaIOaNY_yiAtON2tl0eTNtgfZrcEXlHBXWuliaIac3ngnHrBCTlhEXAwnaHupjN3fJvoV9KDkwblDN_vXXCcqORqBDGoyp1wl0kWis/w43-h11-no/www.madad2.com1.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">تحميل...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

أختر حفظ وتوجه الى مدونتك لمشاهدة النتائج.

يمكن تغيير الصورة المشار إليها بتبديل الرابط بروابط الصور التالية كما ترغب,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2rJPRdK3nNJz53IuB-gDACXEcaIcOReNE853fSrhX0OdmNZZgf9cLC-YALu9yUjTiuvBXru167bwomB3SA18Vzf8CFe-1kdyqELUi1nkqGyFFbbGFlPYPDhxEQweD2-IFrqVQG_dmW0/no/www.madad2.com.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjSTZlnUary-aWuwaKIvRG-q4gSqd7x-AZWLT9DaIOaNY_yiAtON2tl0eTNtgfZrcEXlHBXWuliaIac3ngnHrBCTlhEXAwnaHupjN3fJvoV9KDkwblDN_vXXCcqORqBDGoyp1wl0kWis/w43-h11-no/www.madad2.com1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x4qhNcxyXqNdO1nEoAmUE2gfnoIFX7iIEUCqkLnsb-TcMKEPhLB0iLp-1pUXc-b0wAPhRBhCNsiVNiZbFBmpAAOXhVmwOmhUs4t5aLE2kdNrYNXFOg0_C30XfXlc-soH5oDHWZRqMkg/w220-h19-no/loader+www.madad2.com.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1o7touJztmwfoNVuyV2r8_qSJKz-XTj34Rk652GUHQtGzwNZxQlgDzbymUdeif8TY0yq3lzFxJOyLPctHVqbilItDmt1bbthwkQF68DBuGP0ppRoNceMqD90u9WRR17cMTyIlI0dEiZc/s32-no/Loadding-www.madad2.com.gif