الأثير https://blog.itheric.com/2019/01/Progress-and-Download-scrollbar-for-Blogger.html

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

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

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

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

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


اتجه الى بلوجر ثم اختر المظهر ثم اضغط على تعديل 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> 


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

شارك المقال:

تفاعل:

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.??
لإضافة كود قم بتحويله اولا بمحول الاكواد
إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل

اشترك بنشرتنا البريدية

تنبيه