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