博客園主題修改

目前使用的是Simple Bule主題修改得到，無需“禁用模板默認CSS”主要實現了下面幾個功能，歡迎收藏和點評：

1. 頁面定制CSS代碼，進行樣式修飾，可供參考與自行修改，修改背景色、閱讀界面顏色、評論框樣式等等，修飾頁面中的p標簽和h系列標簽
2. 博客側邊欄公告，添加了一個頭像，點擊頭像會跳出標語，添加太多影響找尋文章
3. 頁首Html代碼，右上歡迎詞與左上搜索框，搜索框需要點技術含量，已經相對完善，可是沒服務器，提示詞是死的，博主正在嚎啕大哭中。。。
4. 頁腳Html代碼，實現的功能較多，例如添加鏈接到菜單欄，添加導航目錄，添加每篇博客最后面的注明，添加閱讀模式與正常模式等等

頁面定制CSS

這里只講側邊和閱讀界面的p和h系列標簽

.catListEssay ul li,
.catListLink ul li,
.catListNoteBook ul li,
.catListNoteBook ul li,
.catListTag ul li,
.catListPostCategory ul li,
.catListPostArchive ul li,
.catListArticleArchive ul li,
.catListImageCategory ul li,
.mySearch ul li,
.catListComment ul li,
.catListView ul li,
.catListFeedback ul li
{
    overflow: hidden;/*超過長度隱藏*/

    padding: 5px;/*內部全方位距離*/
    /*上下左右邊框*/

    border-top: 1px solid #dadfe1;
    border-right: 1px solid #dadfe1;
    border-bottom: 1px solid #dadfe1;
    border-left: 1px solid #dadfe1;
}

.catListPostCategory li:hover,
.catListFeedback li:hover,
.catList li:hover,
.catListEssay li:hover,
.catListView li:hover
{
    border-left-width: 2px;/*左邊框長度*/
    border-left-color: #f60;/*左邊框顏色*/
}

.catListPostCategory li a,
.catListFeedback li a,
.catListView li a,
.catListEssay li a,
.catList li a
{
    display: block;/*前后添加換行符*/
    overflow: hidden;/*超過長度隱藏*/

    white-space: nowrap;/*超過長度是否換行*/
    text-decoration: none;/*鏈接不顯示下划線*/
    text-overflow: ellipsis;/*類似於上面的overflow*/

    background-color: white;/*背景顏色*/
}

#cnblogs_post_body p
{
    font-family: '微軟雅黑';/*設置字體*/
    font-size: 14px;/*設置大小*/

    width: 97.2%;/*設置長度*/
    margin-left: 5px;/*左邊距*/
    padding: 1%;/*內部距*/
    padding-left: 5px;/*內部離邊框距離*/

    color: black;/*顏色*/
    border-radius: 5px;/*框的厚度*/
    background-color: #fffcc4;/*背景色*/
}

#cnblogs_post_body h1
{
    font-family: '微軟雅黑';/*設置字體*/
    font-size: 23px;/*設置大小*/

    margin-top: 20px;/*外部距上邊標簽距離*/
    margin-bottom: 20px;/*外部距下邊標簽距離*/
    padding-left: 19px;/*內部距做邊框距離*/

    color: #4169e1;/*顏色*/
    border-left: 15px solid #4169e1;/*左邊框*/
    background: #f5f5f5 !important;/*背景色*/
}
/*h2，h3類似，不再詳述*/

博客側邊欄公告

貼貼鏈接、圖像、swf動畫什么的，可以參考一下我的，貼多了占空間，不方便找文章，建議如果要貼的話記得少貼點，哈哈。我的代碼可以直接貼，只需要修改圖像地址和大小，里面要引用我的博客內部css和js，要修改的可以自行下載然后修改，下載地址在最后面會給出。

                    <link type="text/css" rel="stylesheet" media="screen" href="http://files.cnblogs.com/files/tufujie/style.css" />
                    
                    
                    <div class="picBox">
                        <ul class="picL" id="picLsy" >
                            <li>
                                <a href ="http://home.cnblogs.com/u/tufujie/" target="_blank"><img src="http://images2015.cnblogs.com/blog/512541/201512/512541-20151228221133120-1394173186.jpg" alt="" width="210px" height="210px" /></a>
                                <div class="text">
                                    <b>歡迎訪問我的博客</b>
                                    <p><a href="http://home.cnblogs.com/u/tufujie/" target="_blank" title="Jacksile的主頁" >相互學習，傳遞知識，共同進步！——《Jacksile的博客》</a></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    
                    <script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/jquery.min.js"></script>
                    <script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/jquery.easing.min.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                            
                            $("#picLsy li").hover(function(){
                                $(this).find('.text:not(:animated)').animate({top:"0px"}, {easing:"easeInOutExpo"}, 50, function(){});
                            },function () {
                                $(this).find('.text').animate({top:"176px"}, {easing:"easeInOutExpo"}, 50, function(){});
                            });
                            
                        });
                    </script>
                    

頁首Html代碼

頁首的歡迎詞沒什么技術含量，主要是搜索框，有點技術含量的哦，里面的提示詞可以自行修改！

<style type="text/css">

  #auto_div{
    display: none;
    width: 257px;
    border: 1px #74c0f9 solid;
    background: #FFF;
    position: absolute;
    top: 24px;
    left: 0;
    margin-top: 15px;
    color: #323232;
    /*設置顯示在當前頁面的上一層*/
    z-index: 1;
  }

  .side_search{
    float: left;
    position: relative;
    height: 31px;
    margin-left: 25px;
    display: inline-block;
  } 
  .side_search:hover{
    -webkit-box-shadow: 0 0 3px #999;
    -moz-box-shadow: 0 0 3px #999
  }
  .search_input {
    width: 210px;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    border: 1px solid #999;
    border-radius: 2px 0 0 2px;
    padding: 4px 7px;
    background-color: #fbfbfb;
  }
  .delete_btn{
    background: #fbfbfb;
    margin-left: -6px;
    border: 1px solid #fbfbfb;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: red;
    font-weight: bold;
    width: 38px;
    font-size: 25px;
    height: 38px;
    padding-bottom: inherit;
  }

  .search_btn {
    border-radius: 3px 3px 3px 3px;
    background: #4d90fe;
    margin-left: -7px;
    border: 1px solid #4d90fe;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #f3f7fc;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
  }

  .search_btn:hover{background:#1874CD} 

  .search_btn2 {
    border-radius: 3px 3px 3px 3px;
    background: #F0CB85;
    border: 1px solid #F0CB85;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #DC143C;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
  }

  .search_btn2:hover{background:#DEB887} 

  input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
  }

</style>
<script src="http://files.cnblogs.com/files/tufujie/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        //測試用的數據
        var test_list = ["Java", "Java SE", "Java EE", "SSH", "JavaBean", "Servlet", "JSP", "DB", "MySQL", "Oracle", "HTML/CSS", "JavaScript", "jQuery", "AJAX", "Software", "Sublime Text", "Git", "Visual Studio Code", "Eclipse","Configuration", "System", "Java命名規范", "Java環境變量", "Subline Text快捷鍵", "Sublime Text主題下載、安裝", "Eclipse快捷鍵", "Eclipse使用個性化設計", "用U盤安裝系統", "內容太長，顯示其中的一部分"];
        var old_value = "";
        var highlightindex = -1;   //高亮

        //自動完成
        function AutoComplete(auto, search, mylist) {
          if ($("#" + search).val() != old_value || old_value == "") {
                var autoNode = $("#" + auto);   //緩存對象（彈出框）
                var carlist = new Array();
                var n = 0;
                old_value = $("#" + search).val();

                for (i in mylist) {
                  if (mylist[i].indexOf(old_value) >= 0) {
                    carlist[n++] = mylist[i];
                  }
                }
                if (carlist.length == 0) {
                  autoNode.hide();
                  return;
                }
                autoNode.empty();  //清空上次的記錄
                for (i in carlist) {
                    var wordNode = carlist[i];   //彈出框里的每一條內容

                    var newDivNode = $("<div>").attr("id", i);    //設置每個節點的id值
                    newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

                    newDivNode.html(wordNode).appendTo(autoNode);  //追加到彈出框

                    //鼠標移入高亮，移開不高亮
                    newDivNode.mouseover(function () {
                        if (highlightindex != -1) {        //原來高亮的節點要取消高亮（是-1就不需要了）
                          autoNode.children("div").eq(highlightindex).css("background-color", "white");
                        }
                        //記錄新的高亮節點索引
                        highlightindex = $(this).attr("id");
                        $(this).css("background-color", "#ebebeb");
                      });
                    newDivNode.mouseout(function () {
                      $(this).css("background-color", "white");
                    });

                    //鼠標點擊文字上屏
                    newDivNode.click(function () {
                        //取出高亮節點的文本內容
                        var comText = autoNode.hide().children("div").eq(highlightindex).text();
                        highlightindex = -1;
                        //文本框中的內容變成高亮節點的內容
                        $("#" + search).val(comText);
                      })
                    if (carlist.length > 0) {    //如果返回值有內容就顯示出來
                      autoNode.show();
                    } else {               //服務器端無內容返回 那么隱藏彈出框
                      autoNode.hide();
                        //彈出框隱藏的同時，高亮節點索引值也變成-1
                        highlightindex = -1;
                      }
                    }
                  }

            //點擊頁面隱藏自動補全提示框
            document.onclick = function (e) {
              var e = e ? e : window.event;
              var tar = e.srcElement || e.target;
              if (tar.id != search) {
                if ($("#" + auto).is(":visible")) {
                  $("#" + auto).css("display", "none")
                }
              }
            }

          }

          $(function () {
            old_value = $("#zzk_q").val();
         //    實現刷新網頁自動彈出，不喜歡，舍去
         //   $("#zzk_q").focus(function () {
         //    if ($("#zzk_q").val() == "") {
         //     AutoComplete("auto_div", "zzk_q", test_list);
         //   }
         // });

          $("#zzk_q").keyup(function () {
            AutoComplete("auto_div", "zzk_q", test_list);
          });
        });

          function quickdelete(){      
            document.getElementById("zzk_q").value ="";
          }

          function zzk_go() {
            var n = encodeURIComponent(document.getElementById("zzk_q").value);
            window.location = "http://zzk.cnblogs.com/s?w=blog%3Atufujie+" + n + "&t="
          }
          function zzk_go2() {
            var n = encodeURIComponent(document.getElementById("zzk_q").value);
            window.location = "http://zzk.cnblogs.com/s?w=" + n
          }
          function zzk_go_enter(n) {
            if (n.keyCode == 13)
              return zzk_go(), !1
          }
        </script>

        <!-- JiaThis Button BEGIN -->
        <script type="text/javascript" >
          var jiathis_config={
            data_track_clickback:true,
            siteNum:15,
            sm:"tsina,tqq,tsohu,t163,qzone,tieba,baidu,hi,txinhua,alibaba,weixin,cqq,renren,feixin,kaixin001",
            summary:"",
            boldNum:6,
            showClose:true,
            shortUrl:false,
            hideMore:false
          }
        </script>
        <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=2078113&btn=r3.gif&move=0" charset="utf-8"></script>
        <!-- JiaThis Button END -->

        <h1 style="margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1E90FF;">Welcome to Jacksile's Blog</h1>
        <div class="side_search">
          <input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" placeholder="輸入 回車搜索" tabindex="1" autofocus x-webkit-speech>
          <div id="auto_div">
          </div>
          <input onclick="quickdelete()" type="button" class="delete_btn" value="×" title="清空">
          <input onclick="zzk_go()" type="button" class="search_btn" value="本博搜索">
          <input onclick="zzk_go2()" type="button" class="search_btn2" value="園內搜索">
        </div>

頁腳Html代碼

頁腳的代碼我就是醉了，一個字，亂，兩個字，很亂，但還是很有邏輯的，應該可以無障礙閱讀

<style type="text/css">
    /*閱讀模式的CSS修飾*/
    .reading_btn {
        border-radius: 3px 3px 3px 3px;
        background: #4d90fe;
        border: 1px solid #4d90fe;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #f3f7fc;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 45px;
    }

    .reading_btn:hover{background:#1874CD}
 /*閱讀模式的CSS修飾*/
</style>


<!-- 返回最上面，需要結合頁面定制CSS代碼，要的可以找我，提供參考 -->
<div class="actGotop"><a href="javascript:;" title="返回頂部"></a></div>

<script type="text/javascript">
    $.getScript("http://files.cnblogs.com/files/tufujie/jquery.min.js",function(){$(function(){
        $(window).scroll(function() {       
            if($(window).scrollTop() >= 1000){
                $('.actGotop').fadeIn(300); 
            }else{    
                $('.actGotop').fadeOut(300);    
            }  
        });
        $('.actGotop').click(function(){
            $('html,body').animate({scrollTop: '0px'}, 800);}); 
    });})
</script>
<!-- 返回最上面，需要結合頁面定制CSS代碼，要的可以找我，提供參考 -->

<!-- 雲推送 -->
<!--cnzz tui-->
<script  type="text/javascript" c=fc charset="utf-8"  src="http://tui.cnzz.net/cs.php?id=1000099156"></script>
<!--cnzz tui-->
<!-- 雲推送 -->

<script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/bootstrap.min.js"></script>

<!-- 添加博文最后面的注明 -->
<script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/tufujie.cnblogs.js"></script>
<!-- 添加博文最后面的注明 -->

<!-- 添加文章目錄 -->
<link href="http://files.cnblogs.com/files/tufujie/tufujie.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/tufujie.nav.my1502.js"></script>
<!-- 添加文章目錄 -->

<!-- 添加菜單到菜單欄 -->
<script>
    $(function(){
        $("#navList").append('<li id="nav_file"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Files.aspx" target="_blank" title="進入文件管理">文件</a></li>');
        $("#navList").append('<li id="nav_config"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Configure.aspx" target="_blank" title="進入配置管理">配置</a></li>');
        $("#navList").append('<li id="nav_prefer"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Preferences.aspx" target="_blank" title="進入選項管理">選項</a></li>');
        $("#navList").append('<li id="nav_home"><a id="tufujie" rel="nofollow" href="http://home.cnblogs.com/" target="_blank" title="進入我的園子">園子</a></li>');
        $("#navList").append('<li id="nav_follow"><a id="tufujie" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="進入我的關注">關注</a></li>');
        $("#navList").append('<li id="nav_wz"><a id="tufujie" rel="nofollow" href="http://wz.cnblogs.com/" target="_blank" title="進入我的收藏">收藏</a></li>');
        $("#navList").append('<li id="nav_msg"><a id="tufujie" rel="nofollow" href="http://msg.cnblogs.com/inbox" target="_blank" title="進入我的消息">消息</a></li>');

            //加載圖片
            var ponum1 = $(".postTitle").length;
            var ponum2 = $(".entrylistPosttitle").length;
            if(ponum1!=0)articleimg(ponum1);
            if(ponum2!=0)entrylistarticleimg(ponum2);
        });
</script>
<!-- 添加菜單到菜單欄 -->

<!-- 閱讀模式與普通模式 -->
<script type="text/javascript">
    function readPattern(){
        var btn = document.getElementById("btnRead");
        if(btn.value=="閱讀模式")
        {
            btn.value="普通模式";
            $("#home").animate({opacity: 1,marginTop: '10px'},1000);
            $(".side_search").animate({opacity: 0,top: '-=45',height: 'toggle'},1000);
            $("#navList").animate({opacity: 0,top: '-=90',height: 'toggle'},1000);
            $("#blogTitle").animate({opacity: 0,top: '-=90',height: 'toggle'},1000);
            $("#sideBar").animate({opacity:0,left:'-=280',height:'toggle'},1000);
            $("#sideToolbar").animate({opacity:1,left:'+=1034',height:'toggle'},1000);
            $("#mainContent").animate({marginLeft:'140px',marginRight:'145px',marginTop: '-35px',width:'87.8%'},1000);
        }
        else
        {
            btn.value="閱讀模式";
            $("#home").animate({opacity: 1,marginTop: '50px'},1000);
            $(".side_search").animate({opacity: 1,top: '+=45',height: 'toggle'},1000);
            $("#navList").animate({opacity: 1,top: '+=90',height: 'toggle'},1000);
            $("#blogTitle").animate({opacity: 1,top: '+=90',height: 'toggle'},1000);
            $("#sideBar").animate({opacity:1,left:'+=280',height:'toggle'},1000);
            $("#sideToolbar").animate({opacity:1,left:'-=1034',height:'toggle'},1000);
            $("#mainContent").animate({marginLeft:'280px',marginRight:'5px',width:'79.5%',marginTop: '10px'},1000);
        }
    }

    function hideTip(id){
        $(id).fadeTo(1,1);
        var t = setTimeout(function(){$(id).fadeOut(1000);},2500);
    }
</script>
<div id="tip" style="display:none;position: fixed;right:76px;bottom:197px;
background: #FFFF96;
padding: 5px;
font-size:12px;
width: 120px;
border-width: 1px 1px 0px 1px;
border-color: #B9B9B9;
border-style: solid;line-height: 17px;
z-index:10001;">
<b>模式切換成功！</b><br>您可以再次單擊恢復。
<div style="position:absolute;margin:5px -5px 0px -5px;height:12px;
width: 150px;
background: url('http://files.cnblogs.com/files/tufujie/cursor.gif') top right no-repeat
;"></div>
</div>

<div style="position: fixed;
right: 30px;
bottom: 141px;
background-color: rgba(30, 144, 255, 0.8);filter:alpha(opacity=80);zoom:1;
-webkit-border-radius: 4px;z-index:10000;">
<input type="button" class="reading_btn" style="
font-family: 'Microsoft Yahei',Tahoma,Arial,Helvetica,STHeiti;
-webkit-border-radius: 4px;" id="btnRead" value="閱讀模式" onclick="readPattern();hideTip('#tip');"/>
</div>
<!-- 閱讀模式與普通模式 -->

個性化設計

如果你想要個性化設計，已經提供相關文件下載，你可以自行修改，打造自己的博客園皮膚，有些文件沒有提供，點擊鏈接也是可以查看保存的

bootstrap.min.js

tufujie.cnblogs.js

tufujie.nav.my1502.css

tufujie.nav.my1502.js

jquery.min.js

running_blackhorse.gif

sideToolbar.gif

active.gif