اضافة شريط التحميل في المدونة مثل يوتيوب

كيفية اضافة شريط التحميل في المدونة مثل موقع يوتيوب بطريقة احترافية

اضافة شريط التحميل في المدونة مثل يوتيوب - الان اصبح شريط التحميل من اهم الإضافات في المواقع و المدونات و اكثر المواقع شعبية تستعمل هذه الاضافة و وظيفته يظهر عندما تكون الصفحة في وضع التحميل و يختفي عند انتهاء تحميل الصفحة و يمكنك معاينة الاضافة عبر الرابط التالي


طريقة التركيب

  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML
ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>


التنسيق

لتغيير حجم عرض شريط التحميل استبدل height:"2px"
الان لتغيير لون شريط التحميل استبدل a.bg=a.bg||"#db3131 باللون الذي تريده و يمكنك استخدام اكواد الالوان

اي سؤال او استفسار لا تترد بوضعه في تعليق

بالتوفيق

No comments:

Post a Comment

201 تعريب عرب تيش جمياع الحقوق محفوظة 2016

Theme images by sndr. Powered by Blogger.