做自己的个性博客园

首先,选择一个自己喜欢的博客园皮肤,我选择的是SimpleMemory,因为简洁美观,修改的位置相对较少.

然后,自定义一下自己的css代码,这个可以通过在你自己的首页进行编辑,使用Chrome浏览器,开启F12(开发者工具),通过这个点击按钮,寻找自己要修改的位置,同时相应的源码div会自动高亮,这样就方便了我们进行编辑,同时开发者工具右侧的css工具也会自动切换到对应的css,可以直接对页面进行微调修改,找到自己最喜欢的样式之后,把css复制下来,粘贴到`页面定制css代码`框中,保存刷新.这样就相对修改了原来页面上的效果了.但是我感觉还是不好看,导航栏生生的就放在那里每个页面都有,很烦.然后我把font-size修改成0,,两根线修改了下颜色,还有间距,这样导航栏就空空的了,所以还要自己在定制一个导航栏.

#home {
    margin: 0 auto;
    width: 65%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 a {
    color: #515151;
background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
text-shadow: 5px -5px black, 4px -4px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text }
.vintage2{
color: transparent;
-webkit-text-stroke: 1px red;
letter-spacing: 0.04em;}
.vintage3 {
color: transparent;
background-color : blue;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}
blogTitle h2 {
</span><span style="color: rgb(0, 128, 0);">/*</span><span style="color: rgb(0, 128, 0);"> left: auto; </span><span style="color: rgb(0, 128, 0);">*/</span><span style="color: rgb(0, 0, 0);">
font</span>-<span style="color: rgb(0, 0, 0);">weight: normal;
font</span>-<span style="color: rgb(0, 0, 0);">size: 13px;
font</span>-size: <span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">.928571429rem;
line</span>-height: <span style="color: rgb(128, 0, 128);">1.846153846</span><span style="color: rgb(0, 0, 0);">;
color: #258ce4;
</span><span style="color: rgb(0, 0, 255);">float</span><span style="color: rgb(0, 0, 0);">: left;
padding</span>-<span style="color: rgb(0, 0, 0);">left: 150px;
font</span>-<span style="color: rgb(0, 0, 0);">family: monospace;

}
mainContent .forFlow {
margin</span>-<span style="color: rgb(0, 0, 0);">left: 22em;
</span><span style="color: rgb(0, 0, 255);">float</span><span style="color: rgb(0, 0, 0);">: none;
width: auto;
font</span>-<span style="color: rgb(0, 0, 0);">family: Comic Sans MS;

}
profile_block {
margin</span>-<span style="color: rgb(0, 0, 0);">top: 5px;
line</span>-height: <span style="color: rgb(128, 0, 128);">1.5</span><span style="color: rgb(0, 0, 0);">;
text</span>-<span style="color: rgb(0, 0, 0);">align: left;
font</span>-<span style="color: rgb(0, 0, 0);">family: serif;
display: none;

}
/ adblock /
ad_t2 {
display: none;

}

.c_ad_block {

display: none;

}
sidebar_search{
display: none;

}
sidebar_shortcut{
display: none;

}
.catListTitle{

display:none;

}

接下来就定制一个自己的导航栏,自己编写一段div代码块,可以直接拷原生的导航栏,将id修改.这样就算是自己的了.但是样式没有,这个也要自己定制了,我本身样式不会创造,只会修改,所以我拷了一个我喜欢的样式,然后修改,就成了这样的了,但是他的导航在左上角,根据我的习惯我还是喜欢在右手边,所以,修改.(同时提供一下原作者的博客地址:https://www.cnblogs.com/study-everyday/)

页首html代码

<div id="myNavigator">
    &lt;ul id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">myNavList</span><span style="color: rgb(128, 0, 0);">"</span>&gt;
        &lt;li&gt;&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_sitehome</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">menu</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://www.cnblogs.com/</span><span style="color: rgb(128, 0, 0);">"</span>&gt;博客园&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_myhome</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">menu</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://www.cnblogs.com/lisongyu/</span><span style="color: rgb(128, 0, 0);">"</span>&gt;首页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_newpost</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">menu</span><span style="color: rgb(128, 0, 0);">"</span> rel=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">nofollow</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://i.cnblogs.com/EditPosts.aspx?opt=1</span><span style="color: rgb(128, 0, 0);">"</span>&gt;新随笔&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_contact</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">menu</span><span style="color: rgb(128, 0, 0);">"</span> rel=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">nofollow</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://msg.cnblogs.com/send/lisongyu</span><span style="color: rgb(128, 0, 0);">"</span>&gt;联系&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_rss</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">menu</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://www.cnblogs.com/lisongyu/rss</span><span style="color: rgb(128, 0, 0);">"</span>&gt;订阅&lt;/a&gt;
            &lt;!--&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_rss_image</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">aHeaderXML</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://www.cnblogs.com/lisongyu/rss</span><span style="color: rgb(128, 0, 0);">"</span>&gt;&lt;img src=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">//www.cnblogs.com/images/xml.gif</span><span style="color: rgb(128, 0, 0);">"</span> alt=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">订阅</span><span style="color: rgb(128, 0, 0);">"</span> /&gt;&lt;/a&gt;--&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a id=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">blog_nav_admin</span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(0, 0, 255);">class</span>=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">menu</span><span style="color: rgb(128, 0, 0);">"</span> rel=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">nofollow</span><span style="color: rgb(128, 0, 0);">"</span> href=<span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">https://i.cnblogs.com/</span><span style="color: rgb(128, 0, 0);">"</span>&gt;管理&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

</div>

#myNavigator {

background-color: #fff;

position: absolute;

top: -300px;

right:50px;

transition: top 0.5s cubic-bezier(0, 0.63, 0.32, 1.28) 0s;

width: 80px;

}
myNavigator::after {
border</span>-<span style="color: rgb(0, 0, 0);">left: 40px solid transparent;
border</span>-<span style="color: rgb(0, 0, 0);">right: 40px solid transparent;
border</span>-<span style="color: rgb(0, 0, 0);">top: 40px solid #f8f8f8;
content: </span><span style="color: rgb(128, 0, 0);">"</span> <span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;
cursor: pointer;
display: block;
height: </span><span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;
right: </span><span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;
position: absolute;
top: 300px;
width: </span><span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;

}
myNavigator #myNavList {
display: block;
margin: </span><span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;
padding: </span><span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;

}
myNavigator #myNavList li {
background</span>-<span style="color: rgb(0, 0, 0);">color: #f8f8f8;
height: 49px;
line</span>-<span style="color: rgb(0, 0, 0);">height: 49px;
list</span>-<span style="color: rgb(0, 0, 0);">style: outside none none;
margin</span>-<span style="color: rgb(0, 0, 0);">top: 1px;
text</span>-<span style="color: rgb(0, 0, 0);">align: center;
width: </span><span style="color: rgb(128, 0, 128);">100</span>%<span style="color: rgb(0, 0, 0);">;

}
myNavigator #myNavList li a {
color: #</span><span style="color: rgb(128, 0, 128);">333</span><span style="color: rgb(0, 0, 0);">;
display: inline</span>-<span style="color: rgb(0, 0, 0);">block;
font</span>-family: <span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">Microsoft YaHei</span><span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">;
font</span>-<span style="color: rgb(0, 0, 0);">size: 11px;

}
myNavigator #myNavList li:hover {
background</span>-<span style="color: rgb(0, 0, 0);">color: #dee1e0;

}
myNavigator #myNavList li:hover a {
color: #7f9bc0;

}
myNavigator #myNavList li:nth-child(2) a {
color: #7f9bc0;
font</span>-<span style="color: rgb(0, 0, 0);">weight: bolder;

}
myNavigator:hover {
top: </span><span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;

}
navigator {
font</span>-size: <span style="color: rgb(128, 0, 128);">0</span><span style="color: rgb(0, 0, 0);">;
border</span>-<span style="color: rgb(0, 0, 0);">bottom: 1px solid #ca5858;
border</span>-<span style="color: rgb(0, 0, 0);">top: 1px solid #4442af;
height: 10px;
clear: both;
margin</span>-<span style="color: rgb(0, 0, 0);">top: 25px;

}

当然还有最好看的动态效果,这个就是纯拷了.直接在博客侧边栏公告中添加js,因为直接的js引用,可能会有失效的可能,所以我把原生的js复制下来了.最最重要的是你的博客园要（支持HTML代码）（支持JS代码）,哈哈哈,否则一切免谈.

/博客侧边栏代码/

/底背景动态线条效果/

<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=oo+mm,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03o,i.y-=.03m),
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=2w()-1,p=2w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</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>

最后就是激动人心的时刻了,看看自己的页面效果吧.

posted @ 2018-11-21 09:53 lisongyu 阅读(419) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

LISONGYU

做自己的个性博客园

blogTitle h2 {

mainContent .forFlow {

profile_block {

ad_t2 {

sidebar_search{

sidebar_shortcut{

myNavigator::after {

myNavigator #myNavList {

myNavigator #myNavList li {

myNavigator #myNavList li a {

myNavigator #myNavList li:hover {

myNavigator #myNavList li:hover a {

myNavigator #myNavList li:nth-child(2) a {

myNavigator:hover {

navigator {

公告