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

آخر الأخبار

random
جاري التحميل ...

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

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

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

عن الكاتب

alpha4info

التعليقات


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

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