ألفا للمعلوميات - مواضيع و دروس تقنية حصرية ألفا للمعلوميات - مواضيع و دروس تقنية حصرية

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

مرحبا بكم زوار ومتابعي ألفا للمعلوميات، اليوم أتيتكم بشرح جديد حول طريقة اضافة وتركيب صفحة أو تأثير التحميل الى مدونات بلوجر، تم وضع الشرح نظرا لطلبات الأصدقاء  بوضع هذا الشرح.

 والان ادا كنت تتساءل " كيف أضيف الثأثير لمدونتي ؟ "
- اليك الطريقة التي سنشرحها لك الآن وهي بسيطة للغاية ما عليك الا بمتابعة الشرح ودعمنا بتعليق للموضوع ان استفدت كذلك لنشر نمادج أخرى وجديدة في أقرب وقت :
إضافة تأثير تحميل الصفحة لمدونات بلوجر

معاينة
نأتي الآن إلى طريقة التركيب:
توجه الى لوحة التحكم لمدونتك على بلوجر >>>> القالب
* ثم تبحث عن ]]></b:skin>
وتضع أعلاه الكود التالي :
/* Loader
===================== */
.loader {background-color: #6976C9;text-align: center;position:fixed;width:100%;height:100%;z-index:999999999;}
.spinner {width: 100px;height: 50px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;text-align: center;}
.spinner .ball {width: 20px;height: 20px;background-color: #fff;border-radius: 50%;display: inline-block;-webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;}
.loader p {color: #fff;margin-top: 5px;font-family: sans-serif;letter-spacing: 3px;font-size: 10px;}
@-webkit-keyframes motion {0% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}25% {-webkit-transform: translateX(-50px) scale(0.3);transform: translateX(-50px) scale(0.3);}50% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}75% {-webkit-transform: translateX(50px) scale(0.3);transform: translateX(50px) scale(0.3);}100% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}}@keyframes motion {0% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}25% {-webkit-transform: translateX(-50px) scale(0.3);transform: translateX(-50px) scale(0.3);}50% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}75% {-webkit-transform: translateX(50px) scale(0.3);transform: translateX(50px) scale(0.3);}100% {-webkit-transform: translateX(0) scale(1);transform: translateX(0) scale(1);}}
* بعدها نقوم بالبحث عن <bodyونضع الكود التالي أسفله :
<div class='loader'>
<div class='spinner'>
<div class='ball'></div>
  <p>LOADING</p>
</div>
</div>
* يمكنك تغيير LOADING بالكلمة التي تريد .
* وأخيرا نقوم بالبحث عن </body> ونضع الكود التالي أعلاه :

<script type='text/javascript'>
 //<![CDATA[
// Loader
$(window).load(function(){
$(".loader").fadeOut(1700);
});//]]></script>
إلى هنا ينتهي الشرح وأي سؤال المرجو طرحه في تعليق

التعليقات



جميع الحقوق محفوظة 2017 لـ

ألفا للمعلوميات

سياسة الخصوصية