تثبيت زر خفيف الرجوع إلى الأعلى باستخدام SVG لمدونة Blogger

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

كيفية تثبيت زر الرجوع إلى الأعلى باستخدام SVG

أولاً ، افتح Blogger> انقر على قائمة المظاهر وزر تعديل HTML> أضف هذا الرمز قبل </head>
<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>
بعد ذلك ، أضف الرمز أدناه قبل (فوق)  </body>
<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>
ثم انقر فوق الزر حفظ السمة وشاهد النتائج على مدونتك.
بأمكانك الحصول على الأكواد الموجودة في هذا المقالة ز
 إضغط هنا
هذا كل شيء للنشر اليوم كيفية تثبيت زر الرجوع إلى الأعلى باستخدام SVG من موقع EXE and APK



مدير الموقع :Sory Mohajer ⚡ تابع معنا أهم أخبار التقنية و مراجعة أهم هاتف و حاسوب متوفر وتعلم سيو الموقع https://www.exe-apk.com/موقع EXE and APK مجاني 100%
رسائل أحدث رسائل أحدث رسائل أقدم رسائل أقدم

المزيد من المشاركات

جرب الآن إنشاء تحويل آمن للروابط عبر موقعنا

تعليقات

إرسال تعليق