كيفية اضافه زر العودة إلى الأعلى في مدونتك كيفية اضافه زر العودة إلى الأعلى في مدونتك كيفية اضافه زر العودة إلى الأعلى في مدونتك

القائمة الرئيسية

الصفحات

كيفية اضافه زر العودة إلى الأعلى في مدونتك

 كيف حالك يا اصدقاء ؟ في هذه المقالة سأقدم طريقه اضافه زر الصعود للاعلي في مدونات بلوجر .

كيفية اضافه زر العودة إلى الأعلى في مدونتك
كيفية اضافه زر العودة إلى الأعلى في مدونتك

ما هي وظيفة زر الرجوع إلى الأعلى في مدونات بلوجر ؟

يتم تركيب زر الصعود الي الاعلي في المدونات لتسهيل عودة الزوار إلى القمة (اعلي الصفحه) على الفور وعمليًا دون الحاجة إلى التمرير مرة أخرى.

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

عليك باذهاب الي صفحه تحرير القالب

أولاً ، افتح 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>


ثم قم بحفظ القالب  ثم شاهد النتائج. 

وسعدنا بزيارتكم في مدونه بتاع بلوجر

تعليقات

! الرجاء وضع اسم موقعنا في مصدر المشاركة عند اخذ اي شي من الوقع .بتاع بلوجر


التنقل السريع