Ok,

these are a few of my favorite tricks.
and i get asked how to do them all.the.time.

so, it’s no secret:

i am a huge nerd,
and often my husband looks over at me while i’m manually typing in code off the top of my head and admits how hot i look.
{then we kiss and our glasses clink.}

to find your CSS Stylesheet:
for blogger, go on into template > customize > advanced > add CSS

you can create so many things here, that it’s just time you learned how to use it on your own, right?
yes.

1- hide attribution or the “powered by blogger” tag in the footer. 
{or anything you want!}

every element in blogger has an ID.
a name where by you can call it, and order it around all you want.
careful, that’s lots of power.

in this case, just drop this code in the CSS box, hit return and then go scroll down to see your annoying “powered by blogger” disappear. then you can add your own copyright info and look profesh.

#Attribution1 {
display: none !important;}

{if this doesn’t work. double check the name of the ID

want to get rid of the annoying “subscribe to posts” below each post? ps. no one uses it, it just takes up ugly space.

–>

.blog-feeds{

display:none !important;}

or how about that extra “home” link that blogger automatically throws in there just to confuse everyone?

–>

.home-link {

display: none;}


as long as you know it’s name, it can be controlled. i’ve even used this to hide the header when i add in a fully coded header instead of uploading an image manually like normal people. {that’s a tutorial for another day…}

2 – remove space between your header and blog posts.

this is self explanatory. paste this in there and see what happens.
–>

#Blog1{

position:relative;

left:0px;

top:-50px; }

 if your header is all one piece, and it’s loading funny, you can also just make the “height” of the header space smaller. {not your header size, but the container its…contained in.} and your posts and sidebar will jump right up!

#header-wrapper {
height:200px;}

of course you can fiddle with those numbers until it’s where you want, but by all means, get it up there! no one likes a saggy chest.

3- moving around widgets.

so, just like moving up your posts, you can move your widgets up, down, left, right. i sometimes even put buttons up near the header. this way so they are not part of it, but rather just “floating” above it.

click on the widget or element you’d like to move so you can see the edit window, like this.

at the end of the “address” for the widget, you’ll find the widget ID associated with it. copy that {needs to be exact}.


now, how do you want to move it?  

the 2 we use most often are position: absolute or position:relative. 

absolute is going to tell that element to ignore what is on the page and float according to the browser window. in other words, i could tell my widget i want it to be 100px from the top of the page. this way, it floats in the same place, regarless of the browser it’s viewed on. this can be a mess though, if you already have lots on your page, on some devices or browsers it may look like a hot mess…

relative is what i use all. the. time. it says, this is where it is, and i want to move it this far from there to be here. where i say. and i’m the boss, so i get to say so.

i esplain to you:

lets say i wanted to add some social media buttons to the top of my blog near the header.
i went ahead and through some in my sister’s blog as an element above the header*.

{note. i just did this as an image to explain, but obviously this would be a coded HTML widget were it real…}



  i hopped in the widget to see the widget ID for this one i just added and it’s called “Image5”.

so, we go back to the css window and start typing using a hashtag like so…

#Image5 {
position:relative;
right:-700px;
top:46px;}

i played around with the numbers until i liked where it sat, then saved the template.
now, i could do the same thing to move all my elements up to meet it by plugging in #Header1 and moving it up…etc.

i use this all the time to help tighten up gaps in sidebars,
or when sidebar titles are slightly shifted to one side… yuck. i’m just OCD enough to cringe when I see things out of line…

hope that helps- good luck!!

*headers- 
to put something above or below a header, 
you often have to go into the HTML editor first, 
and then change the following code to have 
“access” to change or delete your header:  

find the code that says:

      <b:section class=’header’ id=’header’ maxwidgets=’1‘ showaddelement=’no‘>
        <b:widget id=’Header1′ locked=’true‘ title=’big red clifford (Header)’ type=’Header’>

and change maxwidgets to 3 or 4 {this is the number of header elements you are allowing yourself, you can always add more.}

change showaddelement to yes
change locked to false

now you can add an element above it, or below it, or you could even delete your header…

how’s that for a nerdy post? 
hope you find something you can use!