Today we’re talking about how to place gadgets (buttons, searchbar, followers, etc.) anywhere on your blog!!!!
How to add a gadget (buttons, images, navigation bars, etc.) to your header:
Step 1: Go to “design,” and “add a gadget.” Add your gadget (button, image, navigation bar, whatever…). Then you need to locate your gadget ID (it may also be called a widget ID). If can be found by opening your gadget and searching the URL at the top, it is usually at the end. Copy the ID. In this example the widget ID is HTML4.
Step 2: Go to “template designer” and click on “advanced.” Then scroll down until you see “Add CSS,” click on it.
Step 3: Add this code inside the css box:
#GadgetID {
position:center;
left:100px;
top:150px;
}
position:center
left:100px;
top:150px;
}
Step 4: Add your gadget ID immediately after the # . Your gadget ID is case-senstive, so you must add it exactly as it is written in your gadgets URL (found in step 1).
For example: if your gadget ID is "HTML4", then your code will look like this:
#HTML4 {
position:center;
left:100px;
top:150px;
}
position:center
left:100px;
top:150px;
}
Step 5: Once you add that code you will immediately see the gadget in the preview screen move. Depending on where it is, adjust the numbers immediately after "left" and "top" until your gadget is where you want it. This will take a few tries to get it just right. You can add positive and negative numbers. You can also change "center" to "right" or "left."
My "grab a button" (in my header) code looks like this:
#HTML4 {
position:CENTER;
left:125px;
top:-275px;
}
position:CENTER;
left:125px;
top:-275px;
}
thanks for the info – I've been waiting for this one!
A great post to finish off your blog design 101. Position is a great way to move things where you want them when working with a layout like blogger.
Another useful thing the position attribute can do is: Position:fixed;
You use it to sticky an element to a exact place relative to the browser window.
For example, you know those websites that have a menu sticking out of the left or right side of the screen? And as you scroll down the page it scrolls with you. That is done with position:fixed;
Using yesterdays post as an example we had:
<div id="newnavbar"><ul> <li><a href="the page your button links to"><img src="your image's direct link" /></a></li></ul></div>
Now to sticky the menu to the right side of the page and a bit down from the top we would add the following code to the advanced-add CSS area in the blogger design area.
#newnavbar {position:fixed; top:300px; right:0px;}
Or if you wanted it on the left of the screen you use:
#newnavbar {position:fixed; top:300px; left:0px;}
Again you can adjust the values of top, right, left and bottom to position your menu wherever you need it.
Perfect! Thank you so much.