DIY & Tutorials

DIY Thursday: How…to Side by Side your Blog Buttons & Images

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 ex 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 that is.

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) note: 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.

The screenshot of my Text widget  above consists of 5 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.

Ex. 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.

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

VERY 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 wold be interested to see here. Your feedbacks are very important to me.

Thank you!


31 thoughts on “DIY Thursday: How…to Side by Side your Blog Buttons & Images

  1. This is so useful! It’s so hard to find HTML code for tweaking blogs if you don’t know the first thing about it…but I’ve learnt quite a bit since starting a blog!

  2. Hey jelly bean, are you holding down the repeat button when you send me something. Gosh I get them by the page full,it’s a real pain to delete all these things. Just stop it, PLEASE!

    • In fact, I don’t. But thanks for the assumption and for letting me know. Support actually found out the issues when it came to double posting about a week ago, hence I dropped you a message on your blog as I didn’t mean to cause any spamming issues. But since you’re still having issues from your end (and at this point, I am not sure why since you’re not my follower) please kindly contact Support and tell them your issues. Unfortunately, I can’t help you any further, especially if you’re not on my followers list anymore. Thank you.

    • Hi! Glad you like this post. Do try it out and see if it works for you. Drop me a line or something if you’re having issues.

      And wow! Thanks so much for the award. I really appreciate it. (P.S. don’t worry about posting the link, I don’t mind at all 😉 )

      • I’ll definitely be trying this sometime this week. I’ve been tweaking my blog a lot lately!!! SO much that I fall asleep with my laptop, LOL!!!

        I love all the DIY stuff you have on here! That’s what brought me over initially. Cool that you blog on similar topics like fashion/beauty, etc.! 🙂

        Thanks for the great tips for n00bs like me 😉

        • I can’t stop tweaking my blog! LOL. we’re just the same. But when you don’t have CSS, there’s only so much that you can do with it – still I’m not willing to pay for it just yet. Plus once you have Custom Design, I’m sure you would want more, and that would be more staying up late haha. Thanks for the wonderful comment. I am a newbie myself when it comes to these things so I’m trying to simplify everything for everyone as it’s better that way. 🙂 Yes, I love beauty stuff,too!

          • i’m not gonna go with CSS or domain purchase since i refuse to pay for web hosting. i know that it doesnt look as “professional” to have the wordpress in my url, but im ok with it!!!!

            im pretty clueless on graphic design and html. but am learning!!
            my email if you’d like is
            harajukugirlfl {at} (gmail) dot *com*
            (spambots rule! – _ – lol )

            • I know what you mean.. I’m not ready for CSS, although my techy friend told me that I could have signed up on this site that it’s free web hosting (you still get a url) and you have access to your CSS layout!! About the domain thing, I wasn’t going to purchase it right away, as I could be giving up my blog, you never know, but AJ’s Dad, decided to do it anyway LOL. It’s $25, for 2 yrs of owning the domain, I think. Not bad.
              Thanks for your email and yeah boohooo to spambots hahaha

  3. This has been very helpful for me and I’m using it too now in my blog 😀 Thank you so much for this helpful DIY!

    Apparently, I temporarily removed the links of both badges. The problem I encountered was that whenever I click on the second badge, it directs me to the link of the first badge. I hope you can assist me on this. Thanks!

Now, your turn. This space is all yours!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s