[aaronyang]分享個人博客園皮膚代碼

時間  2019-11-26
標籤 aaronyang 分享 個人 博客 皮膚 代碼 简体版
原文   原文鏈接

個人皮膚很差看，你打我..javascript

絕對感受醉好用醉好的博客園皮膚，皮膚都給了，100塊都不給我~php

在博客園後臺裏面：有個設置選項，打開它css

第一步：給你的博客去個主標題和副標題html

第二步：選擇博客基礎皮膚，並勾選禁用模板默認css前端

定製css代碼以下：java

/*公用*/
body {
    font-size:15px;
    padding:0;
    margin:0;
    font-family:"微軟雅黑","宋體",Arial;
    background:#243B0D url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_1335233352rbUwTp.jpg') no-repeat top center fixed;
    min-width:1200px;
}

#home {
    opacity:1;
    filter: alpha(opacity=100);
    box-shadow:0 0 10px #1C5495;
    margin:20px auto;
    width:96%;
    background:#fff;
    overflow:auto;
    border:solid 1px #fff;

}
/*段落*/
.postBody p,.postCon p {
    margin:3px 0;
    line-height:24px;
}
h3 {
    font-size:16px;
    font-weight:bold;
margin-bottom:3px;
background:#1D5796;
width:177px;
padding:5px;
text-shadow:2px 0px 11px #333030;
}
/*超連接*/
a {
    color:#464646;
    text-decoration:none;
}

a:visited,a:hover {
    color:#464646;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
image {
    border:none;
}
#header {
    padding:5px;
}
/*博客標題*/
#blogTitle,#blogTitle a {
    font-weight:bold;
    color:#2796DE;
}
#blogTitle .title {
    margin-top:20px;
    height:100px;
    line-height:100px;
    font-size:55px;
    padding-left:120px;
    background:#fff url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_homelogo1.png') no-repeat;
}
.headermaintitle {
    }
#blogTitle,#blogTitle a:hover {
    text-decoration:none;
}
/*子標題*/
.subtitle {
    padding-left:30px;
    font-size:16px;
    color:#1E88AB;
    font-weight:normal;
    margin:5px 0;
}
/*導航欄*/
#navigator {
    font-size:16px;
    height:48px;
    background:#144F94;
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
    margin:0 auto;
    z-index:100;
}
#navList li {
    margin:0;
    line-height:40px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    background:#0A1F34;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    height:48px;
    color:#fff;
    line-height:48px;
}
#main {
    padding:35px;
}
/*左邊*/
#sideBarMain {
    padding:0 10px 0 0;
    background:#fff;
    margin:0 0 20px 0;
    width:240px;
    font-size:12px;
    line-height:22px;

}


#sideBarMain a {
    color:#ffffff;
}
#leftcontentcontainer {
    color:#ffffff;
}
.newsItem {
    color:#ffffff;
}
/*公告*/
#profile_block {
    width: 172px;
    background: #1D5796;
    border: 1px solid #14497F;
    padding: 5px 15px;
    margin:10 0 10px;
}


/*主面板*/
#mainContent {
    margin-top:0px;
    padding-top:0px;
    padding-right:0px;
    background:#fff;
    padding-bottom:0px;
    float:right;
    width:98%;
    padding-left:0px;

}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    margin-right:-10px;
    margin:0 0 20px 0;
}
/*博客標題*/
.postTitle a {
    color:#144D8C;
}
.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#464646;
    width:100%;
background:url('http://images.cnblogs.com/cnblogs_com/AaronYang/476978/o_blog12.png') no-repeat 0 3px;
    padding-left:30px;
}
.dayTitle {
    display:none;
}


/*摘要*/
.c_b_p_desc {
    padding:2px;
    line-height:24px;
    color:#888;
}


.c_b_p_desc a {
    color:#086F95;
}
.c_b_p_desc a:hover {
    text-decoration:none;
    border-bottom-width:1px;
    border-bottom-style:dotted;
    color:#259BD2;
}
/*右側圖片*/
.desc_img {
    margin-left:10px;
    border:solid 1px #fff;
    box-shadow:0 0 10px #aaa;
    float:right;
}
/*博文頁*/
#topics .post {
    background:#fff;
}
.postCon {
    padding:10px 0px 0 5px;
    width:100%;
}
.postDesc {
    margin:0 30px;
    margin-bottom:2px;
    padding:8px 0px;
    font-size:12px;
    color:#aaa;
    background:#fff;
    text-align:right;
}
.postDesc a {
    color:#1C5495;
}
.postBody {
    padding:0;
}
/*google搜索框*/
#google_q,#q {
    height:22px;
    width:120px;
    border:solid 1px #ccc;
    box-shadow:inset 0 0 3px #ddd;
    border-radius:4px;
}
/*搜索按鈕*/
.btn_my_zzk {
    font-family:'Microsoft Yahei';
    border:none;
    height:26px;
    width:60px;
    padding:1px;
    font-size:14px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#55895B;
    border-radius:4px;
    color:#fff;
}
.btn_my_zzk:hover {
    background:#6DA47D;
}
/*評論按鈕*/

#btn_comment_submit {
    border:none;
    height:48px;
    width:910px;
}
/*評論按鈕*/
.comment_btn {
    font-family:'Microsoft Yahei';
    border:none;
    height:48px;
    width:120px;
    font-size:18px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#1C5495;
    color:#fff;
}

#btn_comment_submit:hover {
    background:#0495FF;
}

/*評論標題*/
.feedback_area_title {
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#1C5495;
    border-bottom:solid 6px #0495FF;
}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
.comment_quote {
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;
}
#commentform_title {
    color:#1C5495;
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:10px 20px 10px 10px;
    font-size:24px;
    font-weight:bold;
    border-bottom:solid 6px #1C5495;
}
/*評論框*/
#comment_form {
    margin:10px 0;
    padding:0;
}
.commentform {
    margin:10px 0;
    padding:10px 20px;
    background:#fff;
}
/*評論輸入域*/
#tbCommentBody {
    font-family:'MIcrosoft Yahei';
    margin-top:10px;
    width:940px;
    max-width:940px;
    min-width:940px;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    padding:10px;
    height:120px;
    font-size:14px;
    min-height:120px;
}
/*評論條目*/
.feedbackItem {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
    font-weight:normal;
}
/*分類頁*/
.entrylist {
    padding:10px 20px;
    background:#fff;
}
.entrylistItem {
    margin:10px 0;
    padding:10px;
}
.entrylistPosttitle {
    font-size:18px;
    font-weight:bold;
    background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left:30px;
}
.entrylistPostSummary {
    padding:10px;
}
.entrylistItemPostDesc {
    font-size:12px;
    color:#999;
    padding-left:40px;
}
/*尾部*/
#footer {
    font-size:12px;
    margin:20px;
    padding:12px;
    text-align:center;
    background:#144F94;
    color:#DDD;
    font-size:14px;
}
/*文章內圖片*/
#cnblogs_post_body p img {
    margin:5px;
}
#cnblogs_post_body{
padding:3px;
}
/*頂一下*/
.diggnum {
    font-size:28px;
    color:#428133;
    font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
    line-height:100px;
}
.diggit {
    float:left;
    width:128px;
    height:128px;
    background:url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_o_dig.gif') no-repeat;
    background-position:0 0;
    text-align:center;
    cursor:pointer;
}
.diggit:hover {
    background-position:-128px 0;
}
/*踩一下（園友反映，這個有點「邪惡」，呵呵，實際上是我沒來得及設計這個背景圖片，就暫時把它隱藏了……能夠去掉這句話）*/
.buryit {
    display:none;
}
.diggword {
    display:none;
}
/*green_channel*/
#green_channel {
    text-align:right;
    height:30px;
    background:#237DE5;
    padding-left:20px;
    font-weight:normal;
    font-size:12px;
    border:none;
    color:#fff;
    padding:9px;
    position:fixed;
    right:0px;
    bottom:0px;
    opacity: 0.2;
    filter: alpha(opacity=20);
}
#green_channel:hover{
   filter:alpha(opacity=100);
    opacity:1;
 background:#26476D;
 -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    transition:all .5s ease-out;
}
/*最新評論*/
#myposts .PostList {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
    color:#132103;
}
::selection {
    background:#BA6701; 
    color:white; 
}
::-moz-selection {
      background:#BA6701;
color:white;  
}
::-webkit-selection {
     background:#BA6701;
     color:white; 
}
.catListPostCategory {
    width: 172px;
    padding: 5px 15px 5px;
    background: #1D5796;
    color: white;
    margin-top:4px;
    border: 1px solid #14497F;
    font-family:"微軟雅黑","宋體",Arial;
}

    .catListPostCategory a {
        margin: 0 -15px;
        display: block;
        padding: 5px 10px;
        color: #ffffff;
    }

        .catListPostCategory a:hover {
            background: #EB453D;
           width:200px;
            text-decoration: none;
-moz-box-shadow:2px 2px 5px #333333, 0px 0px 6px #2D3636; -webkit-box-shadow:2px 2px 5px #333333, 0px 0px 6px #2D3636; box-shadow:2px 2px 5px #333333, 0px 0px 6px #2D3636;
             color: #ffffff;
        }
.boxshadow2{
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);

}
@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5); 
        width:175px;       
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
        width:160px;
    }
}
@-webkit-keyframes glowred {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(202, 137, 137, 0.5);
        border-color: rgba(197, 73, 73, 0.5); 
             
    }
    100% {
        -webkit-box-shadow: 0 0 16px rgba(230, 72, 51, 1.0), 0 0 38px rgba(220, 34, 4, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.boxshadow3{
    background-color:#f0f3f9;
    -webkit-animation-name: glowred ;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

.boxshadow2:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}
.boxshadow{
-moz-box-shadow:0px 1px 1px #333333; -webkit-box-shadow:0px 1px 1px #333333; box-shadow:0px 1px 1px #333333;
}

.catListBlogRank ul{
width:122px;
 background: #1D5796;
    border: 1px solid #14497F;
    padding: 5px 15px;
margin:8 0 10px;
-moz-transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-o-transform-origin:0% 0%;transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);transform-origin:0% 0%
}
.catListBlogRank ul li{
color:#ffffff;
font-size:15px;
text-shadow:2px 0px 11px #333030;

}
.catListBlogRank h3{
display:none;
}
/*---滾動條默認顯示樣式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#018EE8;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:2px;  
   border: 2px solid #fff;  
}  
 
/*---鼠標點擊滾動條顯示樣式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#6FABEC;  
   height:50px;  
   -webkit-border-radius:2px;  
}  
 
/*---滾動條大小--*/  
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
 
/*---滾動框背景樣式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}
::-webkit-scrollbar-thumb:active{
      height:50px;
      background-color:#033367;
      -webkit-border-radius:2px;
  }
.headph:hover img{
  -webkit-transform:rotate(360deg) scale(1.5);
    -moz-transform:rotate(360deg) scale(1.5);
    -o-transform:rotate(360deg) scale(1.5);
    -ms-transform:rotate(360deg) scale(1.5);
    transform:rotate(360deg) scale(1.5);  
}
.headph img{
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;    
    transition:all 1s ease-in-out;
    width:48px;
    height:48px;
}
aaronyang 博客皮膚代碼

部分講解：jquery

body {
    font-size:15px;
    padding:0;
    margin:0;
    font-family:"微軟雅黑","宋體",Arial;
    background:#243B0D url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_1335233352rbUwTp.jpg') no-repeat top center fixed;
    min-width:1200px;
}

background設置整個博客的背景圖片，個人是一張水的圖片，你能夠在博客園後臺相冊裏面上傳圖片git

你能夠新建兩個相冊，1個是用於博客皮膚資源存放的，一個是用於博客首頁顯示你的靚照的程序員

本身的靚照的相冊裏面的，相片注意事項：web

1.因爲css樣式側邊欄的限制，目前個人最佳尺寸是175px的寬，你能夠使用美圖秀秀 等比例縮放你的照片就好了

2.照片上傳的名稱是有規律的，個人是統一  1.jpg,2.jpg,3.jpg...這樣子上傳的話，博客園自動處理成o_1.jpg,o_2.jpg,o_3.jpg...

講解二：

http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_o_dig.gif是博客內容下，推薦 連接的圖片，你能夠ctrl+f查找這個位置，本身在相冊裏上傳，而後替換地址便可，若是圖片規格不同，本身調整css代碼

講解三：

http://images.cnblogs.com/cnblogs_com/AaronYang/476978/o_blog12.png  是文章標題前面的圖片

講解四：

http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_homelogo1.png是博客你的logo的圖片，這張圖片在博客最上方能夠看到

講解五：

#green_channel  樣式，是右下角的分享，推薦的那個樣式

講解六：

博客內容詳情頁，才顯示快速評論，博客只有滾動了必定內容後，會自動全屏閱讀，右上角顯示滾動到頂部的按鈕

快速評論難點，由於閱讀到必定高度，才全屏，因此要連續滾動到指定位置兩次，才能精肯定位到評論框，哈哈，不過解決了。

滾動條自動全屏難點：之前會影響到滾動的性能，如今已經優化的很好了，不用擔憂哈。

講解七：

#home 樣式，調整opacity和filter的值，能夠調整整個博客的透明度，好比，我調整到0.7，整個博客就會水汪汪的~

#home {
    opacity:1;
    filter: alpha(opacity=100);
    box-shadow:0 0 10px #1C5495;
    margin:20px auto;
    width:96%;
    background:#fff;
    overflow:auto;
    border:solid 1px #fff;

}

更多細節，請本身調整吧

第三部分：博客側邊欄公告（支持HTML代碼）

讓你擁有本身的隨機靚照和本身的qq羣宣傳吧

<div style=" width: 172px;
    background: #1D5796;
    border: 1px solid #14497F;
    padding: 5px 15px;
    margin:8 0 10px;"> 
<p id="AaronYangImg"></p>
<p>
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=66b827eb0962ef9375d6b80dd8327f43c06f07742b73084a7bfe74ef013cf871">
<img class="boxshadow" style="
-webkit-border-top-right-radius:2em;
-webkit-border-top-left-radius:0em;
-webkit-border-bottom-left-radius:2em;
-webkit-border-bottom-right-radius:0em;
-moz-border-radius-topright:2em;
-moz-border-radius-topleft:0em;
-moz-border-radius-bottomleft:2em;
-moz-border-radius-bottomright:0em;
border-top-right-radius:2em;
border-top-left-radius:0em;
border-bottom-left-radius:2em;
border-bottom-right-radius:0em;
" src="http://images.cnblogs.com/cnblogs_com/fresh-air/385358/o_2.jpg"  alt="羣號:135043714,這個羣含有豐富的最新的.NET電子書和技術解決方案。資源數超過200，高級C#書籍一大堆" title="這個羣含有豐富的最新的.NET電子書和技術解決方案。資源數超過200，主要是C#書籍，固然也有PHP,JAVA等" width="80" height="80" /></a>
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=6ff5dc5409adb3f3d10d8e6e7ee6a21e55cedd6fa86228f17a9c5e0e5b690a00">
<img class="boxshadow"  src="http://images.cnblogs.com/cnblogs_com/fresh-air/385358/o_%E5%9B%BE%E5%83%8F%205_%E5%89%AF%E6%9C%AC2.jpg" style="-webkit-border-top-left-radius:2em;
-webkit-border-top-right-radius:0em;
-webkit-border-bottom-right-radius:2em;
-webkit-border-bottom-left-radius:0em;
-moz-border-radius-topleft:2em;
-moz-border-radius-topright:0em;
-moz-border-radius-bottomright:2em;
-moz-border-radius-bottomleft:0em;
border-top-left-radius:2em;
border-top-right-radius:0em;
border-bottom-right-radius:2em;
border-bottom-left-radius:0em;" alt="羣號：193247142（實驗室人已滿，不招了），入實驗室的條件：C#學習者，必須有必定的基礎，不問一些很低級的問題，不聊一些無關本羣宗旨的夥伴，愛分享知識，有本身的學習計劃，只限招收50人，能進一步的跟我交流技術" title="入實驗室的條件：C#學習者，必須有必定的基礎，不問一些很低級的問題，不聊一些無關本羣宗旨的夥伴，愛分享知識，有本身的學習計劃，只限招收50人，能進一步的跟我交流技術" width="80" height="80" /></a>
</p>


</div>
<script>
var chars = ['24','24','33','34','35','36','29','30','31','2','4','32','37','38'];

function generateMixed(n) {
     var res = "";
     for(var i = 0; i < n ; i ++) {
         var id = Math.ceil(Math.random()*13);
         res += chars[id];
     }
     return res;
}

$(function(){
$("#AaronYangImg").html('<a href="http://user.qzone.qq.com/875556003" target="_blank"><img class="boxshadow2" src="http://images.cnblogs.com/cnblogs_com/AaronYang/489758/o_'+generateMixed(1)+'.jpg" alt="AaronYang" title="點我進入AaronYang的QQ空間"/></a>');
});</script>

這裏我建立了一個 <p id="AaronYangImg"></p>

而後再下面建立了一個chars數組（注意，第一個，第二個元素值要同樣哦），實際上是相冊裏面 圖片的名稱，下面寫了一個隨機數方法。

下面*13  是 chars的長度減去1。好了，這裏很少講了，本身去摸索吧

QQ羣代碼生成連接地址：點擊前往

第四部分：頁首HTML代碼

<style type="text/css">
    .Abstract
    {
        padding: 15px;
        border: dotted 2px #999;
        color: #999;
        font-family: 'Microsoft Yahei';
        border-radius: 4px;
    }
        
    .First
    {
        margin: 10px 0;
        font-family: 'Microsoft Yahei';
        text-align: left;
        padding: 6px 20px;
        color: #fff;
        background: #55895B;
        font-size: 20px;
        border-radius: 4px;
        clear: both;
    }
        
        
    .Second
    {
        margin: 10px 0;
        font-family: 'Microsoft Yahei';
        padding: 6px 20px;
        background: #93C8A2;
        color: #fff;
        font-size: 18px;
        border-radius: 4px;
        clear: both;
    }
        
        
    .Third
    {
        margin: 10px 0;
        padding: 6px 20px;
        font-family: 'Microsoft Yahei';
        margin: 15px 0;
        font-size: 16px;
        color: fff;
        background: #C6EFD2;
        color: #999;
        border-radius: 4px;
        clear: both;
    }
    .note
    {
        margin: 10px 0;
        padding: 15px 20px 15px 60px;
        background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png') no-repeat 20px 0;
        font-size: 15px;
        font-family: 'Microsoft Yahei';
        box-shadow: 0 0 8px #aaa;
        clear: both;
    }
        
    .demo
    {
        text-align: left;
        padding: 6px 20px;
        overflow: auto;
        border-radius: 4px;
        background: orange;
        color: #fff;
        font-size: 16px;
        clear: both;
    }
        /* Image style */
#scrollUp {
-moz-box-shadow:1px 1px 5px #333333; -webkit-box-shadow:1px 1px 5px #333333; box-shadow:1px 1px 5px #333333;
    top: 0px;
    right: 10px;
    height: 58px;  /* Height of image */
    width: 58px; /* Width of image */
    background: url("http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_selectTop3.png") no-repeat;
         
}
  
</style>

<script>
$(function(){
$("#header").append('<div id="cnzzDivPlace" style="width:100%;margin-top:-5px;"></div>');

$("#green_channel").append('<div id="pageSign"></div>');

});
</script>

這裏有個scrollup樣式，有個圖片，就是回到頂部的那個按鈕的代碼和樣式調節的地方

下面我家了一個js，cnzzDivPlace是cnzz統計代碼的顯示位置

第五部分：頁腳HTML代碼

<span style="float:right;padding-right:10px;padding-top:10px;padding-bottom:10px" 

id="cnzzspan">
<a id="openWin" target="_blank" ></a>   
<font color='red'>【推薦】</font>
<a href="http://www.cnblogs.com/aaronyang/archive/2013/05/07/3065090.html" 

target="_blank"><font color='red'><b>程序員網址大全</b></font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.cnblogs.com/AaronYang/tag/EntityFramework/" 

target="_blank"><font color='red'>EF CodeFirst</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/AaronYang/tag/aaronyang百度地圖/" 

target="_blank">百度地圖.NET</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/AaronYang/archive/2013/06/03/3113543.html" 

target="_blank">MyNPOI</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/AaronYang/tag/%E5%BC%80%E6%BA%90/" 

target="_blank"><b>開源</b></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/AaronYang/archive/2013/05/15/3079046.html" 

target="_blank">個人皮膚</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/aaronyang/tag/ASP.NET%20MVC4%20IN%20ACTION/" 

target="_blank">ASP.NET MVC4</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/AaronYang/tag/JavaScript/" target="_blank">前端提高

</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/aaronyang/tag/%E9%82%A3%E5%A4%A9%E6%9C%89%E4%B8%AA

%E5%B0%8F%E5%AD%A9%E8%B7%9F%E6%88%91%E8%AF%B4LINQ/" target="_blank">LINQ

</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 

href="http://www.cnblogs.com/AaronYang/tag/WCF%E7%B3%BB%E5%88%97/" target="_blank">WCF

</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.cnblogs.com/aaronyang/tag/EasyUI/" 

target="_blank">EasyUI</a>&nbsp;&nbsp;|
<script src="http://s14.cnzz.com/stat.php?id=4725984&web_id=4725984&online=2" 
language="JavaScript">
</script>
</span>
<script src="http://files.cnblogs.com/AaronYang/jquery.scrollUp.min.js" language="JavaScript"></script>
<script>
function ScrollFunction() {
        var sTop = $("#tbCommentBody").offset().top-189;
        $("html,body").animate({ scrollTop: sTop }, 500,function(){
        var sTop2 = $("#tbCommentBody").offset().top-189;
         $("html,body").animate({ scrollTop: sTop2 },10);
     }); 
   }

$(function(){
var ite=$("#cnzzspan").remove();
$("#cnzzDivPlace").append(ite);

});

  $(window).resize(function () {
            tabResize();
        });
var $sbm=$("#sideBarMain");
var $sbar=$("#sideBar");
function tabResize(){
var lh=$sbm.width();
var rh=$("#home").width()-lh-60;
$("#mainContent").width(rh);

}
var heighss=1300;
$(window).load(function(){

     tabResize();
var pinglun=$("#commentform_title");
if(pinglun.length>0){
$("#navList").append('<li style="background:#F15871" class="boxshadow3"><a id="MyLinks1_comment" class="menu" style="text-shadow:0px 0px 6px #E3D342;" href="javascript:ScrollFunction()">快速評論</a></li>');
}
$("li.liRank").css({"cursor":"pointer"});
$("li.liRank").click(function(){
  var obj = document.getElementById("openWin");   
  obj.href = "http://www.cnblogs.com/AllBloggers.aspx";   
  obj.click();  
});
   

var isIE = !!window.ActiveXObject; 
var isIE8 = isIE && !!document.documentMode; 
$.scrollUp();
$("#scrollUp").text("");
$("#scrollUp").attr("title","[AaronYang]楊洋\n幫你回到頂部");

var firstStep=true;
var SecStep=true;

lastkuandu=$("#mainContent").width();
  var $navc=$("#navigator");
    //獲取要定位元素距離瀏覽器頂部的距離
    var navH = $navc.offset().top;
       
    //滾動條事件
    $(window).scroll(function(){
        //獲取滾動條的滑動距離
        var scroH = $(this).scrollTop();
                    if(scroH>=navH){
                      if(firstStep){
                    
                         firstStep=false;
      $navc.css({"position":"fixed","top":0,"left":"0%","width":"100%","z-index":"1000"});
                         $navc.addClass("boxshadow");
                     
                      }
                    if(!isIE8&&scroH>heighss&&SecStep&&$sbm.width()>2){
                         SecStep=false;
                         $sbm.css({"width":"0px"});
                         $sbar.hide();
                         tabResize();

                    } 
                   if(isIE8&&scroH>heighss&&SecStep&&$sbm.width()>2){
                         SecStep=false;
                         $sbm.css({"width":"0px"});
                        // $sbar.css({ opacity: 0 }); // 全部瀏覽器有效
                         $sbar.slideUp();
                         tabResize();

                    }
               }else if(scroH<navH){
                         if(!firstStep){
                            firstStep=true;
                         $navc.css({"position":"static","margin":"0 auto","width":"100%"});
                            $navc.removeClass("boxshadow");
                           }
                         if(!isIE8&&scroH<heighss&&(!SecStep)&&$sbm.width()<3){
                            SecStep=true;
                            $sbm.css({"width":"240px"});
                            $sbar.show();
                            tabResize();
                          }
                       if(isIE8&&scroH<heighss&&(!SecStep)&&$sbm.width()<3){
                            SecStep=true;
                            $sbar.slideDown();
                            $sbm.css({"width":"240px"});
                            tabResize();
                          }
                      }
            });

});


</script>
<script>
var Enabled = true;
$(window).load(function () {
$("#sideBarMain").css({"margin-left":"-30px"});
$.each($(".feedbackItem"),function(i,t){

var comt=$(this).find(".blog_comment_body");

var commentBodyId =comt[0].id; 
var commentId = commentBodyId.substr(commentBodyId.lastIndexOf("_")+1);
var hUrl = $("#comment_"+ commentId+"_avatar").html();
if(hUrl==null){
hUrl ='http://images.cnblogs.com/cnblogs_com/AaronYang/476978/o_11.jpg';
}
   $(this).find("div.feedbackListSubtitle").before('<div style="margin: 0;position:relative;border-radius:5px;width: 49px; height: 49px; border: 2px solid #dddddd;float:left;margin-right:25px;margin-top:10px;"><div class="headph"><img src="'+hUrl+'" alt="AaronYang" style="border-radius:5px;border: medium none; background: none repeat scroll 0% 0% transparent; visibility: visible; padding: 0pt; margin: 0pt; width: 48px; height: 48px; clip: rect(0px, 94px, 94px, 0px); "></div></div>'); 

var hasl=$(this).find("span.louzhu");
if(hasl[0]){
$(this).css({"background":"#252525","color":"#fff"});
$(this).find("a[title='查看所回覆的評論']").css({"color":"#fff"});
}

});




    if (Enabled) {
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var isIE8 = isIE && !!document.documentMode;
var isIE7 = isIE && !isIE6 && !isIE;
        var broTip = $("#browserTip");
        if (broTip.length < 1 && (isIE6 || isIE7 || isIE8)) {
            $("#home").before("<div id=\"browserTip\" style=\"opacity:1;width:100%;height:30px;display:none;line-height:30px;border:1px solid #A8AAAC;text-align:center;background:#ffffff;valign:middle\">AaronYang提醒：親，你的瀏覽器不給力哦，爲了得到更好的體驗效果，建議使用<a target=\"_blank\" href=\"https://www.google.com/intl/zh-CN/chrome/browser/\" style=\"color:red;text-decoration:underline\">谷歌瀏覽器</a>或<a target=\"_blank\" style=\"color:red;text-decoration:underline\" href=\"http://firefox.com.cn/download/\">火狐瀏覽器</a>瀏覽本網站 &nbsp;&nbsp;&nbsp;&nbsp;<a href=\"javascript:CloseVersionTip()\">當即關閉</a></span></div>");
            $("#browserTip").slideDown();
            setTimeout(CloseVersionTip, 8000);
        } else {
            $("#browserTip").slideDown();
            setTimeout(CloseVersionTip, 8000);
        } 
    }
});
function CloseVersionTip() {
    var broTip = $("#browserTip");
    if (broTip) {
        $("#browserTip").slideUp();
    }
}

</script>
aaronyang 頁腳html代碼

在這裏你能夠調節  二級菜單，這裏的地址，建議是tag標籤。這裏我加了ie瀏覽器判斷，若是ie推薦谷歌或者火狐，用不着的能夠刪掉

cnzz的js代碼怎麼得到，本身去cnzz那裏學習吧，或者用百度統計也能夠。

這裏有 獨一無二的  二級菜單，獨一無二的評論頭像，獨一無二高大上的快速評論按鈕，博主回覆內容高亮，獨一無二的閱讀體驗（自動全屏），獨一無二的相冊展現

第六部分：拓展

博客分享插件

若是你想要  分享那個插件，能夠本身去找個插件，而後生成一段javascript代碼，放到頁腳html代碼處就好了，列子

<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code_mini/jiathis_r.js?

uid=1362230515548537&move=0&amp;btn=r3.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->

博客背景音樂思路：

找個音樂播放空間，上傳一首歌，而後在線播放，拷貝別人的flash生成後的代碼，加載博客的地步就好了，而後把播放器的透明度調低，示例代碼：

<div class="player" id="player" style="opacity: 0.1;filter: alpha(opacity=10);"><object type="application/x-shockwave-flash" data="http://m.zonse.net/player/?php=music" width="100%" height="40" id="cmp"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><param name="flashvars" value="lists=Playerlist.php%3Fid%3D12709&amp;src=http%3A%2F%2FM.ZonSe.Net%2FMusic%2FData%2FUpload%2F0E88BEF6B420313864476A1276B73D90.mp3"></object></div>

 

第七部分：爲了讓你的文章更好看閱讀，我本身寫了一個適合本博客閱讀排版簡單示例

代碼，我放到了個人博客官網上的那篇博客去了： 點擊查看完整版

之後也在那裏更新博客了，這邊的博客我以爲有用的我已經遷移過去了。

謝謝你已經閱讀完，若是你有什麼技術問題，能夠到 點擊這裏 給我留言

（個人bootstrap還沒學，請不要太在意個人排版。。我先學bootstrap吧，由於那個wordpress就是bootstrap主題的，默認引入了bootstrap的js包了）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程