Simple 3-step settings make your blog garden more beautiful !, 3 steps more beautiful

Simple 3-step settings make your blog garden more beautiful !, 3 steps more beautiful

After I published my first blog in the blog Park yesterday, I spent a lot of time and energy writing my blog, "modular weapon: an article on frequently-used RequireJS knowledge". some bloggers asked me how to customize my blog style. Today, I will summarize some of the methods used to organize my blog a month ago as follows, hoping to help you design your own blog :)

Step 1: Upload custom css

Open http://files.cnblogs.com/files/lyzg/cnblogs.cssin the browser, and then press Ctrl + s to download the custom css used by my blog. On the blog Management page, find the file tab and upload the downloaded file:

<Span class = "portrait"> </span>

The page effect is as follows:

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: maid-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 ;}

The page effect is as follows:

<Link href =" http://files.cnblogs.com/files/lyzg/cnblogs.css "Rel =" stylesheet "/> <style type =" text/css "> body {background: # 98C17B url (' http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg ') No-repeat top center; background-size: 100% 100%; background-attachment: fixed;} input [type = "button"]. btn_my_zzk {width: 60px; }# home {border-top-right-radius: 0 ;}# 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://pic.cnblogs.com/avatar/459873/20150917085709.png ') No-repeat left center; background-size: contain; transition: all 0.8 s;-moz-transition: all 0.8 s;/* Firefox 4 */-webkit-transition: all 0.8 s;/* Safari and Chrome */-o-transition: all 0.8 s ;}. 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 ;}::-we Bkit-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 ;}# blogTi Tle {padding-bottom: 0 ;}# nav_q, # nav_ing, # nav_newpost {display: none! Important ;}# sideBar {border-top-width: 1px! Important ;}# navigator {margin-bottom: 0 ;}# sideBarMain {margin: 0; padding-right: 20px; padding-left: 5px ;}. catListTitle {border-top-color: # CECECE; border-right-color: # CECECE; border-bottom-color: # CECECE;} # home {margin: 150px auto 50px auto; // width: 80%;} # green_channel {width: auto;} # tbCommentBody {width: 100%; display: block; box-sizing: border-box;} </style>

The page effect is as follows:

Http://files.cnblogs.com/files/lyzg/cnblogs.css

Search for the text in the Code and replace it with the css you uploaded in your blog in step 1.

The second part is:

http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg

In this image, the background image of the blog is a relatively high-resolution image that I got down from Baidu to present a large page background. Because the files that can be uploaded on the blog Management page do not include image files, this image is inserted in a draft blog:

Http://pic.cnblogs.com/avatar/459873/20150917085709.png

This file is the profile picture url. You need to replace it with your own image url.

Step 3: Set the footer html

Find the html part of the footer and paste it into the following code:

<Div class = "scrollBtn" id = "scrollBtn"> <ul class = "clearfix"> <li class = "sB-goTop" id = "goTop" style = "display: list-item; "> <a href =" # top "title =" Back to top "> </a> </li> </ul> </div> <script language =" javascript" type = "text/javascript"> // generate the Directory Index list function GenerateContentList () {var jquery_h3_list = $ ('# cnblogs_post_body h2'); // if your chapter title is not h4, replace the h4 here. if (jquery_h3_list.length> 0) {var content = ''; conte Nt + = '<div id = "navCategory">'; content + = '<p>'; content + = '<ul>'; for (var I = 0; I <jquery_h3_list.length; I ++) {var go_to_top = '<div>' + I + '"> </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 '). lengt H! = 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 -->

This section of js contains the function of returning to the top, sharing components, and generating directories on the blog page. Note that the directory generation function is used to search for the h2 element in the blog post and use it as each directory item. Therefore, when you edit a blog, A large title must be H2. a small title should be H3. it cannot be mixed. We recommend that you use live writter to edit a blog, its title 2 and Title 3 show h2 and h3 in the source code:

The above are all the methods I used in my custom blog at that time. Some details are not described too much. I believe that after you use these methods, check the source code of the blog page to understand the principles. If you have any questions, please contact me in the comment area. If you think this article is useful to you, you may wish to give me a thumbs up. Even if you can see the time and energy I spent early in the morning, thank you :)

Reprinted Please note: The article is reprinted from:Blog[Http://www.cnblogs.com/]
Address: http://www.cnblogs.com/lyzg/p/4868830.html