How to Align the Position of Gadgets in Blogger

Tweet

 

Quite a few bloggers want to know how to align or position a gadget to fit a certain template or specific need. Fortunately, this is really quite eay to achieve.

1. First you need to locate the widget/gadget ID#.

2. Then go to Design --> Template Designer --> Advanced --> Add CSS --> add one of the codes below:

a) This code is for basic text alignment. Replace the blue with center, left, or right:

#GadgteID# {
text-align: center;
}

b) This code is for a more precise alignment.You can use padding & margin:

#GadgetID# {
padding: 0px 0px 0px 0px
}

c) You can also use a code like this to fit the specific needs of your blog:

#GadgetID# {
position:absolute;
left:100px;
top:150px;
}

The above code would display your gadget 100px off the left side of your browser screen and 150px off the top. You can adjust this to your liking.

There are a number of different types of positioning variables you can use.

absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the „left“, „top“, „right“, and „bottom“ properties.

fixed: Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the „left“, „top“, „right“, and „bottom“ properties.

relative: Generates a relatively positioned element, positioned relative to its normal position, so „left:30“ adds 30 pixels to the element's LEFT position.

static: Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations).

inherit: Specifies that the value of the position property should be inherited from the parent element.

For more on the use of this kind of code you may refer to the following link: Custom styles for gadgets

Good luck!

Custom Styles for Gadgets in Blogger

Tweet

 

Sometimes you just want or need a certain gadget to stand out from the rest. You can achieve this by changing its font or colors, but also by changing its alignment or position. To make the necessary changes, just follow the instructions below.

1. Sign in, then go to Design --> Page Elements.

2. Click the Edit option on the gadget you wish to style and locate the ID of said gadget.

3. Now go to Design --> Template Designer --> Advanced --> Add CSS --> then add one of the codes below.

Depending on the changes you want to make you will need a different on of these codes:

Gadget:

#GadgetID {
Your styles CSS Styles
}

Gadget Headings:

#GadgetID h2 {
Your styles CSS Styles
}

Your headings might not be h2, but with most blog template this is the case.

Gadget Links:

#GadgetID a:link {
Your CSS Styles
}
#GadgetID a:visited {
Your CSS Styles
{
#GadgetID# a:hover {
Your CSS Styles
}

Replace the red text with the Unique Gadget ID.
Replace the blue text with the styles you wish to change.

The possibilities of CSS styles  are endless. I will go over just a couple of them below:

Font Color:

color: #000000;

Font Type:

font-family: YOUR FONT;

Background Color:

background-color: #000000;

Background Image:

background-image:url('YOUR IMAGE');

Borders:

border-style: YOUR BORDER TYPE;
border-width: 1px;

Just change the text in red to your liking.

I cannot go over everything in detail but you can look through this blog for more help with individual styles or you can check out at the great site W3Schools which offers a very good CSS tutorial.

Good luck!

How to Add Gadgets Inside the Header of Blogger Blogs

Tweet

 

Some templates allow you to add page elements inside the header. If you are not using one of those you can employ this neat little tweak to put gadgets like a search box or ad spaces inside the header of your Blogger blog. It allows you to place pretty much what ever you want inside the header. And her eis how to do it…

1. Go to Dashboard --> Design --> Edit HTML.

2. Find the following code (Ctrl + F):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

3. Insert the following code just below that:

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

4. The result should look something like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now you should have 2 sections to the gadget section inside the header. But you will have to position them correctly.

5. In order to do this you will want to locate the following line of code:

]]></b:skin>

6. Add the following code just above it:

(Older Templates)

#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%; float: left;}
body#layout #header-right {width: 50%; float: right;}

(Newer Templates)

#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}

6 a. If you are using a newer template you need to locate the following code as well:

]]> </b:template-skin>

Just above that code place the code below:

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

7. Now apply this to your blog and go to Page Elements. In Page Elements you should see the gadet/widget areas now available. Add a gadget.

8. Now you might have to go back to the code in section 6 and change the width around in the first 2 lines. Play around with it until it is to your liking. You can just click preview after you changed it to see what it looks like. As for the padding you will need to adjust this to move the gadget around on the blog. You can view my post on padding and margin if you have trouble understanding the values.

That´s all!

Good luck!

How to Specify Padding and Margin in Blogger

Tweet

 

In this short post I am going explain padding and margin and their purpose.

First I am going to explain the difference between the two.

Simply put, padding is the spacing from the inside while margin means the spacing from the outside. Both work by the same principles and to about the same effect.

You can find and use different values to specify the spacing:

in
px
em
pt
%

There are many ways to get the same effect with padding and margin.

You can specify the distance from the border of each side like this:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

You can also use padding in one line by writing something like this.(All 3 options below will give you the same effect as the code above.)

padding: 25px 50px; (2 digits)

padding 25px 50px 25px 50px (4 digits)

padding 25px 50px 25px (3 digits)

If you use 2 digits for padding or margin then the first digit is top and bottom while the second is left and right.

If you use 4 digits for padding or margin then it goes clockwise: top, right, bottom, and left.

If you use 3 digits for padding or margin, then the first digit is top, the second is left and right and the third is bottom.

That´s all!

Good luck!

Crosscol Plus Split Crosscol for Blogger Blogs

Tweet

 

 

This neat little tweak will add a single long Crosscol wrapper and a double split one below that to the template of your Blogger blog.

These new fields will be positioned below the header. You can see the 3 separate Crosscol areas in the image below.

 

How to add a crosscol plus split crosscol to your Blogger blog

1. To do this you will need to move or remove any and all gadgets from the original crosscol area in the  Page Elements.

2. Now go to Edit HTML and make sure to back up your template.

3. Search for (Ctrl+F, then enter search phrase in text/find bar) the word crosscol.

4.  You should now see something like the code below. (If you see something else then you either did not remove all the gadgets from this area or you have an older/3rd party template.)

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

5.  Replace the code in red with the code below. (If your template does not have the red code, then just paste this code directly under the first line of code.)

<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>

The result should look something like this:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>

6.  Now scroll up the page until you find the following code:

]]></b:skin>

7.  Depending on the template you are using you will have to add one of the following codes:

(Older Templates)

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}

(Newer Templates)

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

If you are using a newer template you will need to add the second part of this code in a different section. Scroll down and find the code below:

]]</b:template-skin>

Place the following code directly above said line:

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}

8. Save your template. Provided your did it correctly you should be able to use your new gadget areas and not get any errors.

That´s all!

Good luck!