博客园美化
程序员文章站
2022-04-09 18:59:45
博客园美化 作者：凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 首先应该获得JS权限，之后才能进行如下操作。 1. 小人时间 在“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中写入 2. 博主头像 博主头像地址：凯鲁嘎吉的主页 - 博客 ......
博客园美化
作者：凯鲁嘎吉 - 博客园
首先应该获得js权限，之后才能进行如下操作。
1. 小人时间
在“设置”->“博客侧边栏公告（支持html代码）（支持js代码）”中写入
<!--博客侧边栏公告-->
<hr>
<embed allowscriptaccess="never" allownetworking="internal" invokeurls="false" src="https://files.cnblogs.com/files/mmzs/flashdate.swf"
pluginspage="https://files.cnblogs.com/files/mmzs/flashdate.swf" type="application/x-shockwave-flash" quality="high" autostart="0" wmode="transparent" width="220"
height="65" align="middle">
</div>
2. 博主头像
博主头像地址：中右击鼠标，查看源代码，将头像的地址复制过来即可。
在“设置”->“页面定制css代码”中写入
img {
max-width:90%;
}
在“设置”->“博客侧边栏公告（支持html代码）（支持js代码）”中写入
<img src="//pic.cnblogs.com/avatar/1027447/20180318220610.png" alt="凯鲁嘎吉的头像" class="img_avatar">
3. 背景鼠标点击动态线条
在“设置”->“博客侧边栏公告（支持html代码）（支持js代码）”中写入
<div style = "display:none;">动态线条</div>
<script>
!function(){
function n(n,e,t){
return n.getattribute(e)||t
}
function e(n){
return document.getelementsbytagname(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zindex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerwidth||document.documentelement.clientwidth||document.body.clientwidth,
c=m.height=window.innerheight||document.documentelement.clientheight||document.body.clientheight
}
function i(){
r.clearrect(0,0,a,c);
var n,e,t,o,m,l;
s.foreach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillrect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginpath(),r.linewidth=t/2,r.strokestyle="rgba("+d.c+","+(t+.2)+")",r.moveto(i.x,i.y),r.lineto(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createelement("canvas"),
d=t(),l="c_n"+d.l,r=m.getcontext("2d"),
x=window.requestanimationframe||window.webkitrequestanimationframe||window.mozrequestanimationframe||window.orequestanimationframe||window.msrequestanimationframe||
function(n){
window.settimeout(n,1e3/45)
},
w=math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.csstext="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendchild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientx,y.y=n.clienty
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
settimeout(function(){i()},100)
}();
</script>
<div style = "display:none;"> 动态线条end</div>
4. 页首个性签名
在“设置”->“页首html代码”中写入
<div id="blogtitle">
<div class="title">
<a id="header1_headertitle" class="headermaintitle" href="http://www.cnblogs.com/kailugaji/">凯鲁嘎吉</a>
</div>
<div class="subtitle">用书写铭记日常，最迷人的不在远方</div>
</div>
5. 鼠标点击彩色字体
在“设置”->“页脚html代码”中写入
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jquery(document).ready(function($) {
$("body").click(function(e) {
var a = new array("❤凯鲁嘎吉❤","❤爱你❤","❤欢迎您❤","❤光临本园❤","❤加油❤","❤努力❤","❤奋斗❤","❤拼搏❤","❤凯鲁嘎吉❤","❤爱你❤","❤forever❤","❤爱你❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pagex,
y = e.pagey;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*math.random())+","+~~(255*math.random())+","+~~(255*math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
详见主页：凯鲁嘎吉 - 博客园
6. 自动生成目录
在“设置”->“页脚html代码”中写入
<script language="javascript" type="text/javascript">
//生成目录索引列表
function generatecontentlist()
{
var jquery_h1_list = $('#cnblogs_post_body h1');
if (jquery_h1_list.length == 0) { return; }
if ($('#cnblogs_post_body').length == 0) { return; }
var content = '<a name="_labeltop"></a>';
content += '<div id="navcategory">';
content += '<p style="font-size:18px"><b>阅读目录(content)</b></p>';
// 一级目录 start
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h1_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labeltop">回到顶部(go to top)</a><a name="_label' + i + '"></a></div>';
$(jquery_h1_list[i]).before(go_to_top);
// 一级目录的一条
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
var nexth1index = i + 1;
if (nexth1index == jquery_h1_list.length) { nexth1index = 0; }
var jquery_h2_list = $(jquery_h1_list[i]).nextuntil(jquery_h1_list[nexth1index], "h2");
// 二级目录 start
if (jquery_h2_list.length > 0)
{
//li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h2_list.length; j++)
{
var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
// 二级目录的一条
li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
var nexth2index = j + 1;
var next;
if (nexth2index == jquery_h2_list.length)
{
if (i + 1 == jquery_h1_list.length)
{
next = jquery_h1_list[0];
}
else
{
next = jquery_h1_list[i + 1];
}
}
else
{
next = jquery_h2_list[nexth2index];
}
var jquery_h3_list = $(jquery_h2_list[j]).nextuntil(next, "h3");
// 三级目录 start
if (jquery_h3_list.length > 0)
{
li_content += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h3_list.length; k++)
{
var go_to_third_content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_content);
// 三级目录的一条
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
}
if (jquery_h3_list.length > 0)
{
li_content += '</ul>';
}
li_content += '</li>';
// 三级目录 end
}
if (jquery_h2_list.length > 0)
{
li_content +='</ul>';
}
li_content +='</li>';
// 二级目录 end
content += li_content;
}
// 一级目录 end
content += '</ul>';
content += '</div>';
$($('#cnblogs_post_body')[0]).prepend(content);
}
generatecontentlist();
</script>
levels of contents
7. 回到顶部
样式一
在“设置”->“页面定制css代码”中写入
.returntop{
height:85px;width:30px;background:deepskyblue;position: fixed;bottom:0;right:22px;
text-align: center;color:white;cursor: pointer;border-radius:6px;font-size:16px;display:none;
}
在“设置”->“博客侧边栏公告（支持html代码）（支持js代码）”中写入
<script>
var returntop=document.createelement("div");
returntop.classname="returntop";
returntop.innertext="回到顶部";
document.body.appendchild(returntop);
var returntimer=null;
var isuser=true;
window.onscroll=function(){
var scroll=document.documentelement.scrolltop||document.body.scrolltop;
if(scroll>300){
returntop.style.display="block";
}
if(scroll<300){
returntop.style.display="none";
}
if(!isuser){
clearinterval(returntimer);
}
isuser=false;
};
returntop.onclick=function(){
returntimer=setinterval(function(){
var scroll=document.documentelement.scrolltop||document.body.scrolltop;
var speed=math.floor(-scroll/8);
if(scroll==0){
clearinterval(returntimer);
}
isuser=true;
document.documentelement.scrolltop=document.body.scrolltop=scroll+speed;
},30);
}
</script>
样式二
在“设置”->“页首html代码”中写入
<style>
#back-top {
position: fixed;
bottom: 10px;
right: 5px;
z-index: 99;
}
#back-top span {
width: 50px;
height: 64px;
display: block;
background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function() {
if ($(this).scrolltop() > 500) {
$('#back-top').fadein();
} else {
$('#back-top').fadeout();
}
});
// scroll body to 0px on click
$('#back-top a').click(function() {
$('body,html').animate({
scrolltop: 0
}, 800);
return false;
});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
8. 美化博客内容
在“设置”->“页面定制css代码”中写入
/* 设置博客正文一二三级标题格式 */
/* 一级标题 */
#cnblogs_post_body h1 {
font-size: 28px;
font-weight: bold;
line-height: 1.5;
color: black;
margin: 10px 0;
}
/* 二级标题 */
#cnblogs_post_body h2 {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
color: whitesmoke;
background-color: royalblue;
margin: 10px 0;
}
/* 三级标题 */
#cnblogs_post_body h3 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: whitesmoke;
background-color: dimgrey;
}
/* 正文 */
#cnblogs_post_body p {
font-size: 12pt;
}
9. 屏蔽广告
在“设置”->“页面定制css代码”中写入
/* adblock */
#ad_t2 {
display: none;
}
.c_ad_block {
display: none;
}
推荐阅读
-
python通过ElementTree操作XML获取结点读取属性美化XML
-
Photoshop教程:认识质感美化眼睛
-
jQuery iScroll.js 移动端滚动条美化插件第1/5页_jquery
-
利用CSS3美化单选、复选按钮的显示样式
-
jQuery表单美化插件jqTransform使用详解_jquery
-
C#中使用IrisSkin2.dll美化WinForm程序界面的方法
-
JSF URL美化插件 PrettyFaces JSFSeam配置管理浏览器
-
怎样使用两行代码实现博客园打赏功能
-
C#中使用IrisSkin2.dll美化WinForm程序界面的方法
-
爱剪辑怎么给视频调色? 爱剪辑美化视频的教程