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

الصفحات

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

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

يمكنكم معاينة الاضافة عبر هذا الرابط

معاينة الاضافة


 ولأضافة هذه الاضافة الى مدونة بلوجر  سنقوم بنسخ الكود التالى

<style>
    #rocketbacktotop{
    background: url('http://1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png') 0 0 no-repeat;
    height: 130px;
    width: 72px;
    padding:5px;
    position:fixed;
    bottom: 5px;
    right: 5px;
    cursor:pointer;
        z-indez:1;
    }
      #rocketbacktotop:hover{
        background:url(http://1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
    background-position: 0 -142px;
    }
    </style>
    <!-- Back to top button by Dabourphone -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).scroll(function(){if($(this).scrollTop()>100)
    {$("#rocketbacktotop").removeAttr("href");$("#rocketbacktotop").stop().animate(
    {bottom:"0"},{duration:100,queue:false})}
    else{$("#rocketbacktotop").stop().animate({bottom:"30000"},
    {duration:8000,queue:false})}});$(function()
    {$("#rocketbacktotop").click(function()
    {$("html, body").animate({scrollTop:0},"slow");
    return false})});
    //]]>
    </script>
    <!-- Code provided to you by
http://3rbaway.blogspot.com/2016/12/add-rocket-back-to-top-blogger.html
-->
    <a href='#' id='rocketbacktotop'></a>

ثم وضعه داخل أداة HTML  ثم الحفظ  ومبروك عليك الاضافة

ويمكنكم متابعة هذه التدوينة



تعليقات

4 تعليقات
إرسال تعليق

إرسال تعليق