اخر الاخبار

breaking/انترنيت/9
قوالب

2:26 م

تكبير النص تصغير النص أعادة للحجم الطبيعي

أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذابك سوف اقدمها لكم كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين الرائع اظن ان اغلبكم شاهدها على مدونات اخرى .هي اضافه جميله وخفيه تعطي جماليه في مدونتك على الشريط الجانبي وهي مفيدة لزوار مدونتك اذ يتمكن الزائر من معرفه نهاية وطول محتوى الصفحه لانها عندما يمرر لاسفل الصفحه ينتهى العد الى 100% وعندما يصعد الى الاعلى يعد عد تنازلي من 100 الى 0% . 

شرح و كيفية تركيب + معاينة الاضافة من هنا  :
  1. داخل القالب تحرير html 
  2. فوق هذا الوسم  <b:skin/> نضع الكود التالي  : 

    #scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#32C2A5; 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:#369fcf; }
    1. بعد دلك اضف الكود التالي فوق هدا الوسم  <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>
    1. بعد دلك اضف الكود التالي أسفل هدا الوسم  <body>  
    <div id='scroll'></div>

    إرسال تعليق