1. 程式人生 > >博客園個人界面美化(初入博客園)

博客園個人界面美化(初入博客園)

item mage get ava eight tail tex osi 動畫

剛入博客園,小白也要有一個“高大上”的個人博客頁面啊,鼓搗了一下午,感覺自己棒棒的,

叉腰得瑟

個人感覺Simple的主頁樣式很美觀,大氣,哈哈

技術分享圖片

首先,在博客園後臺管理的設置裏,申請js代碼的權限(默認是沒有打開的)

  申請的時候一定要有禮貌,有禮貌,有禮貌(申請了三次才通,別著急,慢慢來)

技術分享圖片

在博客側邊欄公告中添加如下代碼(註意github鏈接請自行修改)

  在這裏有一個小問題,使用h5的canvas繪制的背景和時鐘能正常使用,小企鵝的插件是一個swf,部分瀏覽器會攔截

<!-- 時鐘控件 -->
<div id="clockdiv"><canvas id="dom" width="180" height="180">您的瀏覽器不兼容canvas</canvas></div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/cyuanwu/clock.js"></script>

<!-- 小企鵝遊戲控件 -->
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/penguins/penguins.swf?" width="240" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/penguins/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

<!-- Fork me on GitHub -->
<a href="https://github.com/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

頁首Html代碼中插入如下代碼(超喜歡這個背景,就是為了這個炫酷的背景才鼓搗的,哈哈)

<!-- 背景動畫 -->
<canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<scriptsrc="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>

<!-- 標簽雲相關庫 -->
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery-3.3.1.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>

另:個人強迫癥,所以修改了一丁點的CSS


body {
background: #fafafa;
}
#clockdiv {
text-align: center;
margin-bottom: 20px;
margin-bottom: 20px;
}
.c_b_p_desc_readmore {
padding-left: 1.5rem;
}
a {
text-decoration: none!important;
}
#profile_block, .newsItem >.catListTitle {
display: none;
}

 

參考鏈接(萬分感謝):

1.http://www.cnblogs.com/felove2013/articles/4729841.html

2.https://www.cnblogs.com/jingmoxukong/p/7826982.html?utm_source=gold_browser_extension

3.https://www.cnblogs.com/javaIOException/p/7521849.html

4.https://blog.csdn.net/siwuxie095/article/details/80151468

博客園個人界面美化(初入博客園)