اضافة شريط التقدم وشريط التحميل لمدونة بلوجر
اضافة شريط التقدم وشريط التحميل لمدونة بلوجر
javascript, HTML, إضافات بلوجر
اضافة شريط التقدم وشريط التحميل لمدونة بلوجر , ليست اضافات مهمة بالفعل ولكن تجعل مظهر مدونتك أكثر جمالا فلا بأس بإستخدامها.
ما هو شريط التقدم , وشريط ااتحميل؟ كما هو الحال عند نسخ الملفات على جهاز الحاسوب و على الهاتف يظهر لنا شريط افقي ليبين لنا الوقت الازم لنسخ الملفات لكن في اضافة شريط التقدم يبين لنا نسبة المقال المقروء تقريبا, وشريط التحميل يبين لنا نسبة تحميل المدونة,ويكون ذلك عبر خط افقي يمتد شيئا فشيئا حتى النهاية.
اتجه الى بلوجر ثم اختر المظهر ثم اضغط على تعديل HTML
ابحث عن الوسم</body> والصق الكود التالي قبله/فوقه
ابحث عن الوسم<body>
والصق الكود التالي بعده/اسفله
ثم اضف الكود التالي قبل الوسم </head>
#ea3023 هو لون الشريط غيره بما ترغب
وهو ما يشابه شريط تحميل موقع يوتيوب الشهير, يظهر خلال تحميل المتصفح لصفحات المدونة
لإضافته , اتجه الى بلوجر ثم اختر المظهر ثم تعديل 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> ابحث عن الوسم
<progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress> ثم اضف الكود التالي قبل الوسم
<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>
اضافة شريط التحميل
لإضافته , اتجه الى بلوجر ثم اختر المظهر ثم تعديل HTML
ثم ابحث عن الوسم
<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> الى هنا اكون قد وصلت لنهاية هذا المقال
اذا كان لديكم اي استفسار يرجى وضعه في التعليقات