How2: Add Buttons, Images, or Icons to your Sidebar in WordPress 2.7.1

by jolikestano | March 17th, 2009 

Post by Guest Author, Joli K.

You can visit Joli’s blog here:

Sidebar buttons are an easy way to beef up your blog as well as a good way to endorse or promote a website that you like. For example, I run a blog called The Mama List and I wanted to add a link to The Soft Landing Baby because I think it’s a useful website that’s relevant to my content. Plus it looks better than just having a plain old link. Below are all the steps you’ll need to successfully create a new look for your sidebars.

Below is the logo I’d like to put in my sidebar, circled in red. I found this on The Soft Landing Baby website.

Step_01___Find_Logo.JPG

1. The first thing you would do is make sure it’s okay to copy their image and link to them (it’s normally just fine). To download the image  right click and select “save as.” Save to desktop or desktop folder for easy access.

2. Next, you’re going to act as if you’re starting a new post. So choose “add new” from your Dashboard on the left of your admin page (click to enlarge image).

Step_02___Add_New.JPG

3. Click on the “add an image” icon and upload the desired image into post.

Step 03 - Add Image.JPG

4. Click “select files and locate the image you’ll be using. If you want your image to link to a website, make sure you include the link url. I use “full size image” but you may have to play around with the size if you want it smaller. Also this is where you insert the title that you want people to see when they hover over the image. Once you have it filled out, click “insert into post.”

Step 04 - Specify Image.JPG

5. The HTML code will show up in your new post (to see the code, be sure to click on the HTML tab - not the Visual Tab). If you have linked to another site and you want a new tab to open when someone clicks on the image, make sure to insert: target=”_blank” at the end of the url.

step5openinnewtab.jpg

6. Once you have the code in your new post you can preview to make sure the appearance is correct and it’s opening in a new tab. In order to preview you’ll need to “save draft” first.

Step 06 - Preview.JPG

7. If everything looks good and the size is correct, highlight and copy the HTML code.

8. Select “Widgets” under your Appearance tab on the left of your screen.

Step 08 - Open Widgets.JPG

9. Under “Current Widgets” select right or left sidebar - wherever you want your image to appear - and then “Show.”

Step 09 - Choose Side.JPG

10. Scroll down to the bottom of the screen, find where it says “Text” and click “Add.”

Step 10 - Add Text.JPG

11. Click on “edit” for the new Text button you just added.

Step 11 - Edit Text.JPG

12. Paste the HTML code into text box.

Step 12 - Paste Text.JPG

13. Save changes

14. Go to “edit” under your “Posts” Button and delete the draft that you created.

Step 14 - Delete Draft.JPG

Simply follow the above steps each time you want to add a new button. You can see the finished product on my blog below. I currently have two buttons on the left and one on the right.

Finalshot.jpg

That’s it! If you get stuck, please leave a comment and I’ll get back to you as soon as I can. Good luck!

- Joli

Popularity: 54% [?]

Thumbnail Issue with ImageManager and WordPress After Moving Blog Into a New Subfolder

in Tips
by admin | February 4th, 2009 

My site has been down for over 24 hours - the time it took to move tystips.com into it’s own /subfolder on my godaddy hosting account. Unfortunately when the site came back up some of my thumbnail images weren’t displaying properly. I’m very sorry for the inconvenience. Until I get this fixed, please click on any broken thumbnail to see the full size image in a new screen.

Sorry for the inconvenience.

Tyler

Edit: Ok, I Figured it out.

First, some background on how this all got screwed up in the first place:

I discovered recently that you can host multiple blogs on the same premium hosting account through godaddy. All you have to do is point your additional blogs to their own subfolder (/subfolder) and not to the root directory (/ ). I really liked how much this cleaned everything up in my root directory, but I still had the original blog (tystips.com) hosted in the root (which was messy).

So I decited to use FireFTP to copy the entire contents of the root directory (/ ) where TYsTIPs.com resides to a new subfolder (called /TYsTIPs) located within the root. Once completed, the root had two subfolders (/TYsTIPs and /projectsinmetal - which is for my other site). Unfortunately FireFTP and the .thumb folders don’t play nicely together, and NONE of my .thumb folders got copied into the new /TYsTIPs directory.

So I successfully moved my entire wordpress blog into a new subfolder . . . but none of the .thumb folders made it into that new subfolder. It took forever to copy these .thumb folders 1×1 into the new subfolder, but I finally got it done. Hopefully now everything shows up properly.  If you notice a post that still has image issues PLEASE leave a comment and let me know.

Thanks for your patience!

Tyler

Popularity: 50% [?]

Is Amazon Cheating Me out of 25% of My Associates Earnings? Could Amazon Be Stealing?

by admin | February 1st, 2009 

I’ve been an Amazon associate for over a year now, listing book titles on a few of the small blogs that I manage. Over the past year I’ve made about $11 in revenue. Then something fun happened. I launched a new niche blog about metalworking and sold 11 books in 1 day! Wow! Now, those 11 books only amounted to $3.56 in associate revenue, but since that 1 day of sales accounted for about 32% of my total earnings for the entire 12 months previous, I was extactic!

Report___Jan_30_2009.JPG

Then something strange happened. The next day (yesterday to be exact) I sold another book. However, my total associate revenue dropped despite the sale of another book. I went from a total of $3.56 from selling 11 titles to a total of $2.68 after selling 12 titles. How can this be? …read full articles of "Is Amazon Cheating Me out of 25% of My Associates Earnings? Could Amazon Be Stealing?"

Popularity: 51% [?]

How2: Insert Space Between Paragraphs in WordPress (without using <br> and <p> Tags)

by admin | January 23rd, 2009 

Here’s a quick tip! WordPress has this frustrating habit of stripping extra <br> and <p> tags out of your posts once you publish them. This is particularly annoying because the tags stay in when you preview, and aren’t stripped until you actually publish.

Instead of using <br> or <p> tags in your post (which isn’t really kosher anyway), try using this:

<br style=”height:4em” />

This should give you that extra space that you’re looking for. If you need even more space, change the 4em (to 5 or 6em, etc.) until you get the amount of space you’re looking for.

Also, if you’re ever trying to post code like I did above you’ll need to use “& l t ;” in place of the “< " and “& g t ;” in place of “>” (remember to remove the spaces and don’t include the quotes). Otherwise the browser will recognize the code you’ve typed, and format accordingly.

Hope that helps!

Popularity: 99% [?]

How2: Change the Title from Lowercase to Uppercase in the “Clean Machine” WordPress Template

by admin | January 9th, 2009 

screenshot.gifI recently set up a new blog using the Clean Machine Template.

I liked the template a lot, but I was bothered by the fact that the title and description of the blog were automatically converted to lowercase. I wanted to change this setting so my blog title would be capitalized properly.

To illustrate the problem, this is what the blog looked like with the unaltered Clean Machine theme. Notice how the blog title is all lowercase (so is the slogan/description).Lowercase.JPG

This is what I wanted the title to look like (nicely capitalized).Capitolized.JPG

It turned out to be a pretty easy fix.

To fix it, you need to edit your style.css file. Click on “Appearance > Editor” and choose style.css in the right hand column (click the image below to make it bigger). Locate the portion of the style.css sheet that says “*/ Header /*” and change the text-transform from “lowercase” to “none”. Then scroll to the bottom and click the “update file” button.Header_Text_Transform_None.JPG

If you also want to remove the lowercase setting from the slogan under the blog title, scroll a little further down until you find the section containing “.slogan {” and change that from “lowercase” to “none” as well.Slogan_Text_Transform_None.JPG

I changed both the header and slogan settings so my blog title and slogan now look like this:Fixed.JPG

That’s it! See, I told you it was easy!

Popularity: 76% [?]

Page 1 of 512345»