【博客美化】01.推荐和反对炫酷样式

简介: 【博客美化】01.推荐和反对炫酷样式


阅读目录

回到顶部

博客园美化相关文章目录:

【博客美化】01.推荐和反对炫酷样式

【博客美化】02.公告栏显示个性化时间

【博客美化】03.分享按钮

【博客美化】04.自定义地址栏logo

【博客美化】05.添加GitHub链接

【博客美化】06.添加QQ交谈链接

【博客美化】07.添加打赏按钮

【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

【博客美化】09.评论带头像,且支持旋转

【博客美化】10.图片预览放大

回到顶部

1.设置“推荐与反对”,固定在窗口的底部

进入自己的博客园->设置,将以下css代码添加到“页面定制CSS代码”

/*推荐和反对*/
#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0;
    _right: 17px;
    border: 1px solid #D9DBE1;
    background-color: #FFFFFF;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.icon_favorite {
    background: transparent url('https://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
    padding-left: 16px;
}
#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}

 

效果图如下:

图片.png

回到顶部

2.添加一个“关注一下楼主吧”

进入自己的博客园->设置,将以下css代码添加到“页脚Html代码”

View Code

图片.png

这个地方的GUID的获取可以通过以下方法获取:

  1.进入博客园http://www.cnblogs.com/,如果登陆了,请退出登录,然后进入自己的主页http://www.cnblogs.com/xxxx/

  2.快捷键F12打开网页调试工具

  3.用查找按钮选中“添加关注”这个button

  4.复制Guid,然后替换上面的Guid

图片.png图片.png

回到顶部

3.其他样式

图片.png

/*推荐和反对*/
#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}




目录
打赏
0
0
0
0
327
分享
相关文章
|
4月前
404错误页面简约清新源码 非常好看
404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
25 0
404错误页面简约清新源码 非常好看
|
7月前
好看流光风格个人主页源码
这是一款好看流光风格个人主页HTML源码
57 1
好看流光风格个人主页源码
|
7月前
|
API
一个简约风的VitePress博客主题
前言 笔者的博客之前是使用 VuePress + reco主题 随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm 恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法 其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。 按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统
前端知识笔记(三十一)———css实现水波纹效果(水球图)
前端知识笔记(三十一)———css实现水波纹效果(水球图)
295 0
蓝桥杯 —— Web前端(页面布局类【Flex 布局】)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(页面布局类【Flex 布局】)【标题即题目链接,点击查看具体要求】
220 0
网站美化代码系列(持续更新)
网站美化终极奥秘:创作第一,体验第二,避免繁杂,简洁为上!
391 0
网站美化代码系列(持续更新)
一款三栏简约typecho主题 Lanstar v2.2.0跨年版
自动适配各种大小尺寸屏幕,表情功能可能是目前所有用心主题的标配了
166 0
一款三栏简约typecho主题 Lanstar v2.2.0跨年版
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
创意代码之文字特效合集
因为写的几个创意代码的特效都十分的简单,就合并到这篇文章里了,文章会从实现思路和遇到的问题两方面讲解实现如何现实这些简单的特效。
348 0
创意代码之文字特效合集
AI助理

阿里云 AI 助理已上线!

快来体验一下吧。