To increase your blog garden background, avatar and top small rocket

Personal Avatar

Add the following code bulletin board at the side of the blog

 <img src="https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_gz.jpg" alt="果咩的头像" class="img_avatar" width="250px" style="border-radius:50%">
 

background

Add the following code in the page at the custom css code

  
  body {
  color: #000;
  background: url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_lm.jpg
  ) fixed;
  background-size: 100%;
  background-repeat: no-repeat;
  font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
  font-size: 12px;
  min-height: 101%;
  }
  #home {
  opacity: 0.80;
  margin: 0 auto;
  width: 85%;
  min-width: 950px;
  background-color: #fff;
  padding: 30px;
  margin-top: 30px;
  margin-bottom: 50px;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  }
 

Return to top top small rocket

Add the following code in the footer html code

<style>
  #back-top {
       position: fixed;
       bottom: 10px;
       right: 5px;
       z-index: 99;
  }
  #back-top span {
       width: 100px;
       height: 100px;
       display: block;
       background:url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_123.png) no-repeat center center;
       background-size: contain;
  }
  #back-top a{outline:none}
  </style>
  <script type="text/javascript">
  $(function() {
      // hide #back-top first
      $("#back-top").hide();
      // fade in #back-top
      $(window).scroll(function() {
          if ($(this).scrollTop() > 500) {
              $('#back-top').fadeIn();
          } else {
              $('#back-top').fadeOut();
          }
      });
      // scroll body to 0px on click
      $('#back-top a').click(function() {
          $('body,html').animate({
              scrollTop: 0
          }, 800);
          return false;
      });
  });
  </script>
  <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

 

Guess you like

Origin www.cnblogs.com/guomie/p/11183885.html