Adjusting a Margin for Blogger Templates

noreply@blogger.com (masterikuncoro) — Tue, 09 Dec 2008 04:48:00 +0000

The margins of each blog element (ie: header, sidebar, main-section) are specified in the "Style" section of your Blogger template:

In the "new" Blogger layouts templates, the style is specified between the and tags
In "Classic" Blogger templates, the styles are specified between the and tags

For both types of Blogger templates, margins can be defined in the same ways.The best way for me to explain how margins work is by using an example; here is the style element for my right sidebar as it appears in my blog template:

#sidebar-wrapper {
margin: 0 14px 0 10px;
width: 240px;
float: right;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

We need to focus on the red line, which specifies the margins (the space surrounding) the sidebar element. As you can see, there are four margins specified in this one line; these are defined in the following order:

Top margin: 0
Right margin: 14px
Bottom margin: 0
Left margin: 10px

I can increase or decrease these margins by altering the number associated with each margin. For example, if I wanted to define a space of 10 pixels between the header section and the top of the sidebar, I would change this line as follows: margin: 10px 14px 0 10px;
Sides which do not have a margion should be specified as "0"; those for which you would like a margin can have this specified in pixels (eg: 10px), or in other CSS units (which you can read about here). In most Blogger templates, margins are specified as pixels.

If you prefer all margins surrounding an element to be equal, you can define this using only one statement, eg:
margin: 15px;

This ensures that the margins of the top, right, bottom and left of an element are all 15 pixels wide.One final method of defining margins is to specify the margin in the description, eg:
margin-top: 15px; margin-right: 10px; margin-bottom: 5px; margin-left: 0;

Here are some examples of the spaces which can be created using margins in the style of a template:
Header section has margins defined as "15px 15px 10px 15px.Now the main-element has a margin-left definition of 15px......
and finally, the "sidebar" element has margins defined as: 20px 0 0 40px; (in addition to the margins of the other elements).
A great way to experiment with margins is to use the "Try it Editor" featured over at W3 Schools. Here you can adjust the margins in the left hand pane and see the results imedietly in the right section: By default, the code does not feature DIV elements as you would find in Blogger templates, so you may like to copy and paste the following code into the left window in order to experiment in the same way I have described:

Have fun experimenting with the margins of your Blogger template! Don't forget, you can always play around with the margins and preview the changes before saving. To be on the safe side, it's always good practise to make a backup of your template before altering it. (source : Bloggerbuster.com)

Untuk membuat teks berjalan kita menggunakan beberapa kode - To make the text we use to run some code marquee

1. 1. Teks berjalan ke kiri - text runs to the left
copy and paste to your blog or web copy and paste to your blog or website

hasilnya akan seperti ini-the result will be like this

Teks berjalan ke kiri The text runs to the left

2. 2. teks berjalan ke kanan - text running to the right

copy and paste this code for your web or blog copy and paste this code for your website or blog

hasilnya akan seperti ini - the result will be like this

Teks berjalan ke kanan Text running to the right

3. 3. membuat teks berjalan ke bawah - create a text to run down

copy and paste this code for your web or blog copy and paste this code for your website or blog

hasilnya akan seperti ini - the result will be like this

Teks berjalan ke bawah Text to walk down

4. 4. teks berjalan ke atas - text runs to the top

copy and paste this code for your web or blog copy and paste this code for your website or blog

hasilnya akan seperti ini - the result will be like this

Teks berjalan ke atas- The text runs to the top

agar teks berjalan berhenti saat mouse didekatkan kita bisa memberikan beberapa kode seperti : onmouseover="this.stop()" onmouseout="this.start()"
text to stop running when the mouse brought near the bus to give us some code such as: onmouseover = "this.stop ()" onmouseout = "this.start ()"

cara memasukan contoh untuk di edit - example of how to edit

copy and paste this code for your web or blog copy and paste this code for your website or blog

Teks berjalan ke bawah Text to walk down

sebenarnya tidak hanya teks yang bisa kita masukan tetapi link,image pun bisa kita masukan kedalam marque is not only the text entries, but we can link, the image can be input into our marque

Internet in focus

Solution : widget was found with id: HTML1. Widget IDs should be unique

Create Gif Animated Online Free

Adjusting a Margin for Blogger Templates

Create a Marquee for Your Blog