给你的博客园增加背景,头像和top小火箭

个人头像

在博客侧边公告栏处添加下列代码

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

背景

在页面定制css代码处 添加下列代码

  
  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);
  }
 

返回top顶部小火箭

在页脚html代码添加下列代码

<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>

原文地址:https://www.cnblogs.com/guomie/p/11183885.html

时间: 2024-10-10 02:09:19

给你的博客园增加背景,头像和top小火箭的相关文章

博客园上传头像jpg

博客园上传头像 因为博客园无法上传jpg格式,只能上传gif的格式. 而网上的图片连接又不稳定,所以特地在随笔里上传一个图片,用于获取连接. 原文地址:https://www.cnblogs.com/zsboke/p/11841817.html

博客园添加背景图片

目录 步骤 1.在博客园的相册中添加需要作为背景的图片 2.复制图片地址. 3.粘贴css代码. 参考 步骤 1.在博客园的相册中添加需要作为背景的图片 管理>相册,新建相册并上传图片,注意图片大小不能超过3m,我使用ps把图片的图像大小调小并导出为.jpg格式后满足了大小要求. 2.复制图片地址. 在相册中打开刚刚上传的图片(使用Firefox浏览器),点击查看原图(很重要!之前我没有点原图,导致图片分辨率极低),然后复制图片的地址. 3.粘贴css代码. 在博客园管理<设置中找到页面定制c

博客园页面添加返回顶部TOP按钮

1. 进入网页管理->设置 2. 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 #back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; } 3. 在"页脚Html代码&q

博客园背景图片更换

使用博客园的模板,感觉不好看而且用的人太多了,怎么办呢? 这时候我们可以更换博客园的背景 第一步:随便选一个模板(我用的是simplememory) 第二步:设置→博客设置→相册→上传图片→复制图片链接地址 第三部:粘贴css代码(不同模板的css代码是不同的) 博主提供simplememory的代码: /*simplememory*/#google_ad_c1, #google_ad_c2 {display:none;}.syntaxhighlighter a, .syntaxhighligh

基于react-native实现的博客园手机客户端

从五月初开始,中间抽出断断续续的业余时间,基于react-native,在博客园现有开放接口的基础上,实现了一个博客园手机客户端.由于博主没有ios开发环境,所以当前仅适配了android版本.出于学习和实践react-native的目的,UI呈现这一块完全凭自己所好,bug也有一些,更多是希望抛砖引玉,让大家感受到react/react-native为移动端开发带来的全新视觉和可能性. 一,相关链接1,react-nativehttps://github.com/facebook/react-

【转】 博客园自定义样式修改标签页的icon图标

有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢? 按照以下四步你也可以实现自定义标签图标. From To 第一步:挑挑拣拣 选一张icon图标(尺寸不要太大)不然加载会很慢 如果想通过自己的图片生成favicon,可以使用这个网站: Favicon Generator. For real. 第二步:传文档 在博客园的设置界面选择文档,将你喜欢的图片上传上来 第三步:写代码 在设置中的页脚Html代码中插入以下script脚本

如何快速的自定义博客园背景图片

博客园的主题背景风格基本是简洁朴素风格,毕竟淳朴码农的撸码知识共享圣地不需要花里胡哨,但是作为新一代的撸码青年,我还是忍不住把博客园简单的美化了一下 打开https://sm.ms/ 上传一张你喜欢的图片,这个网站很好使,可以上传图片然后可以马上生成一条图片链接,就不需要我们自己维护图片了 然后在博客园设置中自行修改样式OK啦 background:url(https://i.loli.net/2018/07/24/5b56a0f45b6b6.jpg) no-repeat fixed; back

博客园个人博客增加打赏功能心得

1.收款码1.1 保存把自己的支付宝和微信二维码收款码(注意是收款码而不是付款码,别搞错)两个图片保存到电脑,并使用图片编辑工具(Windows自带画图软件,或者QQ等其他截图工具都可以)只截取二维码部分即可. 1.2 上传进入个人博客,点“管理”,再点“相册”,添加好相册名称(类似文件夹名称),并上传这两个收款二维码,然后可以在图片上面右击鼠标查看或复制图片网址. 2.JS2.1 开通博客JS权限点“设置”,找到“博客侧边栏公告(支持HTML代码)”,点击[申请JS权限],这里需要填写理由,一

如何在博客园随笔中增加章节导航

在博客园阅读了很多优秀的博文,内容清晰,结构合理,开篇还有目录索引,自己也用博客园很长时间了,今天补充下如何自己手动生成博文的章节目录索引. 阅读目录: 1. 文章撰写 2. 添加锚点 3. 添加目录并建立锚点链接 4. 附录 1. 文章撰写 把需要的文章内容先写完整,章节标题添加标题3的样式(在TinyMCE编辑器下,标题3的样式最适宜). 文章内容应精炼,结构清晰,逻辑简单,中心思想明确.单一. 2. 添加锚点 在完成内容的标题位置添加锚点,博客园默认编辑器TinyMCE编辑器中“插入/编辑