اضافة زر الصعود الى اعلى الصفحة في مدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

نقدم لكم اليوم اضافة زر لمدونات بلوجر الذي يمكن الزوار من الصعود الى اعلى الصفحة بنقرة انا اعرف جيدا ان هناك الكثير من المدونات لديها مثل هذه الاضافة ولكن اقدم لكم هذه الطريقة مميزة عن غيرها يمكنك مشاهدة الزر في مدوناتي


للمعاينة إضغط هنا

طريقة اضافة الزر
1.اذهب الى لوحة التحكم في مدونتك اختر القالب
2.تحرير html
3.قم بالبحث عن الرمز </body> ثم اضف الكود التالي فوق الرمز بودي




<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>إلى أعلى الصفحة </a>

ملاحظة هامة إذا كان متوفر احد اصدارات ajax الكود باللون الاحمر لا تقم بإضافته مرة أخرى من أجل تجنب الاخطاء وعادةً يكون موجود فوق الرمز </head>
فقط ابحث عن هذه الكلمة ajax  اذا كانت متوفرة لا حاجة لإضافة

ثم اختر حفظ


هذا كل شيئ حظا طيبا
مشاركات أقدم المقال التالي
16 تعليق
  • mohamed jaber
    mohamed jaber 26‏/09‏/2013، 9:57:00 م

    b-(

  • mohamed jaber
    mohamed jaber 26‏/09‏/2013، 9:59:00 م

    ممكن بالله عليكم انا عايز شرح الاكواد ديت الابتسمات ممكن ؟ (h)

  • mohamed jaber
    mohamed jaber 26‏/09‏/2013، 10:23:00 م

    بس بجد شكرا علشان أتعملت معاية ألف شكر بس عايز أعرف حاجة هوه السهم ده بيدغير الصورة بتاعتو مثلاا

    وشكرا كتير

  • مداد الجليد
    مداد الجليد 26‏/09‏/2013، 11:19:00 م

    شكراً لك
    في هذه الاضافة لا يمكن تغيير الصورة للأسف
    بالنسبة للابتسامات الإضافة موجودة في موضوع آخر بالمدونة

    • غير معرف
      غير معرف 14‏/02‏/2014، 10:47:00 م

      السلام عليكم

      أرجوا منك افادتي في حل هذه المشكلة

      عندما أضع هذه الاضافة يحدث لدي تعارض مع السلايدشو فيتوقف ويختفي..

      أرجو منك افادتي بحل لمشكلة هذا التعارض في الكودين.. أي ماذا اضيف للكود حتى يحل هذا التعارض

  • Halloween Wallpapers
    Halloween Wallpapers 05‏/03‏/2014، 3:48:00 م

    شكرا لك
    شكري للمعلوميات

  • دورة اساسيات الفوتوشوب
    دورة اساسيات الفوتوشوب 05‏/03‏/2014، 3:52:00 م

    شكرا على هذا المجهود
    دورة اساسيات الفوتو شوب

  • سعد
    سعد 03‏/04‏/2014، 3:36:00 م

    شكراً

    • مداد الجليد
      مداد الجليد 03‏/04‏/2014، 7:00:00 م

      عفواً سعد, أشكر مرورك

  • Unknown
    Unknown 25‏/07‏/2014، 8:22:00 م

    شكرا على الاضافة المميزة .... فقط انا عندي مشكل هو انه الاضافة بتطلع لي في جهة اليمين مما يصعب رؤيتها بسبب الكتابة.. انا اريد ان اضعها في جهه اليسار ممكن الطريقة بلييييييييييييز

    • مداد الجليد
      مداد الجليد 26‏/07‏/2014، 5:55:00 ص

      اهلا بك
      غير فقط الكلمة التي تمت الإشارة إليها باللون الازرق right وإستبدالها بكلمة left فقط

  • غير معرف
    غير معرف 14‏/06‏/2015، 10:02:00 م

    test

أضف تعليق
عنوان التعليق