模板定制
今天发现博客的目标定制功能特别强大,只要能想到的样式,都能定制。把我的定制css样式以及相关的罗列出来。
首先打开博客设置页面,设置其中的标题、页面定制css代码、博客侧边栏公告、页首Html代码、页脚Html代码,具体如下
标题
<span class="portrait"></span>小马
可以选择设置子标题
安卓,管理 <a href="https://github.com/ghordonn" style="color: #1A9ADA;" target="_blank"> GitHub</a>
页面定制css代码
首先选择皮肤LesslsMore
接着设置样式代码
div.post div.entry { font-family: Georgia, "Times New Roman", Times, sans-serif } div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 { margin-top: 24px; margin-bottom: 12px; } div.post div.entry h1 { padding: 5px; color: white; background-color: gray; } div.post h2 { font-size: 22px; line-height: 100%; } div.post div.entry pre.code { font-family: Consolas border-style : dashed; border-left: solid 5px #6ce26c } div#information { background-color: #f8f8ee; border: solid 1px #e8e7d0; padding: 5px 10px 0px 10px; min-height: 10px; margin-top: -15px; margin-bottom: 30px; color: #666666 } .cnblogs_code { border-left: #58CE60 5px solid !important; } #site_nav_under, .c_ad_block, #under_post_news, #under_post_kb { display: none !important; } div#header{ padding:0px; } #MyIng .ing_title, #sideBar h3 { margin: 10px 0; border: 1px solid #55895B; border-left-width: 5px; border-right-width: 5px; border-radius: 10px; text-align: center; } #header { background: url(http://images2015.cnblogs.com/blog/459873/201611/459873-20161104114855658-1049556710.png) right top no-repeat; background-size: auto 80%; } #home { overflow: auto; margin: 65px auto 50px auto; border-radius: 10px; background: #fff; box-shadow: 0 0 10px -4px #4E4E4E; filter: alpha(opacity=90); } #div_digg { right: 5px; } #div_digg { width: 44px; bottom: 105px; } .scrollBtn a { display: inline-block; width: 54px; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; text-align: center; opacity: .6; color: #fff; background: url(http://images2015.cnblogs.com/blog/459873/201603/459873-20160318143006349-1431534918.png) -608px -188px no-repeat; filter: alpha(opacity=60); } .postBody a { padding: 1px 3px; color: #55895b; border-bottom: none; }
注意:#header下可以修改头像的链接
博客侧边栏公告
<div style="text-indent: 1em;color: #55895B;">所有文章全部来自个人平常工作和学习中的总结与思考,每篇文章都花了很多心思和时间,旨在分享思想,传播有用的知识和技术。</div>
页首Html代码
<link href="https://files.cnblogs.com/files/jogickis/cus.css" rel="stylesheet" /> <style type="text/css"> body { background: #98C17B url('http://images2015.cnblogs.com/blog/459873/201603/459873-20160316135102787-1112392588.png') no-repeat top center; background-size: 100% 100%; background-attachment: fixed; } body { font-family: '微软雅黑','宋体',Arial; font-size: 15px; margin: 0; background: #e7e7e7 url(http://images2015.cnblogs.com/blog/459873/201603/459873-20160316135102787-1112392588.png) 0 0 repeat; padding: 0 65px; } input[type="button"].btn_my_zzk { width: 60px; } #blogTitle .title { position: relative; background: none; } .portrait { display: block; position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50px; overflow: hidden; background: white url('http://images.cnblogs.com/cnblogs_com/jogickis/999705/o_10459422.jpg') no-repeat left center; background-size: contain; transition: all 0.8s; -moz-transition: all 0.8s; /* Firefox 4 */ -webkit-transition: all 0.8s; /* Safari 和 Chrome */ -o-transition: all 0.8s; } .headermaintitle:hover .portrait { -moz-transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); -o-transform:scale(1.2,1.2); transform:scale(1.2,1.2); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background-color: #55895B; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background-color: #55895B; } ::selection { color: white; background: #018ee8; } #topics a:hover { padding: 1px 3px 1px 3px;; text-decoration: none; color: #018ee8; border-radius: none; background-color: transparent; } .postTitle { padding-left: 0; background: none; } .subtitle { padding-left: 0; } #blogTitle { padding-bottom: 0; } #nav_q,#nav_ing,#nav_newpost { display:none !important; } #sideBar { border-top-width: 1px !important; border:0px; } #navigator { margin-bottom: 0; padding-left: 0px; padding-right:20px; } #sideBarMain { margin: 0; padding-right: 20px; padding-left: 5px; } .catListTitle { border-top-color: #CECECE; border-right-color: #CECECE; border-bottom-color: #CECECE; } .newsItem > .catListTitle { display: none; } #calendar { margin-top: 0; text-align: center; border: 1px solid #55895B; padding: 10px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-bottom-width: 5px; margin-bottom: 15px; } .newsItem { padding: 5px 10px; border: 1px solid #55895B; border-top-width: 5px; border-bottom: none; border-top-left-radius: 14px; border-top-right-radius: 14px; } #green_channel { width: auto; } #tbCommentBody { width: 100%; display: block; box-sizing: border-box; } #home { overflow: auto; margin: 65px auto 50px auto; border-radius: 10px; background: #fff; box-shadow: 0 0 10px -4px #4E4E4E; filter: alpha(opacity=90); width: 100%; border: none; } .postTitle { margin: 0; font-size: 16px; font-weight: 700; padding-bottom: 10px; border-bottom: none; } #main{ padding: 25px 10px 10px 260px; } .postDesc { margin: 0px; } #footer { /* font-size: 12px; */ /* font-size: 14px; */ /* margin: 20px; */ /* padding: 12px; */ /* color: #ddd; */ /* background: #55895b; */ display: none; } #div_digg { position: fixed; right: 5px; bottom: 20px; z-index: 9999; background-color: #fff; font-size: 12px; width: 125px; margin: 10px 0 0; padding: 5px; /* border: 3px solid #55895b; */ border-radius: 5px; width: 44px; bottom: 115px; border: 1px solid #55895b; } .scrollBtn { right: 6px; } .jiathis_style { display: none; } .postTitle a::before { content: '~ '; } #cnblogs_post_body h2 { line-height: 1.8; padding-left: 10px; margin: 0 auto 10px; border-left: 10px solid #55895B; } .c_b_p_desc { background: #f0f0f0; padding: 20px; } #green_channel { background: #FFF; } .feedbackItem { font-size: 14px; line-height: 24px; margin: 10px 0; padding: 10px; background: #FFF; box-shadow: 0 0 5px #aaa; } #ad_t2 { display: none; } #mainContent{ width: 100%; } .cnblogs_code { border-left: #CCCCCC 1px solid !important; } </style>
页脚Html代码
<div class="scrollBtn" id="scrollBtn"> <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item;"> <a href="#top" title="回顶部"></a> </li> </ul> </div> <script language="javascript" type="text/javascript"> //生成目录索引列表 function GenerateContentList() { var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h4,只需要将这里的h4换掉即可 if (jquery_h3_list.length > 0) { var content = ''; content += '<div id="navCategory" style="border-radius: 10px;background-color: #ECECEC;padding:10px;margin-bottom: 12px;">'; content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>阅读目录</b></p>'; content += '<ul>'; for (var i = 0; i < jquery_h3_list.length; i++) { var go_to_top = '<div style="text-align: right; text-align: right;height: 0;padding: 0;overflow: hidden;visibility: hidden;"><a name="_label' + i + '" style="border-bottom: none;"></a></div>'; $(jquery_h3_list[i]).before(go_to_top); var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>'; content += li_content; } content += '</ul>'; content += '</div>'; if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content); } } } GenerateContentList(); </script> <!-- JiaThis Button BEGIN --> <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script> <!-- JiaThis Button END -->
补充:需要的css文件、图片文件可以通过播客的文件、相册功能保存到网络上,就可以使用HTTP链接。
如果您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力,拜谢!欢迎您持续关注我的博客:)
版权所有,欢迎保留原文链接进行转载:)