طريقة اضافة النسبة المئوية لشريط التمرير الخاص بالمدونة

طريقة اضافة النسبة المئوية لشريط التمرير الخاص بالمدونة

اليوم مدونة الحسام ويب تقدم لكم اضافة جديدة ومميزة لمدونات بلوجر وهي طريقة اضافة النسبة المئوية بجانب شريط التمرير الجانبي للمدونة ... 6:28 ص

اليوم مدونة الحسام ويب تقدم لكم اضافة جديدة ومميزة لمدونات بلوجر وهي طريقة اضافة النسبة المئوية بجانب شريط التمرير الجانبي للمدونة بصورة مميزة وفريد في تصميمها ...

شرح تركيب الاداة :
اولا : نتوجه الى لوحة التحكم > القالب > تحرير القالب ثم نضغط على ( ctrl + f ) ونبحث عن الوسم ]]></b:skin> ونلصق فوقه الكود التالي : 

#scroll {

display: none;

position: fixed;

top: 0;

left: 20px;

z-index: 500;

padding: 3px 8px;

background-color: #2187e7;

color: #fff;

border-radius: 3px;

}

#scroll:after {

content: ” ”;

position: absolute;

top: 50%;

left: -8px;

height: 0;

width: 0;

margin-top: -4px;

border: 4px solid transparent;

border-left-color: #2187e7;

}

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

<div id='scroll'></div>

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

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

ثم احفظ القالب .... ومبرووووك عليك