個人皮膚很差看,你打我..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; }
部分講解: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> | <a href="http://www.cnblogs.com/AaronYang/tag/EntityFramework/" target="_blank"><font color='red'>EF CodeFirst</font></a> | <a href="http://www.cnblogs.com/AaronYang/tag/aaronyang百度地圖/" target="_blank">百度地圖.NET</a> | <a href="http://www.cnblogs.com/AaronYang/archive/2013/06/03/3113543.html" target="_blank">MyNPOI</a> | <a href="http://www.cnblogs.com/AaronYang/tag/%E5%BC%80%E6%BA%90/" target="_blank"><b>開源</b></a> | <a href="http://www.cnblogs.com/AaronYang/archive/2013/05/15/3079046.html" target="_blank">個人皮膚</a> | <a href="http://www.cnblogs.com/aaronyang/tag/ASP.NET%20MVC4%20IN%20ACTION/" target="_blank">ASP.NET MVC4</a> | <a href="http://www.cnblogs.com/AaronYang/tag/JavaScript/" target="_blank">前端提高 </a> | <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> | <a href="http://www.cnblogs.com/AaronYang/tag/WCF%E7%B3%BB%E5%88%97/" target="_blank">WCF </a> | <a href="http://www.cnblogs.com/aaronyang/tag/EasyUI/" target="_blank">EasyUI</a> | <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>瀏覽本網站 <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>
在這裏你能夠調節 二級菜單,這裏的地址,建議是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&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&src=http%3A%2F%2FM.ZonSe.Net%2FMusic%2FData%2FUpload%2F0E88BEF6B420313864476A1276B73D90.mp3"></object></div>
第七部分:爲了讓你的文章更好看閱讀,我本身寫了一個適合本博客閱讀排版簡單示例
代碼,我放到了個人博客官網上的那篇博客去了: 點擊查看完整版
之後也在那裏更新博客了,這邊的博客我以爲有用的我已經遷移過去了。
謝謝你已經閱讀完,若是你有什麼技術問題,能夠到 點擊這裏 給我留言
(個人bootstrap還沒學,請不要太在意個人排版。。我先學bootstrap吧,由於那個wordpress就是bootstrap主題的,默認引入了bootstrap的js包了)