博客园自定义皮肤源码分享
首先要感谢阿段对的源码分享 https://www.cnblogs.com/duanwenjian/p/7296316.html
我也只是在他的基础上进行了一些参数的改变。
最终效果图就不放出来了，可以参考阿段给出的效果图，这里只给出源码
设置步骤：1、选择模板 CodingLife。
2、申请打开JS权限 （手机端隐藏列表需要使用）！大概半天的审核期
3、将下列代码拷贝到相对应得地方
温馨提示：大家注意更改链接啊
覆盖全局css样式：
1 /*覆盖全局css样式*/ 2 3 #header{display:none} 4 #navigator{ 5 border: none; 6 background-color: #0184b2; 7 } 8 9 #navList li{ 9 min-width:140px; 10 text-align: center; 11 } 12 13 #navList a:link{ 14 text-shadow: none; 15 } 16 #navList a:hover{ 17 color: #0184b2; 18 } 19 #navList a{ 20 font-size: 18px; 21 } 22 23 .day{ 24 box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); 25 border: none; 26 } 27 #blog-calendar:hover,.day:hover,.newsItem,.sidebar-block:hover,.newsItem:hover{ 28 box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); 29 border: none; 30 } 31 #profile_block{display: none;border:1px solid #fff;} 32 #blogCalendar td:hover{ 33 background-color: #012; 34 color: #fff; 35 border-radius: 3px; 36 } 37 #blogCalendar td{ 38 cursor: pointer; 39 } 40 #blog-calendar{ 41 background-color: #fff; 42 padding: 10px; 43 box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); 44 } 45 .newsItem,.sidebar-block{ 46 border-color: transparent; 47 box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); 48 } 49 .catListPostArchive ul,.catListPostArchive ul,.sidebar-block ul{ 50 border-color: transparent; 51 } 52 .sidebar-block ul:last-child{ 53 border-bottom: none; 54 } 55 #profile_block:hover { 56 border-color: transparent; 57 } 58 #footer{display:none} 59 .forFlow .day+.day{margin-top:20px;} 60 /*icon*/ 61 .icon-menu{ 62 position: relative; 63 width: 16px; 64 height: 2px; 65 background: #fff; 66 margin: 12px auto; 67 display: inline-block; 68 } 69 .icon-menu:before,.icon-menu:after{ 70 content: ''; 71 display: inline-block; 72 position: absolute; 73 width: 100%; 74 height: 100%; 75 left: 0; 76 background-color: #fff; 77 transition: all 300ms ease-in-out; 78 } 79 .icon-menu:before{ 80 top: -6px; 81 } 82 .icon-menu:after{ 83 bottom: -6px; 84 } 85 /*手机端导航栏*/ 86 #header-mobile{ 87 height: 44px; 88 background: #012; 89 padding: 5px 10px; 90 box-sizing: border-box; 91 position: fixed; 92 width: 100%; 93 top: 0; 94 box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); 95 } 96 #header-mobile > div { 97 width: 100%; 98 height: 100%; 99 position: relative; 100 text-align: center; 101 color: #fff; 102 } 103 #header-mobile > div > .icon { 104 position: absolute; 105 right: 0; 106 top: 4px; 107 width: 26px; 108 height: 26px; 109 border: 1px solid #fff; 110 border-radius: 3px; 111 transition: all 300ms ease-in-out; 112 } 113 114 #header-mobile > div > p{ 115 font-size: 1.125rem; 116 line-height: 34px; 117 } 118 119 .icon-menu-active .icon{ 120 border-radius: 26px !important; 121 } 122 .icon-menu-active .icon-menu:before{ 123 top: 0; 124 transform: rotateZ(120deg); 125 } 126 .icon-menu-active .icon-menu:after{ 127 bottom: 0; 128 transform: rotateZ(60deg); 129 } 130 #header-pad{ 131 display:none; 132 } 133 134 .navLink{ 135 display: none; 136 } 137 138 /*博客 响应式*/ 139 @media (min-width: 769px) {/*电脑*/ 140 #header-mobile{ 141 display: none; 142 } 143 } 144 145 @media (min-width: 481px) and (max-width: 768px) {/*平板*/ 146 #header{ 147 display: none !important; 148 } 149 .sidebar-block h3{ 150 border-color: #012; 151 background-color: #012; 152 } 153 #header-mobile{ 154 display: none; 155 } 156 body{ 157 background: none; 158 height: 100%; 159 -webkit-transform:transition3d(0,0,0); 160 transform:transition3d(0,0,0) 161 } 162 #main{ 163 margin: 55px 8px 0 8px; 164 } 165 #mainContent{ 166 display: inline-block; 167 width: 65% !important; 168 } 169 #sideBar{ 170 display:inline-block; 171 width: 33.5%; 172 margin-left: 1.5%; 173 vertical-align: top; 174 float: none; 175 font-size: 0.875rem; 176 } 177 178 #main{ 179 font-size: 0; 180 } 181 182 #header-pad{ 183 display:block; 184 position: fixed; 185 width: 100%; 186 top: 0px; 187 height: 45px; 188 background-color: #012; 189 box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); 190 z-index: 80; 191 } 192 #header-pad > div{ 193 font-size: 0; 194 height: 100%; 195 } 196 #header-pad > div > div { 197 display: inline-block; 198 font-size: 1rem; 199 height: 100%; 200 } 201 #header-pad > div > .nav-left { 202 font-weight: 600; 203 color: #fff; 204 height: 100%; 205 line-height: 45px; 206 vertical-align: top; 207 width: 150px; 208 text-align: center; 209 font-size: 1.275rem; 210 } 211 #header-pad > div > div > ul{ 212 padding: 0; 213 margin: 0; 214 width: 400px; 215 height: 100%; 216 } 217 #header-pad > div > div > ul > li { 218 list-style: none; 219 float: left; 220 width: 100px; 221 text-align: center; 222 height: 100%; 223 } 224 #header-pad > div > div > ul > li > a { 225 display: inline-block; 226 width: 100%; 227 height: 100%; 228 color: #fff; 229 height: 100%; 230 line-height: 45px; 231 } 232 .dayTitle{ 233 padding: 0; 234 height: 20px; 235 text-align: center; 236 float: none; 237 } 238 239 } 240 241 .dayTitle{ 242 background-color: transparent; 243 } 244 .dayTitle a { 245 color: #012; 246 } 247 @media (max-width: 480px){ /*手机*/ 248 #header{ 249 display: none !important; 250 } 251 #header-mobile{ 252 display: block; 253 z-index: 100; 254 } 255 .sidebar-block h3 { 256 border-color: #012; 257 background-color: #012; 258 } 259 body{ 260 background: none; 261 height: 100%; 262 -webkit-transform:transition3d(0,0,0); 263 transform:transition3d(0,0,0) 264 } 265 266 #main{ 267 height: 100%; 268 margin-top: 10px; 269 } 270 #home{ 271 margin-top: 44px; 272 position: relative; 273 overflow: hidden; 274 } 275 #home .plecehode{ 276 position: fixed; 277 width: 100%; 278 height: 100%; 279 top: 0; 280 background-color: rgba(33,33,33,.75); 281 opacity: 0; 282 display: none; 283 transition: opacity 300ms ease-in-out; 284 } 285 .showPlecehode{ 286 opacity: 1 !important; 287 } 288 #mainContent{ 289 margin: 10px; 290 } 291 #sideBar{ 292 position: fixed; 293 top: 44px; 294 right: 0; 295 background: #fff; 296 transform: translateX(110%); 297 transition: all 300ms ease-in-out; 298 padding: 10px; 299 box-shadow: -2px 0 15px rgba(0,0,0,.35); 300 height: 100%; 301 overflow: auto; 302 z-index: 50; 303 } 304 .sideBar-show{ 305 transform: translateX(0%) !important; 306 } 307 .day{ 308 position: relative; 309 } 310 .dayTitle{ 311 text-align: center; 312 position: absolute; 313 top: -4px; 314 width: 100%; 315 left: 0; 316 color: #45bcf9; 317 background-color: transparent; 318 } 319 .dayTitle a{ 320 color: #012; 321 } 322 .topicListFooter{ 323 height: 0; 324 } 325 #sideBarMain{ 326 margin-bottom: 80px; 327 } 328 .navLink { 329 display:block; 330 } 331 .navLink ul li { 332 list-style: none; 333 width: 25%; 334 display: inline-block; 335 } 336 .navLink ul{ 337 background-color: #012; 338 text-align: center; 339 } 340 .navLink ul li a{ 341 color:#fff; 342 } 343 }
博客侧边栏公告（支持HTML代码）（支持JS代码）：
1 <div> 2 /*没有div js会失效*/ 3 </div> 4 <script> 5 /*setTimeout(function(){ 6 document.getElementById('sideBar').innerHTML=''; 7 },10)*/ 8 $('#home #main').append('<div class="plecehode"></div>') 9 $('#header-mobile .icon').click(function(){ 10 var headerClass=$('#header-mobile'); 11 if(headerClass.attr('class') == ''){ 12 headerClass.attr('class','icon-menu-active'); 13 $('#sideBar').addClass('sideBar-show'); 14 $('#home .plecehode').css('display','block'); 15 setTimeout(function(){ 16 $('#home .plecehode').addClass('showPlecehode'); 17 },10); 18 }else{ 19 headerClass.attr('class',''); 20 $('#sideBar').removeClass('sideBar-show'); 21 $('#home .plecehode').removeClass('showPlecehode'); 22 setTimeout(function(){ 23 $('#home .plecehode').css('display','none'); 24 },300); 25 } 26 }) 27 var navLink = '<div class="navLink"><ul><li><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li><li><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/jinpengyu/">首页</a></li><li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/keep_learn">联系我</a></li><li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://github.com/Jacob-IC">GITHUB</a></li></ul></div>'; 28 setTimeout(function(){ 29 try{ 30 $('.newsItem').html(navLink); 31 }catch(e){ 32 console.log(e); 33 } 34 },10) 35 36 </script>
页首Html代码：
1 <div id="header" style="display: block"> 2 <div id="blogTitle"> 3 <a id="lnkBlogLogo" href="http://www.cnblogs.com/duanwenjian/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页"></a> 4 <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/jinpengyu/">YU JINPENG</a></h1> 5 <h2>只管耕耘，莫问前程。</h2> 6 </div> 7 <div id="navigator"> 8 <ul id="navList"> 9 <li><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li> 10 <li><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/jinpengyu/">首页</a></li> 11 <li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li> 12 <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/keep_learn">联系我</a></li> 13 <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://github.com/Jacob-IC">GITHUB</a></li> 14 <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li> 15 </ul> 16 <div class="blogStats"> 17 <div id="blog_stats"> 18 <span id="stats_post_count">随笔 - 0 </span> 19 <span id="stats_article_count">文章 - 0 </span> 20 <span id="stats-comment_count">评论 - 0</span> 21 </div> 22 </div> 23 </div> 24 </div> 25 26 <div id="header-mobile" class=""> 27 <div> 28 <i class="icon"></i> 29 <p>Jinpeng's Blog</p> 30 <i class="icon"> 31 <i class="icon-menu"></i> 32 </i> 33 </div> 34 </div> 35 36 <div id="header-pad"> 37 <div> 38 <div class="nav-left"> 39 <p>Jinpeng's Blog</p> 40 </div> 41 <div class="nav-right"> 42 <ul> 43 <li><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li> 44 <li><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/jinpengyu/">首页</a></li> 45 <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/keep_learn">联系我</a></li> 46 <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://github.com/Jacob-IC/">GITHUB</a></li> 47 </ul> 48 </div> 49 </div> 50 </div>
页脚Html代码：
1 <div id="footer" style="display: block;text-align:center;color:#999;"> 2 Copyright © 2019 keep_learn <br/>Powered by .NET Core 3.0.0 on Linux 3 </div>
