القائمة الرئيسية

الصفحات

تعديل المشاركة

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

YOUSEF T AL-HAYEK
(0)


موضوع مقدم من مدونة برمجتي

تدوين يوسف الحايك

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


كيف تضاعف ارباحك على ادسنس بي اضافه بسيطه على بلوجر

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

رغم قوة هذه الميزه وهى سرعة المدونه لكن لها تاثير سلبى على ارباحنا على ادسنس وسوف اوضح لك فى السطور التاليه لما هى مؤثره بالسلب .

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

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

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

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

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

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

ثانيا نقوم بالدخول الى تعديل html لوضع الاكواد الخاصه بالاضافه.

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

Loading Spinners

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

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

الكود الاول


اعلى </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>





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

هل اعجبك الموضوع :

تعليقات

إرسال تعليق

التنقل السريع