كلمة الفريق

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

التعليقات : 1 | تعليقات الفيسبوك (
0
) تم النشر مُنذ سبتمبر 28, 2018 المشاهدات : 0 تقييمك للموضوع :
للإبلاغ عن رابط معطوب اضغط هنا

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

إعدادات النص
A+A-


فــي هــذه الـتـدويــنــة سـنــشــرح كـيـفــيــة إضــافــة هــده الإضــافــة الـجـمـيــلــه والـخـفـيــفــة، والــتــي تـعــطــي جـمـالــيــة فــي مـدونــتــك عــلــى الـشــريــط الـجـانــبــي، وهــي مـفــيــدة لــزوار مـدونــتــك اذ يـتـمــكــن الــزائر مــن مـعــرفــه نـهــايــة وطــول مـحــتــوى الـصـفــحــة لأنــهــا عـنــدمــا يــمــرر لأســفــل الـصـفــحــة يـنـتــهــى الــعــد إلــى 100% وعـنــدمــا يـصــعــد إلــى الأعــلــى يــعــد عــد تـنــازلــي مــن 100% إلــى0%.
اترككم الان مع المعاينة والشرح:
مراحل تركيب الإضافة
  1. ادخل إلى لوحة تحكم المدونة في بلوجر
  2. اختر قالب المدونة التي تود تطبيق الشرح فيها
  3. اضغط على تحرير HTML
  4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه 
    5. #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; }

    * الأكــواد الــمـحــدده بـالــون الاحـمــر هــي خـاصــه بـلــون الاداة، يـمــكـنــك تـغــيـرهــا ان أردت.
  5. قم باضافة الكود لتالي بعد/اسفل <body> مباشره
  6. الخطوة الاخيره اضف الكود التالي فوق/قبل </body>
    7. <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>
إن واجـهـت أي مـشـاكـل فـبـاب الــتــعــلـيـقـات مـفـتـوح... بــالــتـوفـيـق

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!

إذا وجدت هذا الموضوع مفيد يمكنك مشاركته مع زوار مدونتك، أو نشره في المنتديات.




هناك تعليق واحد:

يمكنك وضع تعليقك هنا

الاشتراك في: تعليقات الرسالة ( Atom )

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