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.
–>
or how about that extra “home” link that blogger automatically throws in there just to confuse everyone?
–>
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.
–>
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!!
<b:widget id=’Header1′ locked=’true‘ title=’big red clifford (Header)’ type=’Header’>
Thanks for sharing this. I was about to accomplish two out of the first 3 codes. My powered by blogger just wont go for some reason.
Oh sorry, It needed a "1" after attribution. Edited it so that code will work now! Thanks for letting me know! 😉
Love this!! Thanks!
Pinned so I can read and re-read 🙂
Love these tips!! You are definitely my favorite nerd (after my husband of course) 😉
My attribution still won't go away…?
Oh, and capitalized. I also added "!important" to override anything you might have lurking in your code. 😉 Let me know if that works!
Oh my goodness, those large spaces in my sidebar were really irritating me, and now they're gone! Thanks SO much for the tips. I really, really appreciate it! I'm still pretty new at the whole blogging thing, so picking up tips like this along the way is super helpful.
I tried to remove the "powered by blogger" as well and it still would not get removed for me either.
Grr. Well, if not, the last and final effort would be to look up "Attribution" in the HTML editor. When you find it, it will say locked='true'<br /><br />Then change the locked='true' to locked='false'<br /><br />After you do this, you can go back to layout view and you should be able to simply delete the widget altogether.<br /><br />Let me know if that works!
Yes! Changing it to false worked. Thanks, Meg!
Great tips! I've gone through and done some & now I need to work on #3! Thank you!
OK…I made all these changes & now they're back to the way they were. I've tried it twice & I can see my "Home" & "Powered by Blogger", etc. disappear. And then they come back. What am I doing wrong?
these tips are great! i am going to have to send you an email, though, because i think i need some help with the social media buttons.
Great tips. I was actually able to just remove the attribution on the layout page by removing the footer. I think this is a new capability though. I have a question related to the moving around of widget: for some reason, there's a ton of space between the title of my Widget (example: Subscribe) and the actual text or content of that widget, as well as between each widget. Is there a way to
This comment has been removed by the author.
This is a great post.I think it will be very usefull to us. I read it but I need some thing more to know about this.<br /><br /><a href="http://www.aleedex.com" rel="nofollow">Mobile Application Development Company</a>
I am very happy to be able to find this excellent article! After reading your article, I feel learned a lot of things<br /><br /><a href="http://www.outsourcefinancework.com" rel="nofollow">small business outsourcing</a>
Awesome! Thanks so much – all those things really bugged me, but now they're gone! Yay! <3<br /><br />Love, Hannah @ http://www.welivedhappilyeverafter.com
Thank you so much for this it is beyond helpful!