مدونة هلا تك

اضافة زر الصعود لأعلى بتأثير التقدم

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

الأضافة موجودة على القوالب الحديثة جدا مثل قالب Plus UI أ قالب سيو بلس 8

أحضرت لكم هذه الأضافة ليمكنك استخدامها بشكل سهل و مبسط

شرح التركيب بالفيديو

طريقة التركيب

أولا الذهاب الى المظهر و البحث عن ~~</head>~~ ووضع الكود التالي أعلاه

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

ثانيا البحث عن ~~]]></b:skin>~~ و لصق الكود التالي أعلاه

/* Back to top with progress */
@-webkit-keyframes border-transform{0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}}
.SK-to-top{background:#fff;position:fixed;right:25px;bottom:25px;height:46px;width:46px;cursor:pointer;display:block;border-radius:99em;box-shadow:inset 0 0 0 2px rgb(0 0 0 / 10%);z-index:10000;opacity:0;visibility:hidden;transform:translateY(-15px);transition:all .3s linear}
.SK-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.SK-to-top::after{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;color:rgba(0,0,0,0.3);left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:1;transition:all .3s linear}
.SK-to-top:hover::after{opacity:0}
.SK-to-top::before{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;opacity:0;background:black;-webkit-background-clip:text;-webkit-text-fill-color:transparent;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:2;transition:all .3s linear}
.SK-to-top:hover::before{opacity:1}
.SK-to-top svg path{fill:none}
.SK-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear}

ثالثا البحث عن ~~</body>~~ و لصق الكود التالي أعلاه

<div class='SK-to-top'>
<svg class='progress-circle svg-content' height='100%' viewBox='-1 -1 102 102' width='100%'>
<path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98'/>
</svg>
</div>

<script>
//<![CDATA[
// back to top with progress
!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".SK-to-top path"),b=a.getTotalLength();a.style.transition=a.style.WebkitTransition="none",a.style.strokeDasharray=b+" "+b,a.style.strokeDashoffset=b,a.getBoundingClientRect(),a.style.transition=a.style.WebkitTransition="stroke-dashoffset 10ms linear";var c=function(){var c=$(window).scrollTop(),d=$(document).height()-$(window).height();a.style.strokeDashoffset=b-c*b/d};c(),$(window).scroll(c),jQuery(window).on("scroll",function(){jQuery(this).scrollTop()>50?jQuery(".SK-to-top").addClass("active-progress"):jQuery(".SK-to-top").removeClass("active-progress")}),jQuery(".SK-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);
//]]>
</script>

ثم قم بالحفظ و مبروك عليك الأضافة

ملاحظة مهمة

هذه الأضافة حصرية على مدونة هلا تك

وفي الختام !

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