[Change the method of the blog interface] Let your blog more personalized

xiaoxiao2021-03-06  50

These days have seen some articles in the 9CBS blog! Also harvested or more! ^ o ^ However, the interface on Blog seems to be such a traditional kind of good look. So I suddenly think, see if I can change my blog better, I have my own personalization! Ah! Now this interface is the result! Below I put the code out, and let everyone blog more personalized! The code is very simple, but only some html plus a little bit JavaScript! The most important thing is to understand the CSS style sheet! _________________________ first enter your Blog Management Center, Select: Options -> Configure in the Custom CSS Selector text box Enter your own CSS style sheet.

(Here is the CSS code of my interface): --------------------------------------- ------------------------------------------ Body {Background-Color: # 666666 ; margin: 0px; padding: 0px; SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: # 888888; SCROLLBAR-SHADOW-COLOR: # 888888; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR : # 888888; Scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffff;}. HeadermainTitle {font-size: x-large; filter: Dropshadow (color = # 000000, offx = 1, OFFY = 1 , Positive = 1); Width: 100%;} .midd {vertical-align: middle;}. Footercell {visibility: hidden;} # top {background-position: Right Top; Background-Image: URL (http: // Www.so26.com/images/bg_1.gif); Background-Repeat: No-repeat: Height: 88px Vertical-Align: Middle; Height: 75px; Background-Color: # bb3d00;}. Post {Background-Color: # F7f7f7; border-right: #cccccc 1px solid; padding-right: 15px; Background-position: 50% top; border-top: #ccccc 1px solid; padding-left: 15px; font-size: 9pt; margin-bottom: 28px; PADD ING-BOTTOM: 15PX; Border-Left: #ccccc 1px solid; color: # 000000; line-height: 22px; padding-top: 1px; border-bottom: #ccccc 1px solid; background-repeat: repeat-x; background -Image: URL (http://www.so26.com/images/bg_2.gif);} A: Link {color: # 000000; Text-Decoration: none;} a: visited {color: # 000000; Text Decoration: none;} A: hover {color: # 000000; text-decoration: underline;}. Post h2 {filter: dropshadow (color = # ffffff, OFFX = 1, offy = 1, posTIVE = 1); Width: 100 %;} .post .postfoot {color: # ff6600;} h5 {filter: dropshadow (color = # ffffff, OFFX = 1, OFFY = 1, posTIVE = 1); Width: 100%;

} ------------------------------------- ------------------------------- then enter HTML or JavaScript code in the "Static News / Statement" text box.

(The following is my interface code): ---------------------------------------- ---------------------------------------- < Div ID = layer2 style = "Border-Right: # 000000 0px; border-top: # 000000 0px; z-index: 0; Left: 0px; border- Left: # 000000 0px; width: 180px; border-bottom: # 000000 0px; position: absolute; top: 0px; height: 120px; background-color: #eeeeee; layer-background-color: #eeeeeee>

  • boring message < / H3>

  • < H3> manage center management center