ابداع — Abda3
https://iabda3.blogspot.com/2019/07/Progress-and-Download-scrollbar-for-Blogger.html?hl=en
اضافة شريط التقدم وشريط التحميل لمدونة بلوجر | مدونة ابداع
اسلام عليكم مرحبا بكم علي قناة و موقع ابداع و في هذه الحلقه سوف نقدم لكم |اضافة شريط التقدم وشريط التحميل لمدونة بلوجر | مدونة ابداع كما ذكرنا في العنوان
إضافة شريط التقدم : هو عباره عن شريط متحرك يظهر في اعلي المدونة كلما تحركت الي الاعلي او الي الاسفل
- اتجه الى بلوجر ثم اختر المظهر ثم اضغط على تعديل HTML
- ابحث عن الوسام
</body> والصق الكود التالي فوقه
<script type='text/javascript'> //<![CDATA[ // Progress Scrollbar $(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}}); //]]> </script>
- ابحث عن الوسم <body> والصق الكود التالي بعده/اسفله
<progress value='0' max='1'> <div class='progress-container'> <span class='progress-bar'></span> </div> </progress>ثم اضف الكود التالي قبل الوسم </head>
<style type='text/css'> /* Progress Scrollbar */ progress{position:fixed;right:0;top:0;width:100%;height:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#ea3023;z-index:1000} progress::-webkit-progress-bar{background-color:transparent;z-index:10} progress::-webkit-progress-value{background-color:#ea3023;z-index:10} progress::-moz-progress-bar{background-color:#ea3023;z-index:10} .progress-container{width:100%;background-color:transparent;position:fixed;top:0;right:0;height:3px;display:block;z-index:10} .progress-bar{background-color:#ea3023;width:0%;display:block;height:inherit;z-index:10} </style>
0 تعليقات
يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعدم نشر اي روابط اشهارية.