كود تحميل الصفحة بطريقة جديدة 2013 لمدونات بلوجر

طريقة تركيب الإضافة 

1- ادخل إلى مدونتك / ثم أختر تحرير قالب 

2- إبحث عن الوسم  </head>

3- ضع الكود التالي فوقه

الكود

<script class='cssdeck' src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js'/>
 <style type='text/css'>/*<![CDATA[*//*===================  Basic structure===================*/#loader {  background-color: #000;  position:absolute;  top:0%;  left:0%; width:100%;  height:100%;  z-index:10000;}.circle-top-line,.circle-bottom-line{  padding:0;  width:100%;  height:5px;  display:block;  z-index:100;  position:relative;}.circle-top-line{  margin-top:60px;  margin-bottom:-60px;
  /*box-shadow*/  -webkit-box-shadow:0 2px 3px #111;     -moz-box-shadow:0 2px 3px #111;          box-shadow:0 2px 3px #111;}.circle-bottom-line{  margin-top:-58px;
  /*box-shadow*/  -webkit-box-shadow:0 2px 2px black;     -moz-box-shadow:0 2px 2px black;          box-shadow:0 2px 2px black;}.circle-line{  width:100%;  height:250px;  margin:60px auto;  padding:10px;}.circle-main{  width:200px;  height:200px;  margin:200px auto ;  display:block;  padding:15px;  text-align:center;  line-height:150px;  font-size:40px;  font-weight:bold;  z-index:90;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle-inner{  width:180px;  height:180px;  margin:0;  padding:5px;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle{  width:150px;  height:150px;  margin:5px;  padding:5px;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle img{  width:  150px;  height: 150px;}
/*===================  Basic colors===================*/#tiempo{  text-shadow:0 2px 2px #252525;  color:#DADADA;}.circle-main{  background:#EB4646;  border:10px inset #A04141;
  /*box-shadow*/  -webkit-box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;     -moz-box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;          box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;}.circle-inner{  background:#FC7979;  border:5px inset #D13030;
  /*box-shadow*/  -webkit-box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;     -moz-box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;          box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;}.circle{  background:#DF7070;  border:5px inset #D52D2D;
  /*box-shadow*/  -webkit-box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;     -moz-box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;          box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;}/*===================  Basic sequences===================*/.circle-top-line,.circle-bottom-line{  /*animation*/  -webkit-animation:circleLine 13s infinite ease-in-out;     -moz-animation:circleLine 13s infinite ease-in-out;      -ms-animation:circleLine 13s infinite ease-in-out;       -o-animation:circleLine 13s infinite ease-in-out;          animation:circleLine 13s infinite ease-in-out;}@-webkit-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-moz-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-ms-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-o-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}
.circle-main{  /*animation*/  -webkit-animation:main 20s infinite ease-in-out;     -moz-animation:main 20s infinite ease-in-out;      -ms-animation:main 20s infinite ease-in-out;       -o-animation:main 20s infinite ease-in-out;          animation:main 20s infinite ease-in-out;}@-webkit-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-moz-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-ms-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-o-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}
.circle-inner{  /*animation*/  -webkit-animation:inner 15s infinite ease-in-out;     -moz-animation:inner 15s infinite ease-in-out;      -ms-animation:inner 15s infinite ease-in-out;       -o-animation:inner 15s infinite ease-in-out;          animation:inner 15s infinite ease-in-out;}@-webkit-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-moz-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-ms-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-o-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}
.circle{  /*animation*/  -webkit-animation:circle 10s infinite ease-in-out;     -moz-animation:circle 10s infinite ease-in-out;      -ms-animation:circle 10s infinite ease-in-out;       -o-animation:circle 10s infinite ease-in-out;          animation:circle 10s infinite ease-in-out;}@-webkit-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-moz-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-ms-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-o-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}    /*]]>*/</style>

4- ايضاً ابحث عن الوسم  <body>  وضع الكود التالي تحته

الكود

<div id='loader'>
 <div class='circle-main'>  <div class='circle-inner'>   <div class='circle' id='time'>0 %</div>  </div> </div>     </div>

5- ايضاً ابحث عن الوسم  </body>  وضع الكود التالي فوقه 

الكود

<script type='text/javascript'>start = 0;end = 100;$(window).ready(function(){ tmp = setInterval(countUp,5);}); function countUp(){ start++; time = $(&quot;#time&quot;); time.html( start + &quot;%&quot;); if (start === end){  clearInterval(tmp);  p = $(&quot;#loader&quot;);  p.fadeOut(&#39;fast&#39;,function(){   $(&#39;body&#39;).append(&#39;&#39;);  }); }}      </script>

6- احفظ القالب .

إذا كان لديكم أي إقتراحات أو تساؤلات حول الموضوع اضغط هنا وقدم اقتراحك أو تساؤلاتك ونحن على إستعداد للإطلاع على اقتراحاتكم والإجابة عن تساؤلاتكم ... أهلاً بكم على أرض الإبداع والتمييز

رسالة مهمة جداً

عزيزي الزائر: انت تعلم كم يبذل من الجهد كاتب التدوينة كي يعدها لك لذلك أرجوك أن تترك ولو كلمة شكر وهذا لن يكلفك شيء... تقبل منا أحلى وأرق التحايا

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر