I am big on appearances so when I started this blog, on one hand I wanted to keep a subdued theme, on the other, I wanted it to be good to look at. Personalizing your blog- putting eye candy is important if you want people to keep visiting your blog (ofcourse, apart from coming up with some amazing content!)
I am not an expert in either blogging or SEO or HTML codes for that matter but thank God for internet and for giving me an astute mind to do effective research; I learnt a few tips here and there and here I am, all the wiser. Although, most of the success came from trial and error, I am not complaining. I will explain here now how to make a blog button (on wordpress.com) and put a grab box underneath it so fellow bloggers can copy/paste that code and put the button on their blogs. Genius idea really!
Step 1:
Choose your image and personalize it
Choose an image or create one from scratch, if you are a photoshop whiz. Free images can be found on dreamstime, yaymicro, freedigitalphotos and many more (google it!). Use an online designing editor (like pixlr, fotoflexer, photobucket or online image editor) to personalize an image for yourself and size it appropriately. By appropriate, I mean, check what size would be compatible with your theme i.e. If you put your button on the side bar, whats the highest width you can go for. Usually, buttons are square shaped (125×125 or 150×150) but you can also opt for rectangular buttons (like mine!). Keep the colors, designs and fonts in contrast and collaboration with your theme. Don’t write too much on the button; it would be very small when you finally put it up on your blog so precision with a sense of aethetic is key.
Step 2:
Save, upload and activate widget
Once your image is done, save it with an appropriate file name so your image is trackable back to your blog. Then upload it on your wordpress.com:
Dashboard — Media — Add new
After saving, wordpress would give you a file URL. Save it somewhere for the code.
Activate your text widget now:
Dashboard — Appearance — Widgets
Drag the text/HTML widget to your side bar (whereever you want to place your button). Now you are ready to…
Step 3:
Code-fy
This is the fun-nest and as most would describe it as the gruelling part. Creating the perfect code!
Creating the perfect code is kind of like.. well, I cannot for the life of me think of an analogy because it is like nothing else. One space or character in or out of place and what you will get on your blog would be just some strange HTML-look alike characters crawling (not literally, thank God) around.
code 1
[div align="center"][a href="Blog URL" target="_blank"][img title="Blog title" src="Image URL" alt="Blog title" /][/a][/div]
Blog URL should look like: http://yourblog.wordpress.com/
Image URL is the file url that you saved earlier in step 2. It should end with (.jpg)
Blog title is the title of your blog which would appear when you move your cursor on the button. Mine says ‘Huma Sattar’s Blog’
code 2
[pre style="background:#f0f0f0;border:solid 1px #cccccc;color:#777777;font-size:90%;height:45px;text-align:left;display:block;overflow:auto;white-space:pre-wrap;width:90%;margin:auto;padding:10px;"]<div align="center"><a href="Blog URL" title="Blog title"><img src="Image URL"style="border:none;" /></a></div>[/pre]
Copy/paste these codes on notepad and edit them (see ‘things to remember’ below) and then paste them in your widget.
Things to remember
1) Make sure you do not add any unnecessary space or character to the code. Copy it as it is. In code2, there are NO spaces.
2) Change all the [ to < and ] to >
The thing about wordpress (dotcom) is…
This code is for wordpress.com only. The thing I discovered about wordpress (dot com) is that when it comes to codes, it has a lot of shortcomings, for reasons which seem sensible enough but nevertheless, if you are trying to use a code with javascripts in it, or codes in iframe, textarea( you can find the whole list here), your code will be stripped off from your text/HTML widget or post. Pity!
So yes, if all goes well, your button with its grab box would look like this:
<div align="center"><a href="http://www.humasattars.wordpress.com" title="Huma Sattar's Blog"><img src="http://humasattars.files.wordpress.com/2011/08/funky-musing-huma-sattar-blog.jpg" style="border:none;" /></a></div>
If the above method does not work, you can contact me with your code, I’ll tweak it and send it back to you. An easier way to generate this code is also to see (mycoolrealm.com), linked below with a customized grab box. It is a cool realm indeed; he has really done a great job at this application while unknowingly helped me with my code above.
Related articles
- Grab my button, Code generator (Mycoolrealm.com)
- How to make a blog button and grab box, a tutorial (TheLitte Hen House.com)
