Wednesday, August 6, 2014

How-To Resize a Button

I read once that if every single photo, button, or widget in your sidebar is the same width it is much more appealing and increases the professionalism of your blog. Side note: The same is true for the photos in your posts, too. It seemed like as soon as I read this that was all I was noticing on other blogs and I went to work on my own sidebar (at the time I only had one). 

The problem is I had some buttons in my sidebar that I had "grabbed" from other blogs or websites. If you don't know what I mean, scroll down the the bottom of my left sidebar - do you see my button with a little box underneath? If you copy that code and paste the html into an html widget in your sidebar, my pretty face will show up on your sidebar. Feel free to do so :) 

So anyway, I had some images in my sidebar that I had grabbed from other blogs - they were already sized and I could not figure out how I was supposed to make those the same width as everything else in my sidebar. I also had some that I had created myself but didn't save the "raw" file so if I wanted to change the size I would have had to start all over. That's where this post comes in: today I'm going to tell you 3 different ways that you can resize a button (without starting all over), whether it's one you created yourself or grabbed from someone else. 

#blogger #bloggingtips #buttons #resizeabutton #bloggertips #html

First things first:

+I run a Blogger blog so any of these tips are blogger-related and I am willing to admit that I know absolutely nothing about Wordpress.

+ You can resize any widget in your sidebar. (When I say "widget" I mean any of the images, tools, or links that appear in a sidebar.) Although the tips below are mostly applicable for resizing buttons or images.

+ In order to edit a widget in your sidebar, you need to click on the edit button for the widget you want to change -- this is the little toolbox image that shows up in the bottom-right of every widget. This pulls up the edit window and shows you the html code for that widget.


01 || Rich Text: This one is definitely the easiest one I think. The problem is, I've been able to make it work on a Windows computer but it will not work on my Mac. View your blog and click on the edit button for the widget you want to change. In the edit window, click on Rich Text in the upper-right. It shows you the actual images, rather than the html, but you can still make changes to them. 
Click on the image and you can use the arrows in the corner to make them smaller or larger. If you have more than one image you can change the size of any of them and you can move them around or delete spaces between them. When you edit in this mode, it automatically changes the html to reflect your changes. Sometimes I figure the less I have to do with html, the better :)


02 || Edit the HTML: If you are not able to use the method above you can always edit the html code to resize. View your blog and click on the edit button for the widget you want to change. This time, in the edit window we are going to stay in html mode. In the example below I took a button that was created to be 300px x 300 px and changed it to be 250x250 so it would fit in my sidebar.
If this is a widget with an image or a button your code should look something like this:
<a href="" title="ND Bloggers Network"><img src="" alt="ND Bloggers" style="border:none;" /></a>

Change the code to this, inserting a pixel value for your desired height and width:
The changes appear in purple.

<a href="" title="ND Bloggers Network"><img src="" alt="ND Bloggers" style="border:none;" width ="250" height="250" /></a>

It's as easy as that! Html sounds confusing and can be frustrating at times, but I am honest when I say I use this method often and it's easy. 


03 || PicMonkey: When in doubt use PicMonkey, right? In order to resize an image you can always do the following to edit the html in the widget's edit window:
  • Save the image to your computer.
  • Upload the image to PicMonkey, resize to be your desired height and width, and save to your computer again.
  • Upload the resized image to any image-hosting site (i.e. photobucket, tinypic, etc.)
  • Copy the Direct URL for the resized image from your image-hosting site and paste into the img src field in the html.
Although I truly think PicMonkey rocks, in this case it is definitely not the easiest method.


You can find other blog-related posts here:

No comments:

Post a Comment

Blogger Template designed By The Sunday Studio.