【博客美化】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);
}




相关文章
|
4月前
404错误页面简约清新源码 非常好看
404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
25 0
404错误页面简约清新源码 非常好看
|
7月前
好看流光风格个人主页源码
这是一款好看流光风格个人主页HTML源码
62 1
好看流光风格个人主页源码
|
JavaScript 前端开发
【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1504 0
|
JavaScript
【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1572 0
|
移动开发 前端开发
一套简约漂亮的响应式博客园主题皮肤分享给你们
一、背景   最近在自己博客园逛的时候,总会有一个感觉,真是太丑了,然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统,上网一搜才发现,原来我们可以自定义博客的布局以及样式的,那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件,然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。
1855 0
|
前端开发 JavaScript
博客园自定义皮肤扁平化设计
博客园自定义皮肤设计 效果抢先看 眼见为实!!!戳戳戳》》》marsggbo的博客园 1. 博客皮肤 首先将博客皮肤选为BlackLowKey 2. 代码设置 1) 页面定制CSS代码 body{ background: url(http://dik.
1161 0