Bloggy Help:

 photo socialmedia_zps413c1040.png  photo helpdeskbutton_zpsb16b6c42.png  photo instagram_zps73b3c07a.png  photo header_zps97df3d3e.png  photo needamakeover_zps6d19d8a9.png

Sidebar Tweak for Blogger Blogs - Resizing Buttons/Images Easily

resize your images easily in your sidebar

UPDATE: PLEASE NOTE THAT THIS TUTORIAL WILL NOT WORK IN GOOGLE CHROME.

I am totally stoked to have discovered a sidebar tweak - I hardly ever mess around on the sidebar. I just upload and go...in the HTML, not the "Rich Text" mode. You may already know about this hidden gem...next time share with us sooner!

I already knew how to resize buttons using an extra HTML tag...but did you know you can do it in the "Rich Text" mode without any coding? It does it for you! Cool huh?

Here's what you do:

Paste your code in the HTML/Java Script (gadget) box as usual. Go to this TUTORIAL if you're unsure how to add code to your sidebar.

Locate the "Rich Text" link and click it. This will switch your view from HTML to IMAGES, so you will see all your buttons as images.

In this mode you can: drag and drop your buttons to new locations, resize buttons, and line up buttons next to each other.

Wow!

To resize a button in this mode, just click your button (or other image) and the lines and squares will appear around the button. This is where you click to make smaller or larger by dragging the mini squares. Remember to not drag larger than your sidebar width is (not sure of the size of your sidebar? Click HERE).

Here's what it looks like:

Click the button you want to move and drag it over to the side of another button. If you have a wide enough sidebar they will show up next to each other after you SAVE and view your blog. So you will need to know your sidebar width...when you're resizing your buttons there will be a little number that shows up and that is how big your button is in PIXELS.


If you use PHOTOBUCKET to create "code" here's what you do:
  • Grab the HTML code located under your image in Photobucket.

  • Copy and Paste this code into your HTML/Java Script gadget.
  • Then click the "Rich Text" mode and click the image.
  • Now click the LINK mode and enter your link information (such as www.yourlinkinfo.com). Click Save.
  • Now your button info is attached to a link. Pretty cool huh? This saves time so you don't have to create your "button code" in another window.

24 comments:

  1. Wish you had written this yesterday :) I spent last night redoing all the bits and pieces in my sidebar and figured this out by accident too

    ReplyDelete
  2. Sorry Nat! I wrote it last week and only just posted it...good for you for figuring it all out on your own!

    ReplyDelete
  3. Hi Sarah!

    I have been sharing this since...forever.

    I share it in My Pages under 'How to make and take a blog button". I just have to add that it doesn't work for me when I am using Chrome :(

    I subscribe to you blog and always enjoy reading it!

    xoxo Bunny Jean
    Wednesday's Bunny Hop Party!

    ReplyDelete
    Replies
    1. So glad I came back to check comments. I was going to say it didn't work for me, but that must be because of Chrome.

      Delete
    2. Bunny Jean thank you! I was wondering why some of my friends couldn't do this in Chrome! Thanks for mentioning it!

      Delete
  4. Awesome! I have been wondering how to resize buttons, and this worked perfectly! Thanks so much for sharing.

    ReplyDelete
  5. do you know by chance, how to get the buttons RIGHT next to each other? I've been trying for the past 2 hours! I have removed borders, made the background transparent. I am stuck. thanks http://littleofeverythingblog.blogspot.com/ this is the blog i am trying to fix. thanks

    ReplyDelete
    Replies
    1. I sent you an email Fasterkj, but I was thinking about your question. If your buttons are small enough to fit next to each other in your sidebar, you can drag them to that position...similar to the photo in the post above. So if you have a 300 pixel wide sidebar, you could fit two 150 pixel buttons side by side. Hope this helps. Love the blog you're working on by the way!

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thanks, a nice post, I was wondering how to add those social media buttons to my blog - I did it with the help of your blog.

    ReplyDelete
    Replies
    1. Awesome! We'll be posting some more buttons soon!

      Delete
  8. Thanks for this! So simple! I've just moved from wordpress to blogger and posts like this have made it so easy to get just the look and feel I was going for. love it :)

    ReplyDelete
  9. This helped me soooooo much!!! Thank you!!!

    ReplyDelete
  10. This was such a huge help! Thank you!

    ReplyDelete
  11. For some reason, my buttons don't have the box around them and I can't resize! I tried the extra code, but that didn't work either. I don't know what to do! Help!

    ReplyDelete
    Replies
    1. same with me!! don't know what to do :(

      Delete
  12. Thanks so much! No more HUGE social media buttons on my blog. What a great fix.

    ReplyDelete
  13. This was so incredibly helpful, just saved me from the headache of the past hour of trying to figure out an issue. Thank you SO MUCH!!
    Sarah
    http://atticlace.blogspot.com

    ReplyDelete
  14. this doesn't work with Safari on my Mac. bummer!

    ReplyDelete
  15. This is the best blogger hack I've found!!! Thank you so much. I've been searching for a way to easily resize images or make a sort of gallery without recoding everything and this is perfect!

    ReplyDelete
  16. I've done this before with my other social icons, but when I had some more to add, I can't resize them. It won't let me click on them in rich text. Anyone have this problem and know what I'm doing wrong? Thanks

    ReplyDelete
  17. Okay, I figured it out for anyone who wanted to know the answer to my question. I was trying to do it on Google Chrome but it wasn't working so I tried it on Mozilla and it worked. I remembered when I first did it I used Mozilla, so that's why! If at first it doesn't work, try another browser. :D

    ReplyDelete

Comments are how we stay connected as bloggers. Let us know how you feel and we'll return the favor...stay calm and blog on!!! And guess what? You'll never find Word Verification on our blog...it gets kind of annoying when you can't read what WV wants you to verify right?

Outbrain