CCS codes part 01

CCS codes are used at many occasions in the blogger template. If you don't know about these , you may be confused as you see a letter with binary codes. So skip it. For Other , I think these might be very useful at editing your blogger template.

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)


#div {
margin:0 5px 10px 15px;
(top right bottom left)


#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)


#div {
border:5px dotted blue;


#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)


#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)


#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)

* From


Every New lesson , directly to your Mail Box .....


cornyman on June 1, 2009 at 4:35 PM said...

Hello, that's a great blog and i found you as a new member in the fantastic EntreCard network.
But i couldn't drop my card on your blog because you have not yet put the EntreCard widget on your blog for getting much more traffic each day :((

DragonD on June 1, 2009 at 7:34 PM said...

thank you cornyman,
yep , i am new to Entrecard ! its ok now.I put the widget.

cornyman on June 1, 2009 at 10:17 PM said...

Now you only have to approve the ads on the Dashboard of EntreCard (when you login there, you'll be automatically on this page).
The ads are on the right side. Click approve and they will jump to the other right side.

You will get the money which the advertiser have paid for showing the ads on your blog-widget!!

DragonD on June 2, 2009 at 2:03 AM said...

@ cornyman

thanx bro !

Fasya on September 22, 2009 at 10:24 AM said...

hello, i would like to ask.
i've put the margin and padding code at my blog and now the post body with the sidebar is on the left.
how can i change it so that it is on right instead?
thankyou so much anyway for this. appreciate it. been trying out many things already, but never work.


Johny Tim on February 25, 2010 at 11:08 PM said...


Chica Maxxis Venezuela on July 28, 2010 at 1:21 PM said...

I posted a picture as background of blog using photobucket and ccs
.body-fauxcolumn-outer {
background: url(;
.body-fauxcolumn-outer div {
background: none;

but the background isn`t fixex and it moves (scrolls) up and down as fixed to the gadgets

how can I make it fixed as a regular blogger layout background?

Rainysoul on September 10, 2010 at 8:03 AM said...

For a "part 01" I'm missing where to put the css. I've tried putting it into the "blogger template designer" under the advanced--> Add CSS area, but it doesn't seem to cause any changes. Using the margins and padding code, I even changed the left side to be 150px, and no noticeable change... What am I doing wrong?

Nilabh Verma said...

Hi friend, 

I am from India and can say that you have sound technical knowledge about html and css. I am facing a problem and I need a help from you.

I have uploaded a new theme in blogger. It looks great but there are some problems:

-There are only 5 posts at homepage. I am not able to increase it from design or posting section as it remains as it is. I want atleast 10 posts at homepage. 
-At the bottom of the posts, it shows only 3 pages link. I want up to 7 or more pages.
-When I click on next, it shows only 4 post including last post of previous page. I want 10 posts there.

Can you please help me regarding this. I will always be thankful to you. You can also have a look of my website:

share all about tips and tricks on May 6, 2012 at 7:06 AM said...

thanks for sharing

Video Gm786 said...

nod32 username and password

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

The Word Validation image has been removed and no need to Sign In. So don't be lazy ..........

This blog sucks under Internet Explorer.

Buy me a Coffee

Powered By

Latest Site News

Animated 3D Dock removed in order to speed up loading time and to help IE users.

This site will be come up with a DOMAIN name soon.

Link and Win competition will start as soon as the Domain name added. Join with us. You could be the winner.

Site Info

since 2009 April

Submit a Lesson


of Visitors read Pages.


Lessons by DragonD | Template by Simran | Logo by lahirulcd | Temaplate redesigned by DragonD| Icons by | Licensed under CC license Creative Commons License