博客园样式

本贴最后更新于 2247 天前,其中的信息可能已经渤澥桑田

前言

博客园自定义样式可以制作各种精美的效果,下面是我的博客园地址和制作方式:
我的博客园

首页样式

首页 html

<!-- 首页样式 --> <link href="http://files.cnblogs.com/files/liyunhua/cnblogBlack.css" rel="stylesheet" />

去广告

页面 css

#google_ad_c1,#div-gpt-ad-1320933818841-0,#google_ad_c2,#div-gpt-ad-1320933818841-1,#ad_under_google{ display:none; visibility:hidden; }

markdown 格式美化

页面 css

/* 文章标题样式(这个不是markdown里的标题) */ #topics .postTitle a { color: #000000; } /* 普通文字样式 */ #cnblogs_post_body p { margin: 18px auto; color: #000; font-family: Consolas, "Microsoft YaHei", monospace; font-size: 16px; text-indent: 0; } /* 标题样式 */ #cnblogs_post_body h1 { margin-bottom: 1em; margin-right: 5px; padding: 8px 15px; letter-spacing: 2px; background-image: linear-gradient(to right bottom, rgb(0, 188, 212), rgb(63, 81, 181)); background-color: rgb(63, 81, 181); color: rgb(255, 255, 255); border-left: 10px solid rgb(51, 51, 51); border-radius: 5px; text-shadow: rgb(102, 102, 102) 1px 1px 1px; box-shadow: rgb(102, 102, 102) 1px 1px 2px; } #cnblogs_post_body h2 { font-family: Consolas, "Microsoft YaHei", monospace; font-size: 26px; font-weight: bold; line-height: 1.5; margin: 20px 0; } #cnblogs_post_body h3 { font-family: Consolas, "Microsoft YaHei", monospace; font-size: 20px; font-weight: bold; line-height: 1.5; margin: 10px 0; } #cnblogs_post_body h4 { font-family: Consolas, "Microsoft YaHei", monospace; font-size: 18px; font-weight: bold; margin: 10px 0; } /* 标题样式设置结束 */ /* 去除双下划线斜体样式 */ em { font-style: normal; color: #000; } /* 无序列表 */ #cnblogs_post_body ul li { font-family: Consolas, "Microsoft YaHei", monospace; color: #000; font-size: 16px; list-style-type: disc; } /* 有序列表 */ #cnblogs_post_body ol li { font-family: Consolas, "Microsoft YaHei", monospace; color: #000; font-size: 16px; list-style-type: decimal; } /* 超链接 */ #cnblogs_post_body a:link { text-decoration: none; color: #002C99; } /* 引用 */ #topics .postBody blockquote { background: #FFFFFF; border: none; border-left: 5px solid #CCCCCC; margin: 2px 0; padding-left: 6px; padding-top: 0px; padding-bottom: 0px; min-height: 0; } /* 单行代码 */ .cnblogs-markdown code { font-family: Consolas, "Microsoft YaHei", monospace !important; font-size: 16px!important; line-height: 20px; border: 1px solid #ccc!important; padding: 0 5px!important; border-radius: 3px!important; line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block; } /* 多行代码, 引用 */ .cnblogs-markdown .hljs { font-family: Consolas, "Microsoft YaHei", monospace !important; font-size: 16px!important; line-height: 1.5!important; padding: 5px!important; }

访问次数统计

去注册一个

Amazing Counters - Free Web Counter Free Hit Counters

侧边公共栏

<div style="font-size:15px;font-weight:bold;">访问次数:&nbsp;<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3214316&c=9643261" alt="AmazingCounters.com" height="30"></a></div>

github 链接

页首 html

<a href="https://github.com/tianyunperfect"><img style="position: fixed; top: 0; right: 0; border: 0;z-index: 10000;" src="http://files.cnblogs.com/files/landeanfen/o_github.bmp"></a>

背景动画

页首 html

<!-- 背景动画 --> <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas> <script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>

添加目录导航

页面定制 CSS

/* 定制生成博客目录的CSS样式 */ #uprightsideBar{ font-size:16px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed; /* 将div的位置固定到距离top:150px,right:0px的位置, 这样div就会处在最右边的位置,距离顶部150px, 当然这两个值你可以自己改。 */ top:150px; right:0px; width: auto; height: auto; } #sideBarTab{ float:left; width:25px; box-shadow: 0 0 8px #877788; border:1px solid #00DDC00; border-right:none; text-align:center; background:rgb(0, 220, 0); } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:200px; min-height:101px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff; } #sideBarContents dl{ margin:0; padding:0; } #sideBarContents dt{ margin-top:5px; margin-left:5px; } #sideBarContents dd, dt { cursor: pointer; } #sideBarContents dd:hover, dt:hover { color:#A7995A; } #sideBarContents dd{ margin-left:20px; }

页脚 html

<!-- 生成博客目录的JS代码,两级目录 --> <script type="text/javascript"> /* 这段代码按H2、H3格式生成两级菜单 写博客按H2、H3格式写,不然生成不了 Markdown写作按##、###两级目录写 当然你也可以改写代码成三级菜单 参考:孤傲苍狼 zhang_derek 洪卫 2018-5-18 */ var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)*/ getElementPosition:function (ele) { var topPosition = 0; var leftPosition = 0; while (ele){ topPosition += ele.offsetTop; leftPosition += ele.offsetLeft; ele = ele.offsetParent; } return {top:topPosition, left:leftPosition}; }, /*获取滚动条当前位置 */ getScrollBarPosition:function () { var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; return scrollBarPosition; }, /* 移动滚动条,finalPos 为目的位置,internal 为移动速度 */ moveScrollBar:function(finalpos, interval) { //若不支持此方法,则退出 if(!window.scrollTo) { return false; } //窗体滚动时,禁用鼠标滚轮 window.onmousewheel = function(){ return false; }; //清除计时 if (document.body.movement) { clearTimeout(document.body.movement); } //获取滚动条当前位置 var currentpos =BlogDirectory.getScrollBarPosition(); var dist = 0; //到达预定位置,则解禁鼠标滚轮,并退出 if (currentpos == finalpos) { window.onmousewheel = function(){ return true; } return true; } //未到达,则计算下一步所要移动的距离 if (currentpos < finalpos) { dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; } var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 window.scrollTo(0, currentpos);//移动窗口 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出 { window.onmousewheel = function(){ return true; } return true; } //进行下一步移动 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); }, htmlDecode:function (text){ var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; }, /* 创建博客目录,id表示包含博文正文的 div 容器的 id, mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!), interval 表示移动的速度 */ createBlogDirectory:function (id, mt, st, interval){ //获取博文正文div容器 var elem = document.getElementById(id); if(!elem) return false; //获取div中所有元素结点 var nodes = elem.getElementsByTagName("*"); //创建博客目录的div容器 var divSideBar = document.createElement('DIV'); divSideBar.className = 'uprightsideBar'; divSideBar.setAttribute('id', 'uprightsideBar'); var divSideBarTab = document.createElement('DIV'); divSideBarTab.setAttribute('id', 'sideBarTab'); divSideBar.appendChild(divSideBarTab); var h2 = document.createElement('H2'); divSideBarTab.appendChild(h2); var txt = document.createTextNode('目录导航'); h2.appendChild(txt); var divSideBarContents = document.createElement('DIV'); divSideBarContents.style.display = 'none'; divSideBarContents.setAttribute('id', 'sideBarContents'); divSideBar.appendChild(divSideBarContents); //创建自定义列表 var dlist = document.createElement("dl"); divSideBarContents.appendChild(dlist); var num = 0;//统计找到的mt和st mt = mt.toUpperCase();//转化成大写 st = st.toUpperCase();//转化成大写 //遍历所有元素结点 for(var i=0; i<nodes.length; i++) { if(nodes[i].nodeName == mt|| nodes[i].nodeName == st) { //获取标题文本 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext); //插入锚 nodes[i].setAttribute("id", "blogTitle" + num); var item; switch(nodes[i].nodeName) { case mt: //若为主标题 item = document.createElement("dt"); break; case st: //若为子标题 item = document.createElement("dd"); break; } //创建锚链接 var itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); item.setAttribute("name", num); //添加鼠标点击触发函数 item.onclick = function(){ var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; }; //将自定义表项加入自定义列表中 dlist.appendChild(item); num++; } } if(num == 0) return false; /* 鼠标进入时的事件处理 */ divSideBarTab.onmouseenter = function(){ divSideBarContents.style.display = 'block'; } /* 鼠标离开时的事件处理 */ divSideBar.onmouseleave = function() { divSideBarContents.style.display = 'none'; } document.body.appendChild(divSideBar); } }; window.onload=function(){ /* 页面加载完成之后生成博客目录 */ BlogDirectory.createBlogDirectory("cnblogs_post_body","h1","h2",20); //为右下角推荐推荐区域添加关注按钮 $('#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>

添加打赏功能按键

用画图调整图片大小 500 像素-》 上传到博客园然后复制链接

页首 html

<!-- 添加打赏功能按键 --> <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script> <script> new tctip({ top: '60%', button: { id: 9, type: 'dashang', }, list: [ { type: 'alipay', qrImg: 'https://www.cnblogs.com/images/cnblogs_com/birdofparadise/1316472/o_aliPay.bmp' }, { type: 'wechat', qrImg: 'https://www.cnblogs.com/images/cnblogs_com/birdofparadise/1316472/o_weixinPay.bmp' } ] }).init() </script>

鼠标点击心形特效

博客侧边栏公告代码:

<!-- 为页面添加爱心特效 --> <script type="text/javascript"> (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); } catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); </script>
  • 工具

    子曰:“工欲善其事,必先利其器。”

    292 引用 • 738 回帖

相关帖子

2 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • hefeng

    博客园允许插入 JS?这样不安全吧!

  • 其他回帖
  • someone

    仅仅是页面允许 js 而已……。确实允许的,所以博客园博客会有各种各样的样式。
    还有,solo 博客的后台管理里面也可以统一给所有博客设置 js 和 css。
    安全不安全嘛,我也不知道。