-->

Featured

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

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

ليست هناك تعليقات