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

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





اليوم وفى موضوع جديد وحصرى كالعادة من مدونه تقنيات الانترنت أقدم لكم تأثير جميل جدا بجوار شريط التمرير فى مدونات البلوجر وهو عبارة عن اضافة النسبة المئوية بجانب شريط التمرير ، وهذا يضفى على المدونة بعض من الرونق والجمال ، وهذا الموضوع لم تتناوله المدونات العربية لذلك قررت تناول الموضوع بعين من الرعاية وقررت تقديمه لكم فى هذه التدوينة ، ولكى لا أطيل عليكم فهيا بنا للمعاينة والشرح 
اذا كانت هذه أول زيارة لك لمدونة مدون >> فتفضل بالضغط هنا
  قبل أى شيء أريد أن أقول لك  
شرح التركيب 
اذهب للوحة التحكم >> القالب >> تحرير HTML 

 أولا : ابحث عن ]]></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;
}

  لتجعل النسبة المئوية على يمين المدونة غير كلمة left  بـــ right 

ثانيا : ابحث عن  </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>
ثم قم بحفظ القالب ومبروك عليك الاضافة 

ليست هناك تعليقات:

إرسال تعليق

تقنيات الانترنت تصميم محمد بقلوله جميع الحقوق محفوظة 2014

صور المظاهر بواسطة sndr. يتم التشغيل بواسطة Blogger.