来一些方便的小操作：博客园（cnblog）自定义界面
2024-04-23 02:05:04
可以做点什么呢？
例如：
或者：
目录：
- 侧边栏分享功能
- 侧边工具栏
- 访问统计
- RevolverMaps
- 背景更换
- 网页天气插件
在实现这些功能之前，需要具备一些的css和js的知识。推荐一篇大佬写的很清晰的手把手教学：【详细图解】一步一步教你自定义博客园（cnblog）界面
1.侧边栏分享功能
将下面的代码复制到侧边栏公告中
代码：
<script> //侧边分享栏 window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"100"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; </script>
对这个风格不满意可以自行搜索：百度分享按钮
定制自己满意的样式。
2.侧边工具栏
博主与访客可以看到不同的工具栏
在侧边公告栏中加入以下代码：
< script > //侧边分享栏 window._bd_share_config ={"common": {"bdSnsKey": {},"bdText": "","bdMini": "2","bdMiniList": false,"bdPic": "","bdStyle": "0","bdSize": "16"},"slide": {"type": "slide","bdImg": "3","bdPos": "right","bdTop": "100"} };with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)];</script><div id="vd-right-menu"><a href="http:/ / www.cnblogs.com / evidd / "><div class="vd - menu - item " id="main_page ">首页</div></a><a href="#comment_form_container "><div class="vd - menu - item " id="remark ">评论</div></a><a href="#top "><div class="vd - menu - item ">TOP</div></a></div><script> //判断首页，将url改为自己首页的url var isHomePage = location == "http: //www.cnblogs.com/evidd/" || location == "http://www.cnblogs.com/evidd";var vdModeCookieKey = "vd-bg-mode";var vdModeCSS = ["NONE", "rainbow", "snowberg"];var bgDefaultMode = 2;var isIE = navigator.appName == "Microsoft Internet Explorer";var editUrl, checked = false, editBtnDoEnd= false;functiondoWidthEditBtn() {var profile = $("#profile_block");var cmtFrmContainer = $("#comment_form_container");if (!checked && (!profile.length || !profile.children("a").length || !cmtFrmContainer.length || !cmtFrmContainer.children().length)) {setTimeout(doWidthEditBtn,100);return;}checked= true;//评论者名var cmtAuthorIpt = $("#tbCommentAuthor");if (!cmtAuthorIpt.length) {//登录按钮if (!cmtFrmContainer.children(".login_tips").length) {setTimeout(doWidthEditBtn,100);return;}}else{//作者名var author = profile.children("a")[0].innerHTML;var commentAuthor =cmtAuthorIpt.val();if (author ==commentAuthor) {var editBtn = $("<a href='" + editUrl + "'>");editBtn.append("<div class='vd-menu-item'>编辑</div>");$("#vd-right-menu").append(editBtn);}}editBtnDoEnd= true; }//收藏 关注 var tryCount = 0;functiondoWithFollowBtn() {if (!editBtnDoEnd) {setTimeout(doWithFollowBtn,100);return;}if (! ($("#p_b_follow").length && $("#p_b_follow").children().length)) {if (tryCount++==50) return;setTimeout(doWithFollowBtn,100);return;}varlabel;//未关注if ($("#p_b_follow").html().charAt(0) == "<") {label= "+关注";}else{label= "已关注"}if (!document.getElementsByClassName("diggit").length) {setTimeout(doWithFollowBtn,100);return;}var hold_same_view = document.getElementsByClassName("diggit")[0];hold_same_view.className= "vd-menu-item like_view";$("#vd-right-menu").append(hold_same_view);var followBtn = $("<a href='javascript:void(0);'>");followBtn.append("<div class='vd-menu-item'>" + label + "</div>");followBtn.click(function() {if (label == "+关注") {$("#p_b_follow").children("a")[0].click();label= "已关注"followBtn.children().html(label);}});$("#vd-right-menu").append(followBtn);var collection = '<a οnclick="if(cb_entryId !=undefined){AddToWz(cb_entryId)}" href="javascript:void(0);"><div class="vd-menu-item">收藏该文</div></a>'$("#vd-right-menu").append(collection);document.getElementById("digg_count").innerHTML = document.getElementById("digg_count").innerHTML + '<p style="color: #757575;">点个赞</p>';console.log($("#digg_count").innerHtml); }$("body").ready(function() {//非首页if (!isHomePage) {var editLink = $("a[href^='https://i.cnblogs.com/EditPosts.aspx?postid=']");editUrl= editLink.attr("href");doWidthEditBtn();doWithFollowBtn();}else{editBtnDoEnd= true;vDiv= document.getElementById('remark');vDiv.style.display= 'none';vDiv= document.getElementById('main_page');vDiv.style.display= 'none';} });< /script>/
3.访问统计
flg counter，在这个网站可以自定义一个类似我的blog上的访问统计
定制之后点击GET YOUR FLAG COUNTER，可以选择SKIP跳过
复制Code for website下面的代码到侧边栏公告中，保存
4.RevolverMaps
刚遇到觉得还挺好玩的，一起来试试
在侧边公告栏中加入：
1 <divstyle="text-align:center; margin:0; padding:0; width:202px;"> 2 <embedsrc="//rf.revolvermaps.com/f/g.swf"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"quality="high"wmode="window"allowscriptaccess="always"allownetworking="all"width="202"height="202"flashvars="m=0&i=5yljlh8s44a&r=false&v=true&b=000000&n=false&s=202&c=ff0000" /> 3 <br/> 4 <imgsrc="//rf.revolvermaps.com/js/c/5yljlh8s44a.gif"width="1"height="1"alt="" /> 5 </div>
5.背景更换
首先得有图片，在页首html中加入以下代码（JS代码，加在任意位置都可以）：
1 <!--背景切换--> 2 <script> 3 functionGetRandomNum(Min,Max){4 var Range=Max-Min;5 var Rand=Math.random();6 return(Min+Math.round(Rand *Range));7 }8 functionChangePicture(){9 dx=document.body;10 dy=GetRandomNum(0,23);11 if (dy==0){12 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174010688-1830584338.jpg) no-repeat fixed";13 dx.style.backgroundSize="cover";14 }else if (dy==1){15 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174017360-1796590868.jpg) no-repeat fixed";16 dx.style.backgroundSize="cover";17 }else if (dy==2){18 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174022047-853249916.jpg) no-repeat fixed";19 dx.style.backgroundSize="cover";20 }else if (dy==3){21 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174029141-1608852048.jpg) no-repeat fixed";22 dx.style.backgroundSize="cover";23 }else if (dy==4){24 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174035141-1267899028.jpg) no-repeat fixed";25 dx.style.backgroundSize="cover";26 }else if (dy==5){27 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174040782-379920149.jpg) no-repeat fixed";28 dx.style.backgroundSize="cover";29 }else if (dy==6){30 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174047860-2089092748.jpg) no-repeat fixed";31 dx.style.backgroundSize="cover";32 }else if (dy==7){33 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174055110-760691979.jpg) no-repeat fixed";34 dx.style.backgroundSize="cover";35 }else if (dy==8){36 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174104078-1668647264.jpg) no-repeat fixed";37 dx.style.backgroundSize="cover";38 }else if (dy==9){39 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174123610-1330753439.jpg) no-repeat fixed";40 dx.style.backgroundSize="cover";41 }else if (dy==10){42 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174128907-905693440.jpg) no-repeat fixed";43 dx.style.backgroundSize="cover";44 }else if (dy==11){45 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174204485-2036992334.jpg) no-repeat fixed";46 dx.style.backgroundSize="cover";47 }else if (dy==12){48 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174211563-1891350663.jpg) no-repeat fixed";49 dx.style.backgroundSize="cover";50 }else if (dy==13){51 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174217813-1439526251.jpg) no-repeat fixed";52 dx.style.backgroundSize="cover";53 }else if (dy==14){54 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174223313-1473348115.jpg) no-repeat fixed";55 dx.style.backgroundSize="cover";56 }else if (dy==15){57 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174229063-639587638.jpg) no-repeat fixed";58 dx.style.backgroundSize="cover";59 }else if (dy==16){60 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174235313-1682256911.jpg) no-repeat fixed";61 dx.style.backgroundSize="cover";62 }else if (dy==17){63 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174243094-1382641129.jpg) no-repeat fixed";64 dx.style.backgroundSize="cover";65 }else if (dy==18){66 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174249782-1878167894.jpg) no-repeat fixed";67 dx.style.backgroundSize="cover";68 }else if (dy==19){69 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174256703-514964046.jpg) no-repeat fixed";70 dx.style.backgroundSize="cover";71 }else if (dy==20){72 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174302813-2113078791.jpg) no-repeat fixed";73 dx.style.backgroundSize="cover";74 }else if (dy==21){75 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174309203-1666245225.jpg) no-repeat fixed";76 dx.style.backgroundSize="cover";77 }else if (dy==22){78 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174314782-1332659971.jpg) no-repeat fixed";79 dx.style.backgroundSize="cover";80 }else if (dy==23){81 dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174320828-1435950696.jpg) no-repeat fixed";82 dx.style.backgroundSize="cover";83 }84 }85 ChangePicture();86 </script>
加入页面后，访问页面的时候能够随机显示其中的图片，如果要更换怎么办，来个button吧！
1 <!--更换背景--> 2 <inputtype="image"id="Uright"src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png"onmouseover="this.style.top='10px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132044282-1070510381.png' "onmouseout="this.style.top='-55px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png' "onclick="ChangePicture()"style="top: -55px;">
6.网页天气插件
在心知天气自定义一个喜欢的风格：
将生成的JS代码放入页脚
OK！感觉界面好看了一点呢！
大佬甚至禁用模板CSS，自己DIY整个博客页面，不过在熟悉CSS和JS之后，我们也能改变界面的一些布局。
推荐几个dalao的文章：
博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)
详谈如何定制自己的博客园皮肤
博客园美化手记——CSS javascript html
欢迎在评论区留言提问！
转载于:https://www.cnblogs.com/evidd/p/8794428.html
来一些方便的小操作：博客园（cnblog）自定义界面相关推荐
- 接口应用小玩具-博客园积分排名变动监控工具
小玩具-博客园积分排名变动监控工具 一个简单的在线服务监控和提醒工具 1 概述 前段时间自己准备重新开启自己的博客园,然后还和一些圈子里面的朋友夸下海口,自己要开始像打游戏那样,进行博客园的 天梯 ...
- 一步一步教你自定义博客园(cnblog)界面
一步一步教你自定义博客园(cnblog)界面 一.总结 二.一步一步教你自定义博客园(cnblog)界面 写在开头 我之前在博客园没怎么发东西,就是觉得博客园的Markdown不支持实时预览,加上ma ...
- 博客园cnblog用Markdown写博客的过程如何图片居中、添加缩进
刚开始写博客,对Markdown语法不熟悉,HTML也快全忘了.记录一下. 一.博客园插入图片(复制之后直接粘贴,而非上传的方式) 正常是这么显示的,这种形式没有办法进行图片居中或 ...
- NodeJS入门04-Express路由和中间件 - 小之 - 博客园
nodeJS入门04-Express路由和中间件 Express框架是后台的Node框架,在后台的受欢迎的程度,和jQuery一样,就是企业的事实上的标准. 路由 路由是指如何定义应用的端点(URIs ...
- mysql 类图_类图 - 吴小凯 - 博客园
类图(Class Diagram): 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 类一般由三部分组成: 类名(Class):每个类都必须 ...
- 获取浏览器屏幕高度(js，jq) - 进击的小牛牛 - 博客园
javascript IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...
- mysql 内联函数_内联函数 - freeboy小亮 - 博客园
(1)什么是内联函数? 内联函数是指那些定义在类体内的成员函数,即该函数的函数体放在类体内. (2)为什么要引入内联函数? 当然,引入内联函数的主要目的是:解决程序中函数调用的效率问题.另外,前面我们 ...
- 一个简单的小项目博客园（2）登录、注册页面
目录: 注册功能(使用forms组件) 登录功能(使用验证码) 注册功能(使用forms组件) 解耦合在app01中创建myforms.py from django import forms from ...
- adb mysql_ADB - 黑小莲花 - 博客园
随着企业IT和互联网系统的发展,产生了越来越多的数据.数据量的积累带来了质的飞跃,使得数据应用从业务系统的一部分演变得愈发独立.物流.交通.新零售等越来越多的行业需要通过OLAP做到精细化运营,从而调 ...
- 关于博客园CNBLOG美化
本博客美化参照: http://doc.dbnuo.org/cnblogs-theme-docs/v1.1.0/#/ 转载于:https://www.cnblogs.com/Zhu013/p/1117 ...
最新文章
- 如何通过结构化智能体完成物理构造任务？| 技术头条
- js如何通过变量调用函数，函数名在变量里面
- api如何使用_什么是API, API是如何工作的？
- python里有常量吗？（没有，但可自行定义）
- centos6.4 安装 mysql_CentOS6.4 安装MySQL
- Leetcode--16. 最接近的三数之和
- 普通用户安装nginx
- Java企业面试算法新得体会之5字符串问题24问
- CNN提取文本特征，融合PMF模型实现推荐系统
- 转：C++ string的万能转换
- y电容如何选型_安规Y电容设计选型
- 解决安卓手机DNS被污染（刷新手机DNS）
- Unity Shader数学基础——笛卡尔坐标，点，矢量
- 深度| 百度副总裁王海峰：百度在NLP领域都做了什么？
- 强化学习必知二要素：计算效率和样本效率
- 笔记本的结构深入分析
- 异构网络互联(计算机网络)
- 队列的顺序、链式表示与实现
- 数据可视化之汽车销量，截止到2022年目前中国汽车保有量是3.02亿辆
- 如何建立一个小型的局域网，来实现电脑与电脑之间的通信