اضافة تاثير التحميل المسبق على بلوجر Loading Spinners

السلام عليكم ورحمة الله وبركاته اهلا بكم متابعينا من جديد على مدونة تى جو اليوم سوف نتحدث عن اضافه مهمه جدا الكثير منا يعرفها جيدا ولكن لم نكن نعلم فائدتها والتى هى من شانها تزيد من ارباحنا على ادسنس , فكيف ذلك ؟ تابعونا .

اضافة تاثير انتظار تحميل المدونه Loading Spinners وعلاقتها بى ادسنس 2020

جميعنا نعلم جيدا ان سرعة المدونه هى من الامور الممتازه والتى من شانها انها تجعلك تكسب ثقة جوجل مما يضمن لك ظهور موضوعاتك فى اوائل البحث على محركات بحث جوجل .
رغم قوة هذه الميزه وهى سرعة المدونه لكن لها تاثير سلبى على ارباحنا على ادسنس وسوف اوضح لك فى السطور التاليه لما هى مؤثره بالسلب .
تعتمد سرعة القالب الخاص بمدونتك على تعطيل عمل الاسكربتات حتى تظهر المواضيع للزائر بشكل سريع لكن تعالو لا ننسى ان اعلانات ادسنس ما هى الا مجموعة اسكربتات .
نستنتج من هذا ان المواضيع الخاصه بنا تظهر للزائر قبل الوحدات الاعلانيه مما يقلل من نسبة ظهور الاعلانات وبالتالى تقل الارباح , واكثر المدونات المتاثره من هذا الموضوع هى المدونات التى يكون بها معدل الارتداد مرتفع اى مدة بقاء الزائر داخل الموضوع قصير جدا وبالاخص المدونات التى تعمل على عرض محتوى يقوم الزائر بتحميله مثل المدونات التقنيه. كيف يمكننا التغلب على هذه المشكله هذا هو ما نتحدث عنه فى موضوع اليوم , هناك اضافه جميله جدا والتى من شانها حجب محتوى المدونه على الزائر لحين تحميل كل الاعلانات على المدونه وتسمى اسبنر التحميل او loader مما يزيد من نسبة ظهور الاعلانات وبالتالى تزيد الارباح .

اضافة تاثير انتظار تحميل المدونه او loader او Loading Spinners

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

طريقة تركيب الاضافه

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

فيديو شرح تركيب الاضافه


يمكنك نسخ الاكواد من الصناديق التاليه 

اكواد الاضافه

الكود الاول
اعلى </head>
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px}
.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}
.inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA}
.inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA}
.inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA}
@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}
@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}
@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
</style>
الكود الثانى
اسفل <body>
<div id='preloader'>
<div class='spinner'>
<div class='inner one'></div>
<div class='inner two'></div>
<div class='inner three'></div>
</div>
</div>
الكود الثالث
اعلى </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

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

تى جو

مدون ومنشئ محتوى تقنى على اليوتيوب قناة ( تى جو )

4 تعليقات

أحدث أقدم

POST ADS1

POST ADS 2