Go To Top
Hot Category
الشامل نت

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



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

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

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

 (ملاحظة: قبل تحرير أي كود HTML ، يجب عمل نسخة احتياطية من القالب بأكمله.)

من هنا ، ابحث داخل قسم الاكواد <head> ......... </head> للعثور على الكود أدناه:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
إذا وجدت هذا الرمز ، فهذا يعني أن القالب الخاص بك يمكّن هذه الخاصية ، واذا لم تجده فقم بوضع الكود أعلى علامة </head> . الآن انقر على زر حفظ القالب.
الخطوة الثانية: اضافة كود CSS.

قبل تنفيذ رمز الزر "العودة إلى الأعلى" ، سيتعين علينا إضافة جزء من كود CSS قبل الامر´´ ]]> </ b: skin> ´´ مباشرةً.
/* CSS For Back To Top Button*/
.back-to-top-by-tl-point {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top-by-tl-point:hover {
text-decoration: none;
}
الخطوة النهائية: اختر الزر الخاص بك.

آمل أن تكون قد فعلت المهام المذكورة أعلاه بنجاح. يمكنك الآن كل ما عليك هو اضافة الكود التالي ولصقها قبل علامة "</body>" في القالب
<!--Smooth Back to Top Button Start-->
<script type='text/javascript'> jQuery(document).ready(function() var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top-by-blog-ornate').fadeIn(duration); } else { jQuery('.back-to-top-by-blog-ornate').fadeOut(duration); } }); jQuery('.back-to-top-by-blog-ornate').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script><a class='back-to-top-by-tl-point' href='#'><img alt='Back To Top' src='https://4.bp.blogspot.com/-NYi9bG32c1o/WU02P1gv71I/AAAAAAAAAEo/NcFWqK1nro4ltpSGkw0OPGO_3B1_WDzZgCPcBGAYYCw/s1600/back-to-top-icon-by-blog-ornate-1.png'/></a> 
<!--Smooth Back to Top Button End-->
الامر الذي اشرة اليه في اول المقالة وهو امكاننية تصميم صورة الزر الذي تريده عن طريق احد محررات الصور ورفعها في احد المواقع واخذ الرابط ووضعه في داخل الكودالسابق بدل الرابط الملون بالابيض او البحث عن صورة في جوجل عن زر يناسبك واخذ رابطه واضافته الي الكود السابق .

نأمل أن يعمل الزر على مدونتك بنجاح . في الواقع ، يتم اختبار كل هذه الأزرار وتعمل بشكل رائع مع قوالب المدونات . إذا كنت قد اتبعت الخطوات الثلاث بدقة ، فيجب أن تعمل هذه الأزرار على مدونتك بشكل عادي .
لتحميل اللعبة بأقصى سرعة أكتب تعليق أسفل الموضوع لمضاعفة سرعة التحميل
قم بوضع تعليقك هنا هناك تعليقان (2):
  1. السلام عليكم
    بارك الله مجهوداتك
    قمت باضافة زر الرجوع كما شرحت وتم بنجاح إلا أنّه عند عرض المدونة يزهر على اعلى الصفحة هذه العبارة: /* CSS For Back To Top Button*/ .back-to-top-by-tl-point { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; font-
    size: 12px; padding: 1em;
    display: none; } .back-to-top-by-tl-point:hover { text-decoration: none; }
    فما الحل وهذا عنوان المدونة: https://alhilely.blogspot.com/
    وهذا عنوان بريدي الالكتروني: alhileliya2021@gmail.com
    مع الشّكر الجزيل

    ردحذف
    الردود
    1. وعليكم السلام
      هذا يحدث عندما يكون الكود غير مكتوب بطريقة صحيحة فيقرأه المتصفح علي انه نص وليس كود
      لذلك تأكد اخي من أي خطأ في نقل الكود فالمشكلة منه

      حذف

«
»