How To Side by Side your Blog Buttons & Images

DIY & Tutorials By Aug 22, 2012 38 Comments

Isn’t it an eye sore when you see one or two widgets on your sidebar not aligned with the others? That everything is almost perfect, apart from the out of place buttons? Do you love to tweak your blog whenever you get a chance?  Then, these tips will be of use to you.

Warning: You might need  a cup of drink next to you, or Advil, for later.

It’s a fact, we all want a nice looking blog (however you want to define ‘nice’) and a clutter-free one. That’s why I can’t help but tweak things. It’s like a new illness to me. And because I really did not have a clue before when it comes to html or any kind of magic to design your blog, searching for appropriate codes or tags was really difficult. And if you don’t enter the right term on Google, you get random results.

So I revised this HOW TO… SIDE BY SIDE  from last night’s post, hoping I’ve now simplified it, with lots of screenshots.  Sometimes, I get one of those slow moments, and then aha! I should have done it like that. Duh.

The tips and html tags provided below are what’s currently working for my blog. And I’m hoping it would work for you – if one blogging day, you need to tweak things a little.

Note: Please be very careful when copying and pasting, one missed tag or alteration can mess everything up.

So, what are your issues with your buttons?

  • I just want to resize it.

If it’s just the size, then you probably just need an html tag for it. If you’re not bothered about the buttons not being side by side or on top of each other with no space, then the best solution would be this.

Let’s call it ‘Resize’ html tags: alt=”” width=”100″ height=”100″

Example: You want this bag to be a little bit smaller:

Bag in original size.

The tags above are what you need to insert into its html code in your Text widget. Check below.

Bag now resized to 100 x 100 px. using the ‘resize’ html tags.

You see how the size is now reduced? That’s 100 x 100 px – and that’s by using the code above. Just change the value i.e. 100 to 200, if for example you want it bigger. If you take off  the resize html tags, then it will go back to its original size, whatever it was.

And below is how the html form of the bag looks like. I’ve also highlighted the ‘resize’ html tags, so you can see properly where they’ve been inserted. That’s very important.

The ‘resize’ html tags need to be place just after your image url. (note: <img src – is the tag carrying your image url)
img src is an abbreviation of image source.

Next issue…

  • If you want to resize and put the buttons side by side, then your next bet is put all the html codes in one Text widget.

5 buttons html codes put together in one Text widget. Don’t panic.

The screenshot of my Text widget  above consists of 5 blog buttons put together. I’ve simplified the codes for these buttons, since the grab box, if you’ve noticed, they’re too long and so many tags involved.

And below is how this 5 buttons would look like on my sidebar together.

5 blog buttons side by side on my sidebar

The next screenshot would show you how to ‘squash’ all the button’s html codes together, for the side by side settings to take effect, as well as using the ‘resize html tags’.

Screenshot shows highlighted one button’s html codes.

Example: Leslie’s House on the Way’s blog button.

What I’ve highlighted are the html codes for one button only. The setting is blog url and then image url. And where the highlight ends in this tag </a>, the next tag after that, which is this <a – is the beginning of the another’s blogger button’s html codes. In this case, Nikita Land’s button.

So if you repeat this process for each button, meaning putting the end tag of one’s button to the beginning of the next button’s html code, you will finally get the side by side effect.

Remember, this would also depend on how big the width of your sidebar is.

For the Origin Theme – the sidebar is 260. And width 100 works perfectly fine for me.

Here’s the html codes that you can use to try out on your text widget, if you need the side by side and resize. Just fill in the appropriate url addresses as written bellow.

The red fonts are the html codes for your blog’s url, and the blue fonts, are for the image url.

Updated: 08/23/2014

To side by side, this is the html code format you need and just repeat it.

<a href=”PUT YOUR BLOG’S URL HERE/” target=”_blank”><img src=”PUT YOUR IMAGE BUTTON URL HERE” alt=”” width=”100″ height=”100″ /></a>

Note: Instead of using target=”new”, use target=”_blank” instead.

IMPORTANT: If you copy and paste this on your Text Widget and the ” quotation marks look curvy and not straight, delete it, and re-enter it again. For some reason, when you copy and paste these codes, it will not retain its form, hence you need to tweak it a little .

If it doesn’t work, come back here, and let me know.

That’s it for now. If you have any questions or want clarification, please feel free to message below. Also, let me know what other DIYs (simplified) you would be interested to see here. Your feedbacks are very important to me.

Thank you!


Sweet Jelly Bean has undergone remarkable transformations over the years, surprising even myself. As a blogger, beauty enthusiast, avid reader, and full-time mom, my journey has been quite the adventure. This site is in a constant state of positive evolution, and I hope you continue to follow along.