Fabulous Blogging

Decoding the Blog Scene One Post at a Time

You are here: Home / Wordpress Guides and Tutorials / Cheats and Hacks: Trick Out Sidebar Widgets When You Don’t Know HTML Code

Cheats and Hacks: Trick Out Sidebar Widgets When You Don’t Know HTML Code

Problem #1: I want to add formatting to a text widget, but I don’t know the HTML for it!

This is a common problem for bloggers who want to add a photo (usually left aligned) with text that is either bold or italicized, formatted with colors, and needing to go in a sidebar. How now brown cow?

  1. Go into your WordPress dashboard and click on POSTS > ADD NEW POST.
  2. Add your content and your image.
  3. Then format it with the picture left-aligned, highlight the text and format it with the styling and/or color you wish.
  4. Click on the TEXT tab on the right hand side of the post screen.
  5. Copy all the code.
  6. Go into APPEARANCES and WIDGETS and paste the code into a text widget box.

 

The trick is that you are using the built-in HTML code generator that WordPress has so you can avoid all the messy business of writing the code. You can add links– pretty much anything you can do in a post, you can then copy that code and stick in any widget area on your site.

Problem #2: I want to make one of those cute “Grab My Badge” buttons, but I am intimidated by the thought of designing one and writing the code for it.

  1. Go to PicMonkey and click on the DESIGN option.
  2. Choose a square.
  3. Click on the TEXT icon and add your text.
  4. Then click on the overlays button and upload your logo (or image). Or, you can design one right in PicMonkey.
  5. If you want to, add some sort of border.
  6. Crop it so there is very little extra space around it.
  7. Then choose the frames icon and we’re going to round the corners and make a transparent background.
  8. Finally, you resize the button down to 200 or 150.
  9. Save it as a PNG.
  10. Come into your WordPress dashboard and click on MEDIA > ADD NEW.
  11. Upload the image and grab the URL by clicking on edit once it’s uploaded.
  12. Go to the GRAB MY BUTTON website.
  13. Fill out the fields and paste the IMAGE URL of the image you just uploaded.
  14. Hit preview to check out how it looks, then click the green GET CODE button.
  15. Copy and paste that code into a text widget on your sidebar.

 

Problem #3: I want to make my social media buttons all butt up next to each other nice and neat and cute and I want them to open up in a new window when they are clicked on and I don’t know how to code it all!

 

  1. Once you’ve got some that you like, add them to your media library by clicking on MEDIA > ADD NEW.
  2. Then go into a post screen as if you were writing a new post.
  3. Click the add media button and add all the images you are using. Make sure the alignment is set to none.
  4. Then click on each image one at a time and hit edit. When the screen comes up, type in the URL of the web address you want it to go to (at the bottom).
  5. Then click on the advanced tab at the top and go to the bottom where it says target. Click open in new window!
  6. Once you have it as you’d like it, click on the text view and copy all that code.
  7. Paste it into a widget area.
  8. It’s important to note that you must first resize the icons in Picmonkey if you want them all to go in one horizontal line.

addingsocialbuttons

Problem #4: I want to make an image that is clickable in different spots!

Let’s say you are featured in several different magazines and you want to create one image where each magazine cover is a clickable link. One Funny Motha has a badge on her site that is a mapped image. So how do you do it if you don’t know code?

  1. Create the image first (in PicMonkey, Photoshop, etc.)
  2. Then upload it into your media library by clicking on MEDIA > ADD NEW.
  3. Grab the file URL and copy it.
  4. Go to image-maps.com.
  5. Paste the URL and hit start mapping. (you don’t want to choose the upload option because then the image is saved on their server, not yours).
  6. Right click on the image and hit CREATE RECTANGLE.
  7. Click and drag the space you want clickable and type in the URL. Hit Save.
  8. Then right click again, and repeat the process as many times as you need to.
  9. When you’re done, right click your image again and click get code.
  10. Then scroll down and copy the code.
  11. Place it in any widget area on your site!

imagemap