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

---- your ads -----

اضافة شريط التقدم وشريط التحميل لمدونة بلوجر , ليست اضافات مهمة بالفعل ولكن تجعل مظهر مدونتك أكثر جمالا فلا بأس بإستخدامها.

ما هو شريط التقدم , وشريط ااتحميل؟ كما هو الحال عند نسخ الملفات على جهاز الحاسوب و على الهاتف يظهر لنا شريط افقي ليبين لنا الوقت الازم لنسخ الملفات لكن في اضافة شريط التقدم يبين لنا نسبة المقال المقروء تقريبا, وشريط التحميل يبين لنا نسبة تحميل المدونة,ويكون ذلك عبر خط افقي يمتد شيئا فشيئا حتى النهاية.

إضافة شريط التقدم

مـعـاينة شريـط التـقـدم

اتجه الى بلوجر ثم اختر المظهر ثم اضغط على تعديل HTML
ابحث عن الوسم </body> والصق الكود التالي قبله/فوقه

 <script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>

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

 <progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>    
   </div>
</progress>

ثم اضف الكود التالي قبل الوسم </head>

 <style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;right:0;top:0;width:100%;height:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#ea3023;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#ea3023;z-index:10}
progress::-moz-progress-bar{background-color:#ea3023;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;right:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#ea3023;width:0%;display:block;height:inherit;z-index:10}
</style>

#ea3023 هو لون الشريط غيره بما ترغب

اضافة شريط التحميل

مـعـاينة شـريـط التـحـمـيل

وهو ما يشابه شريط تحميل موقع يوتيوب الشهير, يظهر خلال تحميل المتصفح لصفحات المدونة
لإضافته , اتجه الى بلوجر ثم اختر المظهر ثم تعديل HTML
ثم ابحث عن الوسم </body> و ضع الكود التالي قبله/فوقه

 <script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"5px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .7s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="right"};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||"#ea3023";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>

الى هنا اكون قد وصلت لنهاية هذا المقال
اذا كان لديكم اي استفسار يرجى وضعه في التعليقات

---- your ads -----

HTML