做自己的个性博客园

• 首先,选择一个自己喜欢的博客园皮肤,我选择的是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 {
        /* left: auto; */
        font-weight: normal;
        font-size: 13px;
        font-size: 0.928571429rem;
        line-height: 1.846153846;
        color: #258ce4;
        float: left;
        padding-left: 150px;
        font-family: monospace;
    }
    #mainContent .forFlow {
        margin-left: 22em;
        float: none;
        width: auto;
        font-family: Comic Sans MS;
    }
    #profile_block {
        margin-top: 5px;
        line-height: 1.5;
        text-align: left;
        font-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">
    
        <ul id="myNavList">
            <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
            <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/lisongyu/">首页</a></li>
            <li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li>
            <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/lisongyu">联系</a></li>
            <li><a id="blog_nav_rss" class="menu" href="https://www.cnblogs.com/lisongyu/rss">订阅</a>
                <!--<a id="blog_nav_rss_image" class="aHeaderXML" href="https://www.cnblogs.com/lisongyu/rss"><img src="//www.cnblogs.com/images/xml.gif" alt="订阅" /></a>-->
            </li>
            <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li>
        </ul>

</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-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #f8f8f8;
    content: " ";
    cursor: pointer;
    display: block;
    height: 0;
    right: 0;
    position: absolute;
    top: 300px;
    width: 0;
}
 #myNavigator #myNavList {
    display: block;
    margin: 0;
    padding: 0;
}
 #myNavigator #myNavList li {
    background-color: #f8f8f8;
    height: 49px;
    line-height: 49px;
    list-style: outside none none;
    margin-top: 1px;
    text-align: center;
    width: 100%;
}
 #myNavigator #myNavList li a {
    color: #333;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 11px;
}
 #myNavigator #myNavList li:hover {
    background-color: #dee1e0;
}
 #myNavigator #myNavList li:hover a {
    color: #7f9bc0;
}

 #myNavigator #myNavList li:nth-child(2) a {
    color: #7f9bc0;
    font-weight: bolder;
}
 #myNavigator:hover {
    top: 0;
}

#navigator {
    font-size: 0;
    border-bottom: 1px solid #ca5858;
    border-top: 1px solid #4442af;
    height: 10px;
    clear: both;
    margin-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=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.οnresize=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>

<!-- 爱心特效 -->
<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.οnclick==="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>

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

• 

转载于:https://www.cnblogs.com/lisongyu/p/9993218.html