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