The following tutorial is meant to facilitate writing your grab code for WordPress.com users ONLY. Bloggers using WordPress software on their self-hosted site should reference THIS post from MomItForward.com (which I found extremely helpful in redesigning my self-hosted site).
Blog buttons can be a little confusing, especially if you’re not well-versed in graphic design or HTML coding. Today we’re talking about DIY blog buttons and how to write the grab code for your site – especially those of you who are on the free WordPress.com blogging platform.
1. Make a button (anyone)
If you’re graphically inclined, by all means make your own button (and by button what I really mean is square graphic). I created my button in photoshop using graphic elements from my site. Standard buttons are 150 pixels square, RGB format, and saved as jpegs.
2. Upload your button (anyone)
My friend Amy pointed me to THIS post where I learned about tinypic, a site that will upload your button/square graphic to the web for free (and without an account). Choose your jpeg, upload and then copy/save the DIRECT LINK FOR LAYOUTS code you are given.
3. Prepare your widget (for bloggers on the free WordPress.com platform)
In your Widgets Menu (Dashboard -> Appearance -> Widgets) drag and drop the TEXT widget to the desired spot on your sidebar and give it a title.
4. Write your grab code (for bloggers on the free WordPress.com platform)
I found THIS post from Blogging with Success and THIS post from uBlogHere to be extremely helpful in writing the grab code for my blogs button.
Copy and paste the following code below the title field in your TEXT widget substituting your blog’s information where appropriate (caps are used here for the sake of emphasis).
Note: My blog’s WordPress theme is substituting straight quotes for curly ones in this example. YOUR HTML CODE NEEDS TO HAVE STRAIGHT QUOTES. When I copy and paste this into my text widget the quotes come out correctly.
<a href=”http://YOURSITENAME.com” title=”YOUR SITE NAME”> ,<p style=”text-align:center;”><img src=”YOUR DIRECT LINK FOR LAYOUTS CODE FROM TINY PIC” width=”150″ height=”150″ alt=”My Button” style=”border:none;” /></a> </p>
<div style=”border:1px solid rgb(221,221,221);background:#ffffff none repeat scroll 0 0;width:150px;overflow:auto;height:120px;line-height:1.5em;margin:auto;padding:5px 10px;”><a href=”http://YOURSITENAME.com/” title=”YOUR SITE NAME”> <img src=”YOUR DIRECT LINK FOR LAYOUTS CODE FROM TINY PIC” width=”150″ height=”150″ alt=”My Button” style=”border:none;” /></a> </div>
5. Save, close and enjoy!