31 ديسمبر، 2016

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

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

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

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


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

<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  ثم الحفظ  ومبروك عليك الاضافة

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





هناك تعليقان (2)

تعريب كن مدون جميع الحقوق محفوظة لــ مدونة عرباوى | متعة الشروحات المبسطة 2016 ©