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




相关文章
|
27天前
|
前端开发 UED 开发者
探索CSS的奇妙世界:实用技巧与窍门大汇总
在前端开发中,精通CSS是提升用户体验的关键。本文深入探讨了一系列实用的CSS技巧和窍门,帮助开发者在设计和布局中脱颖而出。从响应式文档布局到自定义光标,再到渐变阴影和文本列布局,本文涵盖了多种实用方法,适合新手和经验丰富的开发者。不断学习和运用这些技巧,助力您提升前端开发水平,为用户创造出色的网页体验。探索更多技巧,成就您的CSS大师之路!
44 1
探索CSS的奇妙世界:实用技巧与窍门大汇总
|
6月前
|
API
一个简约风的VitePress博客主题
前言 笔者的博客之前是使用 VuePress + reco主题 随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm 恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法 其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。 按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统
|
6月前
|
前端开发
前端知识笔记(三十一)———css实现水波纹效果(水球图)
前端知识笔记(三十一)———css实现水波纹效果(水球图)
243 0
|
前端开发 Java C++
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
|
前端开发 容器 Web App开发
如何用纯 CSS 创作锡纸撕开的文字效果
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/WgxbaZ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1062 0
|
JavaScript 前端开发
【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1496 0