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

اضافة تأثير التحميل لمدونات بلوجر - كيفية اضافة تأثير تحميل المدونة الجديدة والعصري لمدونات بلوجر، تأثير جارى التحميل يعمل على تحميل الرسوم المتحركة GIF فى مدونتك، وهى اضافة رائعة تضيف لمسة جمال فى مدونتك لها شكل رائع وديناميكي يذهل الزوار عند تحميل المدونة الخاصة بك، هذا التأثير بحد ذاته لا مثيل له، لذلك قمت باضافة هذا التأثير لمساعدة الاخرين بواسطة اكواد css و jQuery script.

قبل تركيب الاضافة، تأكد من ان تلقى نظرة على هذا التأثير بالضغط على زر المعاينة بالاسفل.

الان اذا اعجبك هذا التأثير وتريد اضافتها الى مدونتك، ما عليك سوى اتباع الخطوات التالية.

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

1. ابحث عن </head> وضع الكود التالى فوقه

/* CSS Loader Keren by rotkx.blogspot.com */
#loadhalaman{position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none}
.loadball{background-color:transparent;border:5px solid #00a3ff;border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow:0 0 35px #00a3ff;width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear}
.loadball-2{background-color:transparent;border:5px solid #00a3ff;border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow:0 0 15px #00a3ff;width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px#00a3ff}
50%{-moz-transform:rotate(145deg);opacity:1}
100%{-moz-transform:rotate(-320deg);opacity:0}
}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px#00a3ff}
50%{-webkit-transform:rotate(145deg);opacity:1}
100%{-webkit-transform:rotate(-320deg);opacity:0}
}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}

2. ابحث عن </body> وضع الكود التالى فوقه

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
  var siteURL = "http://" + top.location.host.toString();
  var $internalLinks = $("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']");
  $internalLinks.click(function() {
    $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
  });
  $('#loadhalaman').click(function() {
    $(this).hide();
  });
</script>

3. اضغط حفظ وشاهد النتائج

• معاينة