اضافة النسبة المئوية لبلوجر

السلام عليكم ورحمة الله و بركاته 

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

طريقة التركيب

اذهب الى قالب ثم تحرير HTML ثم ابحث عن 

]]></b:skin>

ثم ضع الكود التالى فوقه مباشرة

  #scroll{

display:none;

position:fixed;

top:0;

left:20px;

z-index:500;

padding:3px8px;

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:4pxsolidtransparent;

border-left-color:#2187e7;

}

2- ثم قم بالبحث على 

</head>

وضع أسفله هذا الكود

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

3- قم بالبحث على وسم 

</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);

});

و مبروك عليك الاضافة :) 

لطلب التعديل على الاضافة - اترك تعليقا 

من فضلك اضغظ لايك لمشاهدة لينك التحميل

لا تبخل باعجــاب أو مشاركــة للمقــال

→ اعجــــاب

Tweet

→ مشــاركــة