北樂博客裝飾分享CSS+HTML+js

博客佈局更改，各類百度，本身修改，搞成如今這樣，有興趣的朋友能夠複製我下面的把本身博客覆蓋了，而後在進行更改

不懂可加羣問我：675678830

若是想開通打賞，用到js，須要在 下列中 博客側邊欄公告  處開通下

博客園首頁-管理-設置--

 

頁面制定CSS代碼：

#navList {
min-height: 35px;
float: left;
}
#navList li {
float: left;
margin: 0 4px 0 0;
}

#site_nav_under {
display: none;
}
.c_ad_block, .ad_text_commentbox {
display: none;
margin: 0;
padding: 0;
}
#ad_under_google {
height: 0;
overflow: hidden;
}
#ad_under_google a {
display: none;
}
#ad_t2{
display: none;
margin: 0;
padding: 0;
}
#navList a{
color:#eee;
font-size: 15px;
font-weight: bolder;
}
#div_digg { position: fixed;bottom: 20px;
right: 10px;font-size: 0;z-index: 100;width:50px }
.buryit{display:none}

#green_channel { position: fixed;bottom: 30px;right: 100px;z-index: 100 }
#header{
height:60px;
line-height:60px;
font-size:18px;
opacity:0.5;
}
#main{
margin-top:30px;
}
#blogTitle h1,#blogTitle h2{
line-height:50px;
}
#blogTitle h1 a {
font-size:40px;
}
#blogTitle h2 {
color:#EEE9E9;
font-size:25px;
}
.menu{margin-top:15px;}
#blog_stats{
line-height:50px;
color:#ffffff;
font-size:14px;
}
html,body{
font-family: 'Microsoft JhengHei', Microsoft YaHei , sans-serif;
}
.post {
padding-bottom: 30px;
}
ul li {
list-style: none;
line-height:25px;
}
.commentbox_main{
margin-right:20px;
}
#tbCommentBody{
width:100%;
height:120px;
}
.commentbox_title_left{
display:none;
}
.commentbox_title
{
width:100%
}
.commentbox_title_right{
float:right;
}
#sideBar{
border-radius:1px;
border:0px;
background:#FAFCFD;
}
#topics, .post{
border-radius:1px;
border:0px;
background:#FAFCFD;
}
.dayTitle{
border-bottom-width: 0px;
}
.dayTitle a
{
display:none;
}
.day{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}
.day:hover{
box-shadow: 4px 0px 6px #38AFF3;
}
.entrylistItem{
border:1px solid #f1f1f1;
border-radius:3px;
padding:5px;
margin-bottom:6px;
background:#FFFFFF;
}
.entrylistItem:hover {
box-shadow: 2px 0px 6px #000;
}
body { background-color: #efefef; background-image: url(https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_beijing.jpg);
background-repeat: no-repeat; background-attachment: fixed; background-position: center 0; background-size: cover; }
#sideBarMain
{
padding:3px;
}
.feedbackItem,.commentform {
background:#ffffff;
padding:5px 10px;;
}
#footer{
margin: 30px 20px;
font-size: 12px;
text-align: center;
color: #999;
border-color:#f1f1f1;
padding-top:25px;
}
.input_my_zzk{
border-radius:3px;
border: 1px solid #000000;
width:120px;
height:26px;
}
input.btn_my_zzk {
height: 30px;
padding:5px 10px;
vertical-align: none;
border-radius:3px;
border:1px solid;
}
.comment_btn{
height: 38px;

border-radius:3px;
border:1px solid;
}

博客側邊欄公告：

<br>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_meinv.jpg" style="width:100%"/>
<br>

<div align="center">
<b><font size="4" face="verdana">菜鳥博客 、 學無止境</font></b>
</div>
<br />
<div align="center">
<b><font size="2" face="verdana">九零後的小夥子<br /></font></b>
<b><font size="2" face="verdana">軟件測試從業者<br /></font></b>
<b><font size="2" face="verdana">喜歡喝茶但不會品茶<br /></font></b>
<b><font size="2" face="verdana">軟件測試同行可點擊加羣<br /></font></b>
</div>
<br />
<h3 style="text-align:center"><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=c3f85af3f19cb8566325ada20290c22a1773885624a0c06cec0fd098f3bb85db"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="初級軟件測試交流羣" title="初級軟件測試交流羣"></a></h3>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_dt.jpg" style="width:100%"/>
<br />
<br />
<font size="2" color="RoyalBlue" face="verdana">
<b>軟件測試交流羣：675678830<br /></b>
<b>聚集各路大神，一塊兒學習與探討<br /></b>
<b>測試經驗、自動化、安全、性能<br /></b>
<b>歡迎全國各地軟件測試同行加羣！！<br /></b>
</font>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_hengxian.jpg" style="width:100%"/>
<br />
<br />
<br />
<div align="center">
<font size="2" color="DarkGray" face="verdana">
<b>咱們的目標 ： 學習 學習 學習<br /></b>
<b>加油 ！！！ 加油！！！<br /></b>
<b>搖擺-----------------------------搖擺<br /></b>
</font>
</div>
<img src="https://www.cnblogs.com/images/cnblogs_com/cainiaoxiansheng/1308455/o_shandian.gif" style="width:100%"/>

<!-- 打賞插件 -->
<script>
window.tctipConfig = {
imagePrefix: "http://files.cnblogs.com/files/kdy11/",
cssPrefix: "http://files.cnblogs.com/files/kdy11",
buttonImageId: 1,
buttonTip: "dashang",
list:{
alipay: {qrimg: "https://files-cdn.cnblogs.com/files/cainiaoxiansheng/zfb2.bmp"},
weixin:{qrimg: "https://files-cdn.cnblogs.com/files/cainiaoxiansheng/wx1.bmp"},
}
};
</script>
<script src="https://files.cnblogs.com/files/mmzs/tctip.js"></script>

頁腳Html代碼：

<script>
addNag("博客首頁","https://www.cnblogs.com/cainiaoxiansheng/",1);
addNag("python","https://www.cnblogs.com/cainiaoxiansheng/category/1334937.html",2);
addNag("Robotframework","https://www.cnblogs.com/cainiaoxiansheng/category/1450185.html",2);
addNag("JMeter","https://www.cnblogs.com/cainiaoxiansheng/category/1334940.html",2);
addNag("Fiddler","https://www.cnblogs.com/cainiaoxiansheng/category/1450186.html",3);
addNag("工具彙總","https://www.cnblogs.com/cainiaoxiansheng/category/1450187.html",6);
addNag("問題解決","https://www.cnblogs.com/cainiaoxiansheng/category/1450188.html",6);
addNag("偶爾雜誌","https://www.cnblogs.com/cainiaoxiansheng/category/1450189.html",6);
function addNag(linkName,linkHref,linkLocation){
//得到導航DOM對象
var _navigator = document.getElementsByTagName("ul")[0];
//建立導航無序列表中的li
var _link = document.createElement("li");
var _a = document.createElement("a");
_a.class="menu";
_a.href= linkHref;
var _text = document.createTextNode(linkName);
_a.appendChild(_text);
_link.appendChild(_a);
//添加至指定的位置
var _lis = _navigator.getElementsByTagName("li");
if(linkLocation > _lis.length && linkLocation > 0){
_navigator.appendChild(_link);
}else{
_navigator.insertBefore(_link,_lis[linkLocation-1]);
}
}
</script>

 

設置完後，回到本身博客主頁，看下頁面顯示 ，根據本身須要，去更改上列代碼