404
الصفحة او الكلمة التي تبحث (ي) عنها لا يوجد ما يطابقها

السبت، 4 يونيو، 2016

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


إضافة جديده بعد توفق للمدونة عن النشر هى اضافة ليست بجديده ولكن احببت ان اشاركها معكم وهى إضافة أضافة النسبة المئوية في شريط التمريرالجانبى للمدونة وانا اعنقد انها سوف تعجب الكثيرون من المدونين ولكى لا اطيل عليكم يمكنكم مشاهدة المعاينة للإضافة من الرابط التالى .



شرح التركيب

1- قم باخذ نسخة اختياطية من قالب مدونتك قبل عمل اى شئ وتركيب اى شئ

2- قم بالبحث فى قالب مدونت عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقه - قبله 

#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#F74047;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#F74047;
}

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(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>


4- قم بالبحث عن الوسم <body> ثم قم بوضع الكود اسفل منه

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

5- قم بحفظ القالب ومبروك عليك الإضافة

وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

مواضيع أخر من المدونة

شارك الموضوع ليستفيد الجميع

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر