صفحات
تثبيت زر خفيف الرجوع إلى الأعلى باستخدام SVG لمدونة Blogger
سأشارككم اليوم في قسم Blogger أفضل طريقة حول كيفية تثبيت زر الرجوع إلى الأعلى باستخدام SVG.
 |
| تثبيت زر خفيف الرجوع إلى الأعلى باستخدام 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%
رسائل أحدث
رسائل أحدث
رسائل أقدم
رسائل أقدم
تعليقات