الرئيسية بلوجر

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

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

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

أخر المواضيع من قسم : بلوجر

تعليقات
ليست هناك تعليقات
إرسال تعليق
    إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -