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

0 مشاهدة
اضافة تأثير التحميل لمدونات بلوجر - كيفية اضافة تأثير تحميل المدونة الجديدة والعصري لمدونات بلوجر، تأثير جارى التحميل يعمل على تحميل الرسوم المتحركة 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. اضغط حفظ وشاهد النتائج

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

4 تعليقات

  1. بداية شكراً لك .. لكن بعد تركيب الإضافة ظلت الصفحة تقوم بعمل load بلا نهاية
    سازيل الإضافة حتى يوجد حل
    https://super-professeur.blogspot.com.eg/

    ردحذف
  2. لم تشتغل معي لم اجد head/ في قالبي

    ردحذف