• كلمة الفريق

    في عصرنا يوجد مئات الآلاف من المدونين والمدونات ، البعض يعمل بشغف وحب والآخر يعمل بشكل إنتاجي للكسب فقط ! أما نحن .. نحب ونعشق وندوووب في دباديب التدوين ونؤمن أننا سنقوم بإضافة كبيرة للمحتوى العربي ولو بشيئ بسيط ، نتعلم بشكل مستمر نشارككم بكل جديد ، نحاول المساعدة نحب أصدقاءنا ، نهتم بإستفساراتهم كما لو كانت ملكنا، فريقنا فريق واحد رغم أنه متكون من شخص واحد :) لكنه يعمل بجنون

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



    أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذالك سوف اقدمها لكم،كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين الرائع اظن ان اغلبكم شاهدها على مدونات اخرى .
    هي اضافه جميله وخفيه تعطي جماليه في مدونتك على الشريط الجانبي ،وهي مفيدة لزوار مدونتك اذ يتمكن الزائر من معرفه نهاية وطول محتوى الصفحه لانها عندما يمرر لاسفل الصفحه ينتهى العد الى 100% وعندما يصعد الى الاعلى يعد عد تنازلي من 100 الى 0% .
    اترككم الان مع المعاينة والشرح
    طريقة التركيب
    1. اذهب الى تحرير لقالب
    2. باستعمال CTRL+F قم بالبحث عن ]]></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;
    }

    *الاكواد المحدده بالون الاحمر هي خاصه بلون الاداة ، يمكنك تغيرها ان اردت
     3. قم باضافة الكود لتالي بعد/اسفل <body> مباشره
    
    
    <div id='scroll'></div>
    4. الخطوة الاخيره اضف الكود التالي فوق/قبل </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>
    ان واجهت اي مشاكل فباب التعليقات مفتوح . . . بالتوفيق 😍

    أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذالك سوف اقدمها لكم،كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين...

    روابط الموضوع للنسخ

    رابط
    HTML
    BBCode
    يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
    أضافة النسبة المئوية في شريط التمرير

    أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذالك سوف اقدمها لكم،كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين...

    2 التعليقات
    كيف تعلق ؟

    avatar

    السلام عليكم
    انا يا خي ما يظهر <body>

    avatar

    اخي هذه الوسم موجود بكل القوالب
    ابحث عنه هكذا
    body>

    نموذج الاتصال

    الاسم

    بريد إلكتروني مهم

    رسالة مهم