Make your Header, Blog Post, and Attribution Gadget movable in Blogger's Design

Have you noticed that you can't move your Header, Blog Post and Attribution Gadget in your Blogger's Design?
If not yet, go to Dashboard > Design> Page Elements, and try to move the said Gadgets...is it possible?  ツ

(By the way, it depends on the default template you used, because there are some template that you can already move all the gadgets... ツ )

 So here's the very simple trick that you can do to make the said Gadgets movable.
Go to Dashboard > Design> Edit HTML and check Expand Widget Templates. and Search (Ctrl+F) the following lines in red:

For Header:

<b:widget id='Header1' locked='true'

For Blog Post:
<b:widget id='Blog1' locked='true'

For Attribution:
<b:widget id='Attribution1' locked='true'


 then after, just change the word true with false...
then click Save Template button.
and that's it! go back to your Page Elements and you can now possibly move your Header, Blog Post, and Attribution.

If there's still a problem with your Gadgets... feel free to leave a message below... thanks! ツ

Read More Here...

Aligning and Positioning Widget/Gadget in Blogger

Aligning and Positioning your Widget/Gadget is also one of the important tricks you must know in blogger, so that you can put it everywhere in your page while disregarding the default template...
Sounds interesting, right? ツ
Normally, it is used to put your Search Box aligned to your header banner but you really need to have a Trial and Error Method for you have the perfect position of your Widget/Gadget.
But don't worry, the process are very simple! ツ

1st. You need to Locate The Widget/GadgetID#
 (just click the link above to know how...)
2nd. go to Design-->Template Designer-->Advanced--> Add CSS--> Input one of the codes below:

This is for basic text alignment. Replace the Orange with center, left, or right

#GadgteID# {
text-align: center;
}

This is for a more precise alignment.You can use Padding & Margin

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

You can also use a code like this to fit your needs.

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

This 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.

Their are a few 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:20" adds 20 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

SOURCE

Read More Here...

Locate Widget/Gadget ID's in Blogger

This stuff is very important if you'll going to  edit something in your blogger's HTML area since you need to know what's you'll gonna type in your Find box (Ctrl+F) to make editing much easier.

Just follow this very simple steps to locate the ID of your Widget/Gadget:

1. Go to Design-->Page Elements.
2. Click the Edit Option on the Widget/Gadget.
3. Once the Widget/Gadget Opens you should see something like this below. 

(TIP: maximize your Widget/Gadget window)

(Click the photo to enlarge)

The section in red is the Widget/Gadget ID#.
For this gadget I have here my ID is Label1.
This is case sensitive so copy it just as you see it.

SOURCE

LinkWith

Read More Here...