博客园样式

番茄西红柿发布于2019-04-23 13:40 / 3485人阅读

摘要：美化博客侧边栏公告博客园侧边栏样式插入时钟插入访客来源插入总访客数插入通讯组件网易音乐将生成后的代码进博客园后台设置博客侧边栏公告支持代码支持代码输入框中下面的是笔者博客的样式，不做解释。

博客园侧边栏样式

插入时钟：
http://www.blogclock.cn/
插入访客来源：
http://s11.flagcounter.com/more/Fe64/
插入总访客数：
http://www.amazingcounters.com/
插入QQ通讯组件：
https://connect.qq.com/intro/wpa

网易音乐：

https://www.cnblogs.com/hujunzheng/p/4702282.html

将生成后的代码copy进博客园后台设置—博客侧边栏公告（支持HTML代码）（支持JS代码）输入框中

下面的是笔者博客的样式，不做解释。

如果读者想设置自己的样式可参考大神的样式设置，很详细也很炫酷：博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)

公告栏赞赏


<meta charset="UTF-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
<script>
$(function(){
    $(".pay_item").click(function(){
        $(this).addClass(checked).siblings(.pay_item).removeClass(checked);
        var dataid=$(this).attr(data-id);
        $(".shang_payimg img").attr("src","https://www.cnblogs.com/images/cnblogs_com/tynam/1353054/t_"+dataid+".jpg");
        $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
    });
});
function dashangToggle(){
    $(".hide_box").fadeToggle();
    $(".shang_box").fadeToggle();
}
script>

<style>
.content{width:80%;margin:10px auto;}
.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
.shang_box{width:430px;height:430px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
.shang_box img{border:none;border-width:0;}

.dashang{display:block;margin:2px auto;color:rgba(255, 255, 255, 1);text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
.dashang:hover{opacity:0.8;padding:2px;font-size:17px;}
.dashangText{display:block;ne-height:25px;color:rgba(255, 255, 255, 1);text-align:center;text-decoration:none;border-radius:13px;font-weight:2px;font-size:9px;transition: all 0.3s;padding-bottom:15px;}
.dashangText:hover{opacity:0.8;ont-size:14px;}

.shang_close{float:right;display:inline-block;}
        .shang_logo{display:block;text-align:center;margin:20px auto;}
.shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background:#fff;font-family: Microsoft YaHei;margin-top: 7px;margin-right:2px;}
.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
.shang_payimg{width:140px;border:6px solid rgba(163, 82, 225, 1) ;margin:0 auto;border-radius:3px;height:140px;}
.shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
.pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
.radiobox{width: 16px;height: 16px;background: url(https://www.cnblogs.com/images/cnblogs_com/tynam/1353083/o_radio2.jpg);display: block;float: left;margin-top: 5px;margin-right: 14px;}
.checked .radiobox{background:url(https://www.cnblogs.com/images/cnblogs_com/tynam/1353083/o_radio1.jpg);}
.shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
.shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
.shang_info{clear:both;}
.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}
style>

<p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="支持一下">

云服务器 GPU云服务器博客园博客园webrtc wcf博客园 android博客园

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2192.html

设置博客园标题样式

摘要：博客园设置博客设置，点击页面上的权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持代码，博客园也会在用户邮箱给你发送是否开通权限的邮件。1.向博客园申请js权限　我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持...

番茄西红柿 2019-04-23 13:30 评论0 收藏0
博客园自定义样式

摘要：个人比较喜欢用来编写博客，但是博客园自带的编辑器真的不是很友好啊。。。。。还好，博客园比较人性化的有页面样式的自定制功能。碎碎念：已经很长时间没有更新过博客了，分析一下，一个是太懒了。。。所以很久没整理一下了。还有就是嫌弃博客园默认的博客界面真的太丑了，作为颜控的我真的无法忍受啊。个人比较喜欢用makedown来编写博客，但是博客园自带的编辑器真的不是很友好啊。。。。。还...

ASCH 2019-08-29 14:16 评论0 收藏0
博客园代码黑色主题高亮设置

摘要：之前做了博客园自定义样式的相关设置，博客园界面变得顺眼一点了。但是代码块还是看着比较变扭，习惯黑色主体编辑器的我，颜控的我，不能忍啊。碎碎念：貌似现在喜欢写博客之前先叨叨一下。。。。之前做了《博客园自定义样式》的相关设置，博客园界面变得顺眼一点了。但是代码块还是看着比较变扭，习惯黑色主体编辑器的我，颜控的我，不能忍啊。所以还是改改改。小提示：具体的操作实现参考GitHub：h...

Blackjun 2019-08-29 14:20 评论0 收藏0
个人博客园样式、背景及细节美化过程

摘要：踩坑注意导入后要勾选禁用默认否则会造成各种显示问题我的文件可以右键查看网页源代码获取，使用时基于主题，懒得折腾的可以直接下载。主页美化：主要参考嘻哈烧饼的美化，在TA的基础上增加了对主页背景、色调以及侧边栏的调整原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html 修改博客园背景的代码如下（在原帖使用的css文件中修改）： body ...

番茄西红柿 2019-04-23 13:10 评论0 收藏0
前端小白也能快速学会的博客园博客美化全攻略

摘要：前端小白也能快速学会的博客园博客美化全攻略呦，博客园的自我修养是什么第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔美化方法论简介一般而言，需要选一个默认的，然后在该基础上调整。或者也可进博客园园子页面，发状态博客园团队，申请开通权限。前端小白也能快速学会的博客园博客美化全攻略 A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔~ 美化方法论简...

StonePanda 2019-08-23 15:09 评论0 收藏0