前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【博客美化】01.推荐和反对炫酷样式

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

作者头像
悟空聊架构
发布2018-05-18 11:29:06
6370
发布2018-05-18 11:29:06
举报
文章被收录于专栏:悟空聊架构 | 公众号

博客美化:

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

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

代码语言:javascript
复制
/*推荐和反对*/
#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('http://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;
}

 效果图如下:

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

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

代码语言:javascript
复制
<script type="text/javascript" language="javascript"> 
//为右下角推荐推荐区域添加关注按钮
window.onload = function () {
    $('#div_digg').prepend('<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="cnblogs.UserManager.FollowBlogger(\'9a35f2c7-18ab-e111-aa3f-842b2b196315\');" href="javascript:void(0);" style="font-weight: bold; padding-left:5px;">关注一下楼主吧</a> </div>');
}
</script>

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

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

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

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

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

3.其他样式

代码语言:javascript
复制
/*推荐和反对*/
#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);
}

作  者: Jackson0714 出  处:http://www.cnblogs.com/jackson0714/ 关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教! 版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。 特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我 声援博主:您的鼓励是作者坚持原创和持续写作的最大动力!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-09-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.设置“推荐与反对”,固定在窗口的底部
  • 2.添加一个“关注一下楼主吧”
  • 3.其他样式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档