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

شرح تركيب تأثير التحميل لمدونات بلوجر

تحية طيبة لكل الأصدقاء، كل منا يريد لمدونته ان تكون الأفضل من خلال بعض الاضافات الجميلة والرائعة، الاضافة التي سنشرحها في هذه التدوينة هي اضافة تأثير التحميل للمدونة وطبعا قد تتساؤل مافائدة هذه الإضافة:

- هذه الصفحة أو هذه الأداة تعطي تأثيرا رائعا لموقعك ، بحيث يبقى الزائر ينتظر حتى يتم تحميل جميع عناصر الصفحة ثم تختفي بعدها الأداة تلقائيا ، كما أن هذه الأداء توجد في عدد كبير من المواقع على الويب.
والآن اليك الطريقة التي سنشرحها لك الآن وهي بسيطة للغاية ما عليك الا بمتابعة الشرح ودعمنا بتعليق للموضوع ان استفدت كدلك لنشر نمادج أخرى وجديدة في أقرب وقت:
  
* طريقة التركيب :
توجه الى لوحة التحكم لمدونتك على بلوجر >>>> القالب
ثم تبحث عن ]]></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 لـ

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

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