Header Ads

Header ADS

اضافة شريط متحرك عند تمرير الصفحة لمدونات بلوجر

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

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

اضافة شريط متحرك عند تمرير الصفحة لمدونات بلوجر

صورة من الإضافة


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

اضافة شريط متحرك عند تمرير الصفحة لمدونات بلوجر

اضافة شريط متحرك عند تمرير الصفحة لمدونات بلوجر


أكواد اللإضافة بسيطه جدا ليست بالأكواد الكثير من باقى الإضافات ، او شئ سوف تبحث عن هذا الوسم]]></b:skin>وتقوم بوضع الكود التالى فوقه.

.progress-bar {height: 4px;background: #E74C3C;width: 0%;position: fixed;z-index: 9999;bottom: 0;}

الأن سوف تبحث عن هذا الوسم<body>وتقوم بوضع الكود التالى فوقه ، فى بعض القوالب سوف يكون الوسم مخالف مثل الصورة التاليه ، يمكنك أن تبحث فقط عن الوسم هكذا<bodyوتقوم بوضع الكود اسفله.

اضافة شريط متحرك عند تمرير الصفحة لمدونات بلوجر

<div class='progress-bar' id='myBar'/>

الأن ما اخر كود وسوف يكون عليك وضعه فوق هذا الوسم</body>وهذا الوسم يكون قبل اخر وسم فى قوالب بلوجر.

<script type='text/javascript'>
//<![CDATA[
window.onscroll = function() {myFunction()};
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
//]]>
</script>

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

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

Aucun commentaire

Fourni par Blogger.