博客园博客排版(js样式实例)

昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,当然要分享给各位;

大神的链接:https://www.cnblogs.com/hafiz/p/9276689.html,里面讲的很细很细,每一个功能的讲解都有。

大家如果想仔细研究每一个功能的实现就看一下大神的博客,想省事就看我的,简单,快捷,省事。当然我在他的基础上加了一些功能 如:背景音乐,背景图片,电子时间,鼠标点击特效等等

 

效果图如下:大家也可以访问我博客主页查看

 

博客排版

1.找到你博客的设置,位置如图

 

2.首先你得申请一下你博客园的js权限;

不申请,你们的js代码是没有用的,申请成功是这个样子的

3.找到页面定制CSS代码区域,勾选禁用默认CSS;

 

 4.在里面粘贴下面代码css代码;

 View Code

5.找到‘’博客侧边栏公告(支持HTML代码)(支持JS代码)‘’,在里面加入如下代码;

 View Code

6.找到“页首Html代码”,加入下面的代码

 View Code

7.找到“页脚Html代码”,加入下面的代码

 View Code

8.点击保存,你的界面就将和我一样;

定制自己的界面

1.背景图片

在定制CSS代码区域,找到如下代码,将“https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp”位置的代码更换为你想更改的“背景图片的地址”

body {
color: #000;
background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
min-height: 101%;
}

2.更换背景音乐

 a.

在“博客侧边栏公告(支持HTML代码)(支持JS代码)”中找到如下代码;

<embed src="//music.163.com/style/swf/widget.swf?sid=2307767639&type=0&auto=1&width=310&height=90" width="330" height="110"     allowNetworking="all"   hidden=ture></embed>

b.

进入网易云官网,找到你想设置为背景音乐的音乐,点击"生成外链播放器",假如是下面的这样子,说明要收费

c.

我们选择能够生成外链的歌曲,当然也可以选多首一起生成外链,就像这样

d.点击生成外链

我们选择flash插件的版本,粘贴HTML代码,替换我们找到的代码。大功告成。

 

  9.15号以后,网易云音乐音乐也不予许设置外部链接。所以我又新弄了一个背景音乐如下:

  

<video width="330" height="54" controls>
    <source src="https://music.163.com/song/media/outer/url?id=16607982.mp3" type="video/mp4">
</video>

 

3.替换右侧头像

a.

在“博客侧边栏公告(支持HTML代码)(支持JS代码)”中找到如下代码;

<a href="https://www.cnblogs.com/clwydjgs/">
<img src="https://files.cnblogs.com/files/clwydjgs/touxiang.bmp">
</a>

b.

将”https://files.cnblogs.com/files/clwydjgs/touxiang.bmp“替换成你头像的地址,将"https://www.cnblogs.com/clwydjgs/"替换为你点击头像想要链接的地址;

4.更换打赏里面的付款码

a.

在”页首Html代码“区域找到如下代码;

 <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
    <script>  
    new tctip({
      top: '20%',
      button: {
        id: 9,
        type: 'dashang',
      },
      list: [
       {
         type: 'alipay',
         qrImg: 'https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp'
       }, {
         type: 'wechat',
         qrImg: 'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'
       }
     ]
   }).init()
   </script>

b.

将自己的微信和支付宝的付款码,保存到网络上或者上传到文件中,如下(点击即可获取图片地址)

c.

将代码中的”https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp“替换成你的支付宝付款码图片地址

 将'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'替换为你微信的付款码地址,大功告成

4.更换”置顶“图片

a.

页面定制CSS代码区中找到如下CSS代码:

/*scroll to top*/
  #scrollTop div{
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:149px;
    margin:0;
    padding:0
 }
 #scrollTop .level-2{
   background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
   display:none;
   height:250px;
   opacity:0;
   z-index:1
 }
 #scrollTop .level-3{
   background:none repeat scroll 0 0 transparent;
   cursor:pointer;
   display:block;
   height:150px;
   z-index:2
 }
 #scrollTop{   background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
   cursor:default;
   display:block;
   height:180px;
   overflow:hidden;
   position:fixed;
   right:0;
   top:90%;
   width:149px;
   z-index:11;
   margin:-125px 0 0;
   padding:0
 }

 

b.

跟换“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”和“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”为你想替换的图片的新地址

 5.鼠标点击特效

在页首去加入下面代码

 View Code

鼠标点击特效传送门 https://www.cnblogs.com/yadongliang/p/9318639.html 

6.增加看板娘:

在博客侧边栏公告加入如下代码:

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
  <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
      <div class="waifu" id="waifu">
          <div class="waifu-tips" style="opacity: 1;"></div>
          <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
          <div class="waifu-tool">
              <span class="fui-home"></span>
              <span class="fui-chat"></span>
             <span class="fui-eye"></span>
             <span class="fui-user"></span>
             <span class="fui-photo"></span>
             <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
         </div>
     </div>
     <script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script>
     <script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script>
     <script type="text/javascript">initModel()</script>

说了那么多,就是希望大家能够让自己的博客美观大方,谢谢大家,欢迎大家提意见。

欢迎大家关注公众号,不定时干货,只做有价值的输出

作者:Dawnzhang 
出处:https://www.cnblogs.com/clwydjgs/p/9291283.html
版权:本文版权归作者
转载:欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文连接;否则必究法律责任

posted @ 2019-02-24 16:41  dreamw  阅读(677)  评论(0编辑  收藏  举报