الأحد، 15 سبتمبر 2013

اضافه نسبه مئويه فى شريط التمرير للبلوجر

اضافه نسبه مئويه فى شريط التمرير للبلوجر
السلام عليكم ورحمه الله وبركاته
فى الماضى لقد عرضت لكم طريقه عن كيف تغير اداه التنقل فى البلوجر وتغير لونها وهكذا . ولكن كنت تتسأل اذا كان يوجد اضافه لوضع نسبه مئويه ؟ الاجابه نعم . وما هى فائدتها ؟ الفائده التى تعود منها ليعرف الزائر كم المسافه التى قطعها فى المدونه أو ما المتبقى من الصفحه حتى يقرأها حتى لا يصاب بالملل . ففى هذا المقال سوف اعرض لكم كيف يتم وضع نسبه مثويه فى شريط التمرير الخاص بمدونتك البلوجر :] .

ننصحك بقراءه هذا الموضوع : تغير اداه التنقل فى المدونه بشكل جميل

ملحوظه : انت الان يمكنك معاينه الاداه من هنا حتى تتأكد ان الاداه تعمل معك عندما تصعد وتهبط

كيفيه تركيب الاضافه الى المدونه

1.  اذهب الى مدونتك ---> القالب --> تحرير القالب

2.  اضغط CTRL+ F فى المربع الذى به الاكواد

3.  ابحث عن هذا الكود ]]></b:skin> ثم ضع الكود الذى بالاسفل فوقه مباشرة


#scroll {display: none;position: fixed;top: 0;right: 20px;z-index: 500;padding: 3px 8px;background-color: #2187e7;color: #fff;border-radius: 3px;}#scroll:after {content: ” ”;position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: #2187e7;}


4.  ثم ابحث عن هذا الكود </head> وتحته مباشرة ضع هذا الكود الذى بالاسفل


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

5.  ثم قم بالبحث عن هذا الكود ايضا  </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>

مبروك تم التركيب بنجاح احفظ قالبك وشاهد التغير
أتمنى ان يكون الموضوع عجبكم :] .

MOHAMED TAHSEEN

محمد تحسين طالب فى كليه تجاره. أهتم بعالم المعرفه والتكنولوجيا الحديثه والمتطوره وأمل ان اكون ذات يوما من المبرمجين والمسوقين الالكترونين فى مجال الانترنت ونحاول جاهدين فى مدونه وسيله ان نقدم كل ما يخص المعرفه والتكنولوجيا فتابعونا على المواقع الاجتماعيه ليصلكم كل تحديثاتنا
:Comment With
!Choose Wisely

هناك تعليقان (2) :

 
: POWERED BY Powered By Blogger Built with jQuery Built with CSS3
Re-Designed by Mohamed Tahseen