Share my blog skin

Bo PI made modifications based on the simpleblue template. The changes seem quite different before and after the changes, but of course they cannot be compared with the professional web art. I am not an artist... I only want to know some HTML and CSS, so you can laugh at it. :) if you also like my blog, you can change it to this. you can choose "manage"> "set"> "customize the page style through CSS. However, you 'd better set your blog template to simpleblue first, because the name of each template Div may be different. open the CSS of my blog and paste the CSS into the "customize page style through CSS" text box on your settings page.

Blog background image

There are quite a few changes, such as the background image of a blog. To set the background image, you also need to change the header Div of the blog. For example, set the background to none to highlight the background of the entire body. if you do not like the background very much, you can select another image, but the best width is 700px. Otherwise, you need to adjust the absolute positioning size of the background. the method for modifying the background is as follows:Code:

# Topbackground {Background: URL (http://pic002.cnblogs.com/images/2011/70278/2011052216374836.jpg) No-repeat center top; top: 0; Height: 400px; position: fixed; width: 100%; Z-index:-1 ;} # footer {bottom: 0px; Height: 200px; position: fixed; width: 100%; Background: URL (http://pic002.cnblogs.com/images/2011/70278/2011052216374836.jpg) No-repeat center bottom; Z-index:-1000; color: transparent; display: block! Important ;}
 

Modify the URL attribute of the image in the background.

Blog topic Images

The top-right corner of a blog indicates the topic of a blog. For example, My topic is. net, of course, you can also change to another image, find the following code, change the URL attribute of the background. blog background pictures and blog theme pictures both take into account the reading of small screen size notebook, when the screen width becomes PX, it will not affect the appearance.

/* Navigation bar */Div # navigator {position: absolute; top: 0; Right: 0; padding: 0; Height: 80px; Border: none; width: 300px; Background: URL (http://pic002.cnblogs.com/images/2011/70278/2011051911433598.png) No-repeat center bottom ;}
 

Modification of the home page Module

I think the Blog content should be highlighted, so I set the siderbar background on the left to none, and set the background color to transparent. if you do not like it, find the following code and delete it:

 
Div # sidebar {border: none! Important; Background-color: transparent! Important ;}
 

I don't know why. I used to display the default homepage of some of my blogs. Some of my blogs display the posting date on top of the blog, but some do not. I used CSS to display none of them, if you need to display the blog posting date, find the following code and delete them:

 
/* Do not display the release date */. daytitle {display: none ;}
 

Modify the style of the blog Small function 1. Submit the comment button

The button for submitting comments under the blog is quite common. I modified it a little bit. The format is similar to that of "good text to top" in "Green Channel.

/* Submit button */# btn_comment_submit {width: 55px; Height: 25px; Border: none; Background-color: #2 daebf;-WebKit-border-radius: 10px; color: white; font-weight: bold;-WebKit-box-Shadow: 0 1px 3px rgba (0, 0, 0, 0.5); text-Shadow: 0-1px 1px rgba (0, 0, 0, 0.25); font-size: 10pt ;}
 

2. "recommendation" and "objection" buttons

In addition, I am also "Shameless" to hide the "objection" button of the comment button. my blog, which I 've worked so hard to write for a long time, was "opposed" and others "recommended ", in this case, it would be a bit uncomfortable for a single person to really disagree or make a prank. if you are not satisfied with the content, you can write comments. If you have no objection, what is it. of course, the garden friends who really want to "oppose" will certainly have a way to "oppose...

3. Green Channel

For the green channel, I only show two of them-"better text to top" and "Follow me ", there may not be many other people who "add this article to Favorites" and "Contact Me". The first two are certainly not on the same order of magnitude. Therefore, I have hidden these two buttons, if you really need to "add this article to Favorites" and "Contact Me", there are other links in the blog to implement these two functions.

4. Advertisement below the blog

I don't know why I set up advertisements in the background for my blog, but I still display advertisements under my blog. then I used jquery (the js I started using, but I found that different browsers have different processing effects on JS) to remove the advertisement from the DOM tree, however, after testing, I found that the advertisement was first displayed before it was removed. If the advertisement is calculated by IP address, it should not affect the advertising revenue. If the Garden wants to ask the bloggers to be obligated to display the advertisement in the blog garden below the blog, please let us know, I will delete the code for removing the advertisement.

Windows Live writer is recommended.

I often see some blogs of garden friends. The content looks pretty good, but the layout is not very good. For example, the Section spacing is too large or the font size is small, there are a lot of inserted images and a lot of white space. There is no doubt this will affect the reader's reading experience. we recommend that you use Windows Live writer to write a blog. You only need to set up several steps to bind your blog garden account to Windows Live writer, then you can use it to write a blog and post it.

In the Code highlight section, syntaxhighlighter is installed. You only need to download this plug-in and add this plug-in to Windows Live writer to enable the code in the blog to support highlighting. note that to use this plug-in, you need to set the default editor to tinymce in the background settings. in addition to this Code plug-in, of course, you will find other plug-ins that support code highlighting in "add plug-ins" in wlw, such as paste from Visual Studio. please do not install plug-ins in disorder! There are not many people using this plug-in, because wlw seems to be not very secure.ProgramIf you reference A wlw DLL, you can obtain the account name and account password in the DLL! Of course, I haven't found such a rogue plug-in...

Conclusion

If you have any opinions or comments on the blog skin, you are welcome to discuss it.

A blog that makes others look comfortable at the first glance is necessary, but more importantly, the content of the blog

Link: http://www.cnblogs.com/technology/archive/2011/05/22/2053802.html