本博客主题分享

水文一篇～～

缘由

最近有园友问到本博客的主题是怎么弄，其实也是参考其他的博客捣弄一些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='/images/loading.gif' data-original="http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_logo.png"  width="78"> 4    </a> 5 </header> 6  7 <link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/bigboyLin/jquery.tocify.css" /> 8 <link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/bigboyLin/pace-theme-minimal.css" /> 9 <link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/bigboyLin/animate.min.css" />10 <script type="text/javascript" src='/images/loading.gif' data-original="http://files.cnblogs.com/files/bigboyLin/pace.min.js"></script>

页尾代码如下：

 1 <script type="text/javascript" src='/images/loading.gif' data-original="http://files.cnblogs.com/files/bigboyLin/jquery-1.11.1.min.js"></script> 2 <script type="text/javascript" src='/images/loading.gif' data-original="http://files.cnblogs.com/files/bigboyLin/jquery-ui.min.js"></script> 3 <script type="text/javascript" src='/images/loading.gif' data-original="http://files.cnblogs.com/files/bigboyLin/jquery.tocify.min.js"></script> 4 <script type="text/javascript" src='/images/loading.gif' data-original="http://files.cnblogs.com/files/bigboyLin/jquery.lettering.js"></script> 5 <script type="text/javascript" src='/images/loading.gif' data-original="http://files.cnblogs.com/files/bigboyLin/jquery.textillate.js"></script> 6 <script type="text/javascript" src='/images/loading.gif' data-original="http://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" ></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 >'+ 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 ><b >阅读目录</b></p>'; 93     content  += '<ul>'; 94     for(var i =0;i<jquery_h3_list.length;i++) 95     { 96       var go_to_top = '<div ><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 ><a  target="_blank" rel="nofollow" href="https://github.com/jiajunlin">GitHub</a></li>';115     menuHtml += '<li ><a  target="_blank" rel="nofollow" href="http://www.linjiajun.com">我的小站</a></li>';116    // menuHtml += '<li ><a  target="_blank" rel="nofollow" href="http://home.cnblogs.com/u/bigboyLin/">关于我</a></li>';117    118   $('#navList').append(menuHtml);119 }120 121 </script>

以上。

原标题：本博客主题分享

关键词：