السلام عليكم ورحمة الله وبركاته اهلا بكم متابعينا من جديد على مدونة تى جو اليوم سوف نتحدث عن اضافه مهمه جدا الكثير منا يعرفها جيدا ولكن لم نكن نعلم فائدتها والتى هى من شانها تزيد من ارباحنا على ادسنس , فكيف ذلك ؟ تابعونا .
جميعنا نعلم جيدا ان سرعة المدونه هى من الامور الممتازه والتى من شانها انها تجعلك تكسب ثقة جوجل مما يضمن لك ظهور موضوعاتك فى اوائل البحث على محركات بحث جوجل .
رغم قوة هذه الميزه وهى سرعة المدونه لكن لها تاثير سلبى على ارباحنا على ادسنس وسوف اوضح لك فى السطور التاليه لما هى مؤثره بالسلب .
تعتمد سرعة القالب الخاص بمدونتك على تعطيل عمل الاسكربتات حتى تظهر المواضيع للزائر بشكل سريع لكن تعالو لا ننسى ان اعلانات ادسنس ما هى الا مجموعة اسكربتات .
نستنتج من هذا ان المواضيع الخاصه بنا تظهر للزائر قبل الوحدات الاعلانيه مما يقلل من نسبة ظهور الاعلانات وبالتالى تقل الارباح , واكثر المدونات المتاثره من هذا الموضوع هى المدونات التى يكون بها معدل الارتداد مرتفع اى مدة بقاء الزائر داخل الموضوع قصير جدا وبالاخص المدونات التى تعمل على عرض محتوى يقوم الزائر بتحميله مثل المدونات التقنيه. كيف يمكننا التغلب على هذه المشكله هذا هو ما نتحدث عنه فى موضوع اليوم , هناك اضافه جميله جدا والتى من شانها حجب محتوى المدونه على الزائر لحين تحميل كل الاعلانات على المدونه وتسمى اسبنر التحميل او 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>
وهكذا نكون قد انتهينا من موضوع اليوم اتمنى ان تكونو قد حققتم اقصى استفاده من الاضافه وان اعجبك الموضوع لا تنسى مشاركته مع الاصدقاء حتى تعم الفائده ولا تنسى الاشتراك على قناتنا على اليوتيوب حتى تكون اول المستفيدين من شروحاتنا لكم منى كل الحب والتقدير والى اللقاء فى موضوع جديد على مدونة تى جو.
Tags:
اضافات-بلوجر
الله يباركلك جزاكم الله خيرا ونفعا للناس
اشكرك اخى الكريم واسعدتنى زيارتك كثيرا تقبل تحياتى
التأثير لا يختفي ما هو الحل
انا عملت مدونه وقرب اتم ال 20 مقال ممكن لما الخص اعرضها عليك وتقولى رايك ونصيحتك