Archive for the ‘Wordpress’ Category

How to Create an Animated Favicon


A favicon is an image or icon that you can see at the left side of the address bar of your browser. It is used by most webmasters for instant brand recognition and to give a website a professional look.

A favicon is usually a 16×16 pixels graphic uploaded in the root directory of your server. It is stored in favicon.ico format and recently, you have the option to use animated favicons. The following are the steps to create a favicon.

1. Create an image file using any image editing program that allows you to save the file in .ico format like the GIMP. If you don’t have it, just use any program like Adobe Photoshop, Corel Draw etc. You can save it in any format but make sure it’s square like 125 x 125, 50 x 50. (more…)

Eye Dropper, Firebug and Hex Color Generators


My previous post about using Adobe Photoshop’s Eye Dropper Tool raises one question for most of us: What if I don’t have Adobe Photoshop?

Well, don’t worry, we still have other ways to work around that. The reason why I wrote about Photoshop is because along with the Hex Color Code Generator, I almost always use Photoshop every time I do some tweaks in my Wordpress themes. Let me explain these two tools further.

I use the Hex Color Code Generator mainly when I look at my CSS and have no idea what a certain HTML color code is. For example, I would encounter values like #7E8AA2. The first thing that comes to my mind is, “What the heck is #7E8AA2?” “Is it blue, green or pink?” I then turn to the code generator to find out for myself and look what other colors would look great with it.(In case you’re wondering, it’s a light shade of blue.) (more…)

How to Pick the Perfect Colors for Your Blog


If you’re trying to design your blog to make it look more professional, one of the problems you will encounter after choosing your theme is to customize the colors to give it your personality. Not everyone of us has the knack for choosing the perfect color combination and if you’ve been to Blogspot, Friendster or Multiply, you will notice the ridiculous colors people use in their pages.

You know the problem why? Because even if they can imagine the colors they want, most of them don’t know the correct HTML color codes to use. For starters, HTML color code is the internet language for colors. We normally say BLUE when talking but in the internet world, BLUE is not an acceptable color. You should say #263248 blue or #000033 blue and heaven knows how many blues are there.

So how do you know the correct codes?

In keeping with my rule to write short blogs, I’ll give you one answer in this post and two in the next. Let’s start with the ONLY online Hex Color Code Generator I could find on the web. I have to say this is one of the most important tools you need in all your web design projects especially if you’re just starting out. The rotating color scheme below the page is great for choosing color families that would look great together. Use it and you’ll never have to make the mistake of putting together visually offensive colors. Go ahead and play with it. Come back here for the next two tools you might need.

How to Dress Up Your Wordpress Blog

260x260Are you tired of your Wordpress theme?

Even if you have a really, really great looking theme, chances are that in just a few months time, you will get tired of your blog’s appearance and would want to do a makeover. You are not alone. Most bloggers feel like that. The reason is probably because you see your blog everyday. Many readers wouldn’t mind as long as your theme is presentable enough. Remember that while some of your readers are happy to see you do an upgrade, other loyal readers would feel disoriented at first.

For blogs at Wordpress.com, you might want to check the free themes available in your dashboard. I know it’s not much and the designs are not really that attractive but since you are blogging for free, you would have to make do with what’s available there. My personal favorite when I was still in the free service was the Regulus theme. Go ahead and check it out, it looks really cool.

For those who have their own domain but are still blogging in Wordpress.com, you still have limited options, in fact, you can only use the themes available in your dashboard. I didn’t know this until after I paid for my domain so I was really surprised to find out that even if I already had a domain, I still can’t use the themes that I wanted. After being annoyed for a few days, I finally settled with Michael Heilemann’s Contempt theme. It’s a cool design that allows you to upload your custom header if you like. Armed with CorelDRAW that I didn’t know how to use, I uploaded my own header to my site and thought I did a nice job with it.

The real fun begins when you move to a self hosted blog. With literally thousands upon thousands of themes out there, you will be overwhelmed with the choices available for you. A simple Google search for free Wordpress themes would be enough to occupy you for hours. All themes have previews, be sure to check them before downloading anything. My favorite is NewWPThemes.com. They offer the best looking themes that I’ve seen so far and they’re all for free. In my next post I will tell you a few tweaks that you can do to customize their themes. In the mean time, go check their site and enjoy.

How to Submit You Site To Major Search Engines

(Note: This tutorial is written mainly for Wordpress users.)

Did you ever wonder how search engines determine who gets to be on top of the search lists when you search for something? The answer has something to do with how robots index websites all over cyberspace. If this is your first website, you may have noticed that your site doesn’t show up in the search lists. That is because robots (also called spiderbots or crawlers) don’t know of your website yet. When someone looks for “barako coffee” for example, crawlers could only show websites that were already indexed or listed in their memory. The question now is how to get crawlers to index your site so that when people search for information about your products, they will also find your site.

The answer is quite simple. You only need to submit your site to major search engines like Google, Yahoo and Bing. Let’s start with Google first.

1. Login to https://www.google.com/webmasters/tools with your Google account. If you don’t have a Google account yet, get one before proceeding to the next step.

2. Enter the URL of your website, then “Add Site.”

3. You will be asked to do one of two verification methods to ensure that you’re the real owner of the domain. For Wordpress.com users, choose Meta Tag. Copy the code that looks like this: <meta name="google-site-verification" content="ys7pqhXChkdnmejsn3E4NTHd79a4r9FvYjfneNYzmyqtc" />

4. Leave that page open and login to your Wordpress.com account. In your Dashboard, Click Tools under the Tools tab. In the lower part of the page you will see Webmaster Tools Verification where links to Google, Yahoo and Bing are provided.  Find Google Webmaster Tools and paste the code that you copied in step 4. There is a sample code below the blank space so you won’t get it wrong.

5. Click Save Changes.

6. Go back to the Google page you left in step 4 and click Verify.

You’re done! Your site is now verified by Google and soon crawlers will begin indexing your site. Be sure to read the webmaster tools guidelines to avoid getting banned by Google. You can also submit your site to Yahoo Site Explorer and Bing Webmaster Center using the same process.

For Wordpress.org Users

If you have access to your cPanel, this tutorial is for you.

1. Perform steps 1 and 2 above.

2. Instead of choosing Meta Tag, choose Upload HTML file. Download the HTML verification file as instructed. Leave this page open.

3. Login to your cPanel, go to File Manager and go to the root directory of the domain you want to verify.  The root directory is the main folder in your cPanel right after the domain name. If you only have one domain in your cPanel, the root directory is called “public_html.” Upload the HTML file to that folder.

4. Go back to the Google Webmaster Tools page you left open in step 2. Click Verify.

You’re done.