Foreword
At home and abroad have a lot of blog sites such as GitHub, WordPress, CSDN, Netease, Sina, blog Park . Compared GitHub and WordPress, domestic blog easier to get reptiles, it is even more likely to be indexed by search engines. And these blog serverRelatively good, Corresponding to Compare Quick.
So why choose blog park it?
- Old Station, trustworthy;
- Easily indexed by Baidu and other search engines;
- Little ad, more harmonious;
- Permission to maximize the user-defined - can use CSS / HTML / JavaScript .
But the online tutorial messy, so I took some time to sort out all the effect it online! This is probably the most complete history of the tutorial. We now come to beautify our blog garden! Ado, start!
First, the preparatory work
Dynamic beautifying effects blog Park is using JavaScript to achieve, so we need to get permission to use the JS.
Open https://i.cnblogs.com/Configure.aspx this site, in the menu "blog sidebar announcement" column click on "apply for permission JS" . Casually write some reason, about 10 minutes to apply through.
In addition, custom blog park code editor very friendly, so please bring your own text editor to copy, paste, a good configuration file, and finally paste it into the blog garden.
Second, the overall effect is to beautify the template
The following is a wheel, it feels nice to jump the settings themselves. abc233 Gangster blog is also very fashion, but not open source o (╥﹏╥) o really want to use Ctrl + U only a little chops down ~
0. URL shortcut pack download
1. [Hongwei] style landscaping
overall effect:
Specific program can be accessed: https://www.cnblogs.com/shwee/p/9060226.html and https://www.cnblogs.com/shwee/p/9084535.html .
2. [tears] white style landscaping
The overall effect is as follows:
Specific program can be accessed: https://www.cnblogs.com/WhiteTears/p/8824544.html
3. [Summer smile, style landscaping]
This is really good Kanla! FIG hold, and self-jump . Capital of porcelain, but also open it!
Third, beautify the page layout and content
0.5 Description
If you want to customize the blog, I recommend using Simple Memory topic. Other topics may be wrong, please understand.
1. Top GitHub icon
Top html code placed on it. Remember to replace the contents of a label inside Oh! If you only need one, you can not add a second.
<a href="https://github.com/user/" title="My Github" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<a href="http://www.cnblogs.com/user/" title="My Blog" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>2. Custom label logo
In the footer html code. Note .ico upload files to the server / blog Park .
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "icon的网络路径";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>3. Markdown style
This style can be adjusted h2, h3 title, and modify the line spacing. On CSS.
/** MarkDown样式调整 */
.cnblogs-markdown h2{
font-weight: 500;
margin: 20px 0;
}
.cnblogs-markdown h2:before{
content: "#";
color: #eb5055;
position: relative;
top: 0;
left: -12px;
}
#cnblogs_post_body h2{
font-weight: 500;
margin: 20px 0;
}
#cnblogs_post_body h3{
font-size: 16px;
font-weight: bold;
line-height: 1.5;
margin: 10px 0;
}
.cnblogs-markdown h3:before{
content: "##";
color: #2175bc;
position: relative;
top: 0;
left: -8px;
}
.postBody blockquote, .postCon blockquote{
background-image: none;
border-left: 5px solid #DDDFE4;
background-color: #EEF0F4;
width: 100%;
padding: 6px 0 6px 25px;
}4. h1 h2 h3 heading beautification
On CSS.
/*标题h1 h2 h3样式*/
#cnblogs_post_body {
color: black;
font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif;
font-size: 16px;
}
#cnblogs_post_body h1 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微软雅黑", "宋体", "黑体", Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2 {
background: #2B6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微软雅黑", "宋体", "黑体", Arial;
font-size: 15px;
font-weight: bold;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3 {
background: #5B9600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微软雅黑", "宋体", "黑体", Arial;
font-size: 13px;
font-weight: bold;
height: 24px;
line-height: 20px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}