博客主题分享
水文一篇～～
缘由
最近有园友问到本博客的主题是怎么弄，其实也是参考其他的博客捣弄一些CSS、JS，前端咋咋，并没啥技术含量，有需要的同学可以拿去用。简单起见，直接把设置的代码全盘贴出来了。
第一步 进入博客设置界面
主题是基于博客模版BlueSky修改的，需要选择此模版
第二步 页面定制CSS代码
在此文本框填入CSS代码
代码如下：
1 /*公共样式*/ 2 body { 3 font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; 4 background-image: none; 5 background-color: #ebebeb; 6 min-width: 1200px; 7 } 8 a:link, a:visited { 9 color: #e67e22; 10 text-decoration: none; 11 transition: color 0.3s; 12 } 13 a:hover { 14 text-decoration: underline; 15 } 16 17 /*自定义头部区域*/ 18 .main-header { 19 padding-top: 80px; 20 padding-bottom: 62px; 21 background-image: url(http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_bgTop.jpg); 22 background-repeat: no-repeat; 23 background-position: center 24%; 24 -webkit-background-size: cover; 25 background-size: cover; 26 } 27 .topLogo { 28 position: absolute; 29 top: 34px; 30 left: 15px; 31 } 32 .topLogo img{ 33 animation: loding 2s linear 0s infinite normal none paused ; 34 -webkit-animation: loding 2s linear 0s infinite normal none paused ; 35 } 36 .topLogo.move img{ 37 animation: loding 2s linear 0s infinite normal none running ; 38 -webkit-animation: loding 2s linear 0s infinite normal none running ; 39 } 40 @keyframes loding{ 41 0%{transform: rotate(0deg);} 42 100%{transform: rotate(360deg);} 43 } 44 @-webkit-keyframes loding{ 45 0%{-webkit-transform: rotate(0deg);} 46 100%{-webkit-transform: rotate(360deg);} 47 } 48 .topLogo:hover img { 49 animation: loding 2s linear 0s infinite normal none running ; 50 -webkit-animation: loding 2s linear 0s infinite normal none running ; 51 } 52 53 /*布局区域*/ 54 #Header1_HeaderTitle{position:relative;} 55 #Header1_HeaderTitle svg { 56 left: 0; 57 } 58 #blogTitle { 59 display: block; 60 position: absolute; 61 top: -5px; 62 left: 147px; 63 font-size: 20px; 64 color:#fff; 65 } 66 #blogTitle h2{ 67 font-size: 16px; 68 margin-left: 43px; 69 margin-top:10px; 70 } 71 #navigator,#main { 72 width: 1200px; 73 position: relative; 74 margin: 0 auto; 75 } 76 #header { 77 height: 37px; 78 width: 100%; 79 background-color: #fff; 80 border-bottom: solid 1px #E5E5E5; 81 } 82 83 /*导航*/ 84 #navigator { 85 top: 0; 86 } 87 .blogStats { 88 color: #CACACA; 89 font-size: 12px; 90 text-align: right; 91 padding-top: 10px; 92 } 93 #navList li { 94 float: left; 95 margin: 0; 96 display: inline; 97 } 98 #navList li a { 99 display: block; 100 width: 80px; 101 height: 37px; 102 line-height: 37px; 103 font-size: 15px; 104 text-decoration: none; 105 color: #333; 106 padding: 0 10px; 107 text-align: center; 108 background-color: transparent; 109 -webkit-transition: all 0.2s ease-in-out; 110 -o-transition: all 0.2s ease-in-out; 111 transition: all 0.2s ease-in-out; 112 } 113 #navList li a:hover { 114 background-color: #e67e22; 115 color: #fff; 116 margin-top: 0; 117 padding-bottom: 0; 118 opacity: 1; 119 } 120 #main { 121 margin-top: 20px; 122 background: transparent; 123 } 124 #mainContent { 125 width: 900px; 126 background: transparent; 127 box-shadow: none; 128 -moz-box-shadow: none; 129 -web-kit-shadow: none; 130 border-radius: 0px; 131 -moz-border-radius: 0px; 132 -web-kit-shadow: 0px; 133 display: inline-block; 134 } 135 136 #profile_block { 137 margin-top: 0px; 138 line-height: 1.5; 139 text-align: left; 140 } 141 #sideBar { 142 width: 267px; 143 padding: 0 16px 16px; 144 display: inline-block; 145 overflow: hidden; 146 color: #2D2D2D; 147 } 148 #sideBar a { 149 150 } 151 #sideBarMain > div { 152 margin-bottom: 20px; 153 background: #fff; 154 padding: 5px 15px; 155 } 156 #sideBarMain h3 { 157 font-weight: normal; 158 margin-bottom: 12px; 159 color: #333; 160 border-bottom-width: 1px; 161 border-bottom-style: solid; 162 border-bottom-color: #D4D4D4; 163 margin-top: 0; 164 padding: 5px 0; 165 font-size: 18px; 166 } 167 168 /*推荐浮动框*/ 169 #div_digg { 170 position: fixed; 171 bottom: 10px; 172 width: 140px; 173 right: 390px; 174 border: 2px solid #51CC6C; 175 padding: 10px; 176 background-color: #fff; 177 border-radius: 5px 5px 5px 5px !important; 178 box-shadow: 0 0 0 1px rgba(22, 159, 230, 0.45), 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 179 } 180 /*文章区域样式*/ 181 #cnblogs_post_body h2 { 182 font-size: 24px; 183 font-weight: normal; 184 background-color: #E67E22; 185 color: #fff; 186 text-indent: 10px; 187 border-radius: 5px; 188 text-shadow: 2px 2px 3px #222; 189 box-shadow: 0 0 0 1px #F9CB18, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 190 margin:10px 0; 191 } 192 #cnblogs_post_body h3 { 193 font-size: 18px; 194 font-weight: bold; 195 margin: 35px 0 20px; 196 padding-left: 10px; 197 position: relative; 198 } 199 #cnblogs_post_body h3:before { 200 content: ''; 201 width: 3px; 202 height: 100%; 203 position: absolute; 204 top: 0px; 205 left: 0px; 206 background: #53EA38; 207 } 208 #cnblogs_post_body h4 { 209 font-size: 16px; 210 font-weight: bold; 211 background: transparent; 212 color: #333; 213 margin: 0; 214 padding: 5px 0; 215 } 216 217 #cnblogs_post_body p { 218 margin: 0px auto; 219 text-indent: 0; 220 font-size:16px; 221 line-height:30px; 222 } 223 224 .postBody blockquote, .postCon blockquote { 225 width: auto; 226 margin: 10px auto; 227 padding: 6px 6px 6px 60px; 228 color: #666; 229 background: white url(/images/blockquote.gif) 5px 5px no-repeat; 230 } 231 232 233 /*文章列表、内容样式*/ 234 .postTitle{ 235 position: relative; 236 -webkit-transition: color 0.2s; 237 transition: color 0.2s; 238 } 239 .postTitle:hover { 240 241 } 242 .postTitle a, .post-title a, .postTitl2 a, .postTitl2 a, .entrylistPosttitle a, .entrylistPosttitle a { 243 color: black; 244 font-size: 25px; 245 } 246 .postTitle a:hover, .postTitl2 a:hover, .entrylistPosttitle a:hover { 247 color: #e67e22; 248 text-decoration: none; 249 } 250 .postTitle, .postTitl2, .entrylistPosttitle { 251 font-size: 20px; 252 padding-right: 64px; 253 padding-left: 10px; 254 border-left-width: 3px; 255 border-left-style: solid; 256 border-left-color: #e67e22; 257 } 258 259 .post { 260 padding: 25px 15px; 261 } 262 .forFlow img { 263 margin-top: 0px; 264 margin-bottom: 0px; 265 } 266 .feedback_area_title { 267 padding: 0 0 10px; 268 } 269 270 /*代码块样式*/ 271 .cnblogs-markdown .hljs { 272 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important; 273 font-size: 12px !important; 274 line-height: 1.5 !important; 275 padding: 5px !important; 276 } 277 .hljs-comment, .hljs-quote, .hljs-variable { 278 color: rgb(2, 148, 2); 279 font-family: 'Microsoft YaHei'; 280 } 281 .cnblogs-markdown .hljs { 282 display: block; 283 overflow-x: auto; 284 padding: .5em; 285 background: #fff; 286 color: #4d4e53; 287 background: url(http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_bg_code.png) top center #fafbfc !important; 288 } 289 .cnblogs-markdown .hljs { 290 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important; 291 font-size: 14px !important; 292 line-height: 1.5 !important; 293 padding: 10px !important; 294 border: 0 !important; 295 } 296 .hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition { 297 color: #DD4A68; 298 } 299 .hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { 300 color: #07a; 301 } 302 .cnblogs-markdown pre { 303 margin-top: 10px; 304 margin-bottom: 10px; 305 border-left: 6px solid #558abb; 306 } 307 308 .tocify { 309 bottom: 10px; 310 background-color: #fff; 311 right: 10px; 312 } 313 .nav-list > .active > a, .nav-list > .active > a:hover { 314 color: #ffffff; 315 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); 316 background-color: #F99338; 317 } 318 .nav > li > a:hover { 319 text-decoration: none; 320 color: #ffffff; 321 background-color: #F99338; 322 } 323 .nav > li > a { 324 display: block; 325 font-size:14px; 326 } 327 .dayTitle { 328 display: none; 329 } 330 .day { 331 background: white; 332 padding: 24px 32px; 333 margin: 0 0 25px; 334 } 335 .postDesc, .postDesc2, .entrylistItemPostDesc { 336 border-bottom: 1px solid #E8E7D0; 337 text-align: right; 338 margin: 10px 0px; 339 padding: 5px 0px 10px; 340 } 341 .catListEssay li, .catListFeedback li, .catListView li, .catListPostCategory li ,.catListPostArchive li{ 342 display: block; 343 padding: 1px 5px; 344 border-radius: 3px; 345 text-overflow: ellipsis; 346 overflow: hidden; 347 -o-text-overflow: ellipsis; 348 white-space: nowrap; 349 -webkit-transition: all 0.1s ease-in-out; 350 -o-transition: all 0.1s ease-in-out; 351 transition: all 0.1s ease-in-out; 352 } 353 .catListEssay li:hover, .catListFeedback li:hover, .catListView li:hover, .catListPostCategory li:hover ,.catListPostArchive li:hover{ 354 background-color: #e67e22; 355 } 356 .catListEssay li:hover a, .catListFeedback li:hover a, .catListView li:hover a, .catListPostCategory li:hover a ,.catListPostArchive li:hover a{ 357 text-decoration: none; 358 color: #fff !important; 359 } 360 .topicListFooter { 361 padding: 0px 20px 10px; 362 } 363 364 /*文章内容设置背景色*/ 365 #blog-comments-placeholder, #comment_form, #post_detail, #topics { 366 background: #fff; 367 } 368 #blog-comments-placeholder, #divRefreshComments, .commentform, #AjaxHolder_UpdatePanel1 { 369 padding: 10px 32px; 370 } 371 372 .entrylist{ 373 background:#fff; 374 padding:20px 10px; 375 } 376 377 /*隐藏广告*/ 378 #ad_t2, #ad_c1, #under_post_news, #ad_c2, #under_post_kb { 379 display: none; 380 } 381 382 /*animate*/ 383 @-webkit-keyframes shake { 384 from, to { 385 -webkit-transform: translate3d(0, 0, 0); 386 transform: translate3d(0, 0, 0); 387 } 388 389 10%, 30%, 50%, 70%, 90% { 390 -webkit-transform: translate3d(-10px, 0, 0); 391 transform: translate3d(-10px, 0, 0); 392 } 393 394 20%, 40%, 60%, 80% { 395 -webkit-transform: translate3d(10px, 0, 0); 396 transform: translate3d(10px, 0, 0); 397 } 398 } 399 400 @keyframes shake { 401 from, to { 402 -webkit-transform: translate3d(0, 0, 0); 403 transform: translate3d(0, 0, 0); 404 } 405 406 10%, 30%, 50%, 70%, 90% { 407 -webkit-transform: translate3d(-10px, 0, 0); 408 transform: translate3d(-10px, 0, 0); 409 } 410 411 20%, 40%, 60%, 80% { 412 -webkit-transform: translate3d(10px, 0, 0); 413 transform: translate3d(10px, 0, 0); 414 } 415 }
第三步 页首HTML代码 页脚HTML代码
用于定制头部和尾部的HTML解构及引入JS代码。资源引用可以先上传到自己博客文件目录在引用即可。
页首代码如下：
1 <header class="main-header"> 2 <a class="topLogo move" href="http://www.cnblogs.com/" title="博客园"> 3 <img src="http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_logo.png" alt="博客园" width="78"> 4 </a> 5 </header> 6 7 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/bigboyLin/jquery.tocify.css" /> 8 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/bigboyLin/pace-theme-minimal.css" /> 9 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/bigboyLin/animate.min.css" /> 10 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/pace.min.js"></script>
页尾代码如下：
1 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/jquery-1.11.1.min.js"></script> 2 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/jquery-ui.min.js"></script> 3 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/jquery.tocify.min.js"></script> 4 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/jquery.lettering.js"></script> 5 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/jquery.textillate.js"></script> 6 <script type="text/javascript" src="https://files.cnblogs.com/files/bigboyLin/mo.min.js"></script> 7 <script type="text/javascript"> 8 9 $(function(){ 10 addMenu(); 11 addPersonInfo() 12 createTocify(); 13 14 $('#cnblogs_post_body').prepend('<div id="catalogBox"></div>'); 15 generateContentList(); 16 setTimeout(function(){ 17 $('.topLogo').removeClass('move'); 18 },1000); 19 20 // 动画效果 21 $('#blogTitle h2').textillate({ 22 loop: true, 23 autoStart: true, 24 in: { 25 shuffle: false, 26 effect: 'bounce'}, 27 out: { 28 effect: 'hinge', 29 delayScale: 1.5, 30 delay: 30, 31 sync: false, 32 shuffle: true, 33 reverse: false, 34 callback: function () {} 35 } 36 }); 37 // 导航动画 38 $('#navList li').hover(function(){ 39 $(this).addClass('animated swing'); 40 41 },function(){ 42 $(this).removeClass('animated swing'); 43 }); 44 45 }); 46 47 48 // 添加文章浮动目录 49 function createTocify(){ 50 var dom = $('<div id="toc" style="display:none;"></div>').appendTo('#topics'); 51 dom.tocify({context:$('#mainContent'),extendPage:false}); 52 $(window).scroll(function(){ 53 var scrollTop = $(window).scrollTop(); 54 if(scrollTop >1000){ 55 $('#toc').fadeIn(); 56 }else{ 57 $('#toc').fadeOut(); 58 } 59 }); 60 } 61 62 63 // 添加版权信息 64 function addPersonInfo(){ 65 var shtml = '<div style="background: #f4f7f8;line-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px; font-size: 14px; border: #e0e0e0 1px dashed;">'+ 66 '作者：<a href="http://www.cnblogs.com/GeniusLyzh/" target="_blank">GeniusLyzh</a><br>'+ 67 '出处：<a href="http://www.cnblogs.com/GeniusLyzh/" target="_blank">http://www.cnblogs.com/GeniusLyzh/</a><br>'+ 68 '本文链接：<a href=""+location.href+"" target="_blank">'+location.href+'</a><br>'+ 69 '本文版权归作者和博客园共有，欢迎转载，须保留此段声明，并给出原文链接，谢谢！<br>'+ 70 '如果阅读了本文章，觉得有帮助，欢迎点击右下角推荐</div>'; 71 $('#blog_post_info_block').before(shtml ); 72 } 73 74 75 //添加個人公告信息 76 function addContact(){ 77 var shtml =""; 78 //shtml+= "email：<a href='mailto:hi@linjiajun.com'>hi@linjiajun.com</a>"; 79 // shtml+= "我的小站：<a href='http://www.linjiajun.com' target='_blank' title='http://www.linjiajun.com'>Lyzh's blog</a><br>"; 80 shtml+= "<br>weibo：<a href='http://weibo.com/qylinxia' target='_blank' title='http://weibo.com/qylinxia'>Lyzh</a>"; 81 // shtml+="<br><br>"; 82 $('#profile_block').prepend(shtml); 83 } 84 85 // 添加文章內嵌目录 86 function generateContentList(){ 87 var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可 88 if(jquery_h3_list.length>0) 89 { 90 var content = '<a name="_labelTop"></a>'; 91 content += '<div id="navCategory">'; 92 content += '<p style="font-size:18px"><b style="font-weight:normal;">阅读目录</b></p>'; 93 content += '<ul>'; 94 for(var i =0;i<jquery_h3_list.length;i++) 95 { 96 var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>'; 97 $(jquery_h3_list[i]).before(go_to_top); 98 var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>'; 99 content += li_content; 100 } 101 content += '</ul>'; 102 content += '</div>'; 103 104 if($('#cnblogs_post_body').length != 0 ) 105 { 106 107 $($('#catalogBox')[0]).prepend(content); 108 } 109 } 110 } 111 112 function addMenu(){ 113 var menuHtml = ''; 114 menuHtml += '<li class=""><a class="menu" target="_blank" rel="nofollow" href="https://github.com/jiajunlin">GitHub</a></li>'; 115 menuHtml += '<li class=""><a class="menu" target="_blank" rel="nofollow" href="http://www.linjiajun.com">我的小站</a></li>'; 116 // menuHtml += '<li class=""><a class="menu" target="_blank" rel="nofollow" href="http://home.cnblogs.com/u/bigboyLin/">关于我</a></li>'; 117 118 $('#navList').append(menuHtml); 119 } 120 121 </script>
以上。
