Create a custom csdnblog skin

If you already have a more personalized counter, I will teach you how to create a custom skin function for csdnblog. If you do not have a personalized counter for your csdnblog, see another article I wrote.

About Adding counters to csdnblog
Http://blog.csdn.net/hbzxf/archive/2004/06/26/27040.aspx

1. Use the system-defined skin
The system has provided several defined skin interfaces for us. We can select the one we like through the 'option '-'configuration'-'skin.

2. Custom Skin

The following describes how to change the cogitation skin.

1. Options-configuration-skin-select cogitation

2. csdnblog uses http://blog.csdn.net/skins/cogitation/style.cssas the sample table file by default (how do I know, huh, huh, there is in the source code)

3. Open http://blog.csdn.net/skins/cogitation/style.cssthrough notepad or other editing tools to see the following content (screenshot part)

. Headertitles A: visited,
. Headertitles A: active,
. Headertitles A: link,
. Headertitles A: hover
{
Color: white;
Text-Decoration: none;
Font-size:. 75em;
Font-weight: normal;
}

. Headerbar
{
Font-weight: normal;
Font-size: 8pt;
Border-collapse: collapse;
Background-image: URL (images/bluetabback.jpg );
Background-repeat: Repeat-X;
}

. Headerbar A: visited,
. Headerbar A: active,
. Headerbar A: Link
{
Color: whitesmoke;
Text-Decoration: none;
Font-weight: normal;
}

. Headerbartab
{
Background-image: URL (images/bluetabface.jpg );
Background-repeat: Repeat-X;
Border-collapse: collapse;
Padding: 0px;
}

. Blogstatsbar
{
Text-align: right;
Font-weight: normal;
Font-size: 7pt;
Color: Silver;
Border-collapse: collapse;
}

4. Now let's redefine # top, # top defines the layout top style

The original style content is as follows:

# Top
{
Background-image: URL (images/bluetabbackground.gif );
Background-repeat: Repeat;
Color: whitesmoke;
Border-top: 4px solid black;
Border-bottom: 4px solid black;
Padding: 0px;
Margin: 0px;
}

Check the source code of your csdnblog and find that # The top application is located as follows:

<Div id = "TOP">
 
<Div>
<Table>
<Tr>
<TD class = "headertitles">
<H1> <a id = "header1_headertitle" class = "headermaintitle" href = "/hbzxf/"> hbzxf </a> <P id = "tagline"> there are more than one memories that need to be reversed. Maybe this is the philosophy of life. </P>
</TD>
</Tr>
</Table>
</Div>

The new style is as follows: (we need to modify the background image now)

# Top
{
Background-image: URL (images/bluetabbackground.gif); // you can change the background image URL to the position of your own image.
Background-repeat: Repeat;
Color: whitesmoke;
Border-top: 4px solid black;
Border-bottom: 4px solid black;
Padding: 0px;
Margin: 0px;
}

5. paste the defined style to 'option'-'configuration'-'custom CSS selector'

6. Save the changed configuration and check the page of your csdnblog. Is it a custom image?

7. Follow these steps to modify each other one by one to create a distinctive and personalized csdnblog.

 

8,

Announcement:

<! -- ******************************* -->
<! -- <Div align = "center">
<A id = "imagedetails_lnkthumbnail" class = "thumbnail" href = "http://blog.csdn.net/jliuwork/admin/EditGalleries.aspx"> </a>
</Div> -->

<! -- ***************** Dynamic clock ***************** -->
<! -- Other clock style http://www.clocklink.com/ENG/gallery.htm# can be seen on this website -->
<Div align = "center">
<Embed src = "http://bbs.smgbb.cn/Skins/Default/clock.swf" width = "150" Height = "150" wmode = "Transparent" type = "application/X-Shockwave-flash"> </embed>
</Div>

<! -- ********************************* -->
<! -- MIDI music
<Bgsound src = "http://www.so26.com/mid/Loop_1.mid"/>
-->
<! -- MP3 music -->
<Div align = "center"> <embed src = "http://w3.dicky.cn/down/xyzh.mp3" width = 160 Height = 45 align = "center" type = audio/MPEG loop = "1" autostart = "0 "> </embed> </div>

<! -- ******************* Note that encoding is involved in the weather forecast. % B1 % B1 % be % A9 is the city code, you can check it with Baidu, such as entering Beijing, * ************************* -->
<! --
<Center> <IFRAME width = 157 Height = 240 frameborder = 0 scrolling = No src = 'HTTP: // appnews.qq.com/cgi-bin/news_qq_search? City = % Ba % CF % B7 % Ca '> </iframe> </center>
-->

<! -- ***************** The online status of MSN is displayed. Note: it is valid only when you allow all users to view your status in MSN, otherwise, the MSN icon is always grayed out. **************** -->
<! --
MSN: sliumw@msn.com <a href = "http://snind.gotdns.com: 8080/message/MSN/sliumw@msn.com">
Align = "absmiddle" border = "0" alt = "MSN online status indicator"
Onerror = "This. onerror = NULL; this. src = 'HTTP: // snind.gotdns.com: 8080/image/msnunknown.gif ';"> </a>
-->

<! -- ******************************** -->
<Div align = "center"> <a target = blank align = center href = http://wpa.qq.com/msgrd? V = 1 & uin = 15983527 & Site = im.qq.com & menu = Yes> </a> </div>