Category Archives: Web Design

meta

How To Create Meta Tags For My Website

What Are Meta Tags?

Meta tags are elements of a web page that help search engines to categorize your web site correctly.  When you visit a web page, you don’t see the meta tags, however they are there. To see a page’s meta tags, just right click on it and select “view page source”.

 TIP: Visit your competitors’ websites and check out what keywords and descriptions they are using.  Let’s say you are a barbershop in Anytown, USA and your keywords include “Anytown”.  Your competitor in the next town over which may be “Nexttown, USA” might be using the same keyword “Anytown” to acquire anyone who is looking for a barber in your town.

The most common tags are listed below in “Basic Layout For Your Meta Tags”.

 Different Types of Meta Tags

metatag1Here is a great article that goes into depth about Meta Tags and when to use them.  Some experts are stating that some meta tags aren’t as important as they were in the past.  Search engines like Google,

Bing, etc. are constantly changing what is important to page ranking.

Searchenginewatch.com Article

 

Basic Layout For Your Meta Tags

You can copy the code below and keep it in a Word Pad file for future reference.

<meta http-equiv=”Content-Type” content=“text/html; charset=utf-8” >
<title></title>
<meta name=”viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>
<meta name=”keywords” content=“” >
<meta name=”description” content=“”>
<!–FACEBOOK–>
<meta property=”og:title” content=“” >
<meta property=”og:site_name” content=“”>
<meta property=”og:url” content=“” >
<meta property=”og:description” content=“” >
<meta property=”og:image” content=“” >
<meta property=”og:type” content=“website” >
<meta property=”og:locale” content=“” >
<!–TWITTER–>
<meta property=”twitter:card” content=“summary” >
<meta property=”twitter:title” content=“” >
<meta property=”twitter:description” content=“” >
<meta property=”twitter:creator” content=“@” >
<meta property=”twitter:url” content=“” >
<meta property=”twitter:image” content=“” >
<!–GOOGLE+–>
<link rel=”author” href=””>

metatag2

Delete and of the tags that you aren’t using.  Note that you can use the same information in multiple spots, example the URL for Facebook and for Twitter are the same.
If all this info is a bit complicated or you have someone manage your site, make sure you have meta tags in your site and set up best.
Interested in having your site checked out, email me.

blogging

The Do’s and Do Not’s of Blogging

Below are a list of Do’s and Dont’s in the blogging world.  It’s only guide of things to do and not do while you are expanding your blog.

43 Do’s of Blogging

  1. Do create a blog that is meaningful to you
  2. Do set yourself some goals and objectives for your blog
  3. Do ‘write’ something every day (note that I didn’t say ‘publish’)
  4. Do as much as you can to get in your readers shoes and understand who they are
  5. Do use surveys and polls to help you understand your reader
  6. Do create content that meets your readers’ needs, answers their questions, and solves their problems
  7. Do write in an engaging voice
  8. Do start an email newsletter
  9. Do pay attention to the design of your blog – first impressions count!
  10. Do communicate clearly what your blog is about into your design
  11. Do spend time ‘off’ your blog engaging in the places where your potential readers gather
  12. Do go to the effort of registering your own domain
  13. Do create visual content
  14. Do model the kind of community that you want your blog to have
  15. Do install analytics and track the results of what you do
  16. Do find some blogging buddies who you can bounce ideas off and have mutual support with
  17. Do make sure you have ‘real life’ friends too – they’ll ground you
  18. Do become hyper-aware of problems (yours and other people’s), and obsessed with solving them
  19. Do create something to sell from your blog
  20. Do think beyond what you’ll write today – develop an editorial calendar
  21. Do set aside time to learn the skills you lack
  22. Do set aside time to brainstorm topics to write about
  23. Do read other people’s blogs – you’ll learn a lot from them
  24. Do share your opinion – it is what often differentiates you
  25. Do share stories – your own and other people’s
  26. Do back up your blog!
  27. Do blog with passion
  28. Do look for ‘win/win/win’ relationships with brands where you, the brand and your reader benefit
  29. Do show your personality – be yourself
  30. Do pay attention to what is energising you and do more of it
  31. Do pay attention to what is energising your readers and do more of it
  32. Do spend time refining and perfecting post headlines
  33. Do think about what ‘action’ you’re calling readers to take in your content
  34. Do make peace with the fact that there will always be more that you can do
  35. Do learn how to prioritise and focus upon activities that take you closer to your goals
  36. Do pay attention to your archives – update and promote them regularly
  37. Do push through bloggers block
  38. Do spend time analysing what types of content are being ‘shared’ in your niche – publish this kind of content semi-regularly
  39. Do use social proof
  40. Do take breaks from blogging – weekends and vacations are important!
  41. Do ask your readers a lot of questions and listen to what they say
  42. Do treat your blog as a business today… if you want it to be one tomorrow
  43. Do create content that Informs, Inspires and Interacts

Continue reading

headers

What are Custom Headers in WordPress?

Custom headers is a WordPress theme feature which allows theme developers to enable support for customization of the header image. When custom headers support is enabled in a theme, the users can replace the default image used in the theme’s header with their own images. Most themes have limitations as to what the size of the header image can be. Some themes are made so that there is only enough space to put a logo, others allow you to use the entire width of the theme.

Some themes will allow for the use of flexible headers that can expand or contract in size depending on the width of the browser window at the time. Some themes will also allow for the use of pre-uploaded header images that are already present in the theme, such as the ones available in the default WordPress theme.

The option to change the headers is usually present under Appearance, which is located in the left menu bar in the WordPress Admin Panel.

The Header link will allow you to change the header as needed or upload your own custom header. The images can also be cropped as needed to fit the header. Some themes also allow for you to replace the headers with your text instead of an image, or use an image as background and overlay text on top, but these are features depend on the specific theme.

 

 

adsense

Organizing Google Adsense in Word Press

Here is the simplest method that I have found:

Step 1

Add the plugin: Simple Google Adsense Insertion – One of the easiest methods to get your Google Adsense into your posts, pages and sidebars. There are many Adsense plugins, but I found this one to be the easiest. (installing plugins article)

Once it is installed, go to “Settings” -> “Adsense Insertion”
You should have the following screen
Adsense-Insertion

Step 2

In the “Adsense Ad Campaign 1 Code”, put in the code for a leaderboard from your Google Adsense account.

In the “Adsense Ad Campaign 2 Code”, put in the code for a 250×250 box.

Currently I am only using those two code boxes.

Now make one change to the 2nd campaign code (see below)

Adsense-Insertion-Step2After “height:250px” put in (without quotes) “;float:left;margin:4px”.  By adding that code, your ad will align left in the post and give it a little margin so the text of the post isn’t right on top of the ad.  Scroll to the bottom of the page and click “Update Options”.

Step 3

I noted down the 2 shortcodes for the ads.  Go to a post that you would like to add the Google Adsense and click on “Edit”

Edit-PostInsert the code for the leaderboard

Edit-Post-2Insert the code for the 250×250 somewhere in the body of the post

Edit-Post-3Because we had already set the code for the 250×250 to align left with a 4px margin, we don’t have to do anything else with this code.  With the leaderboard code, make sure you are on the visual edit section and highlight the code and center it.

Here’s what your post should now look like with the ads in place:

Edit-Final

If you have any questions, leave me a comment.  Thanks for reading.

admin

What is Admin Area in WordPress?

The Admin Area is the administrative area of a WordPress website. Usually it can be accessed by visiting the wp-admin directory in your web browser. Example: http://www.example.com/wp-admin/

The WordPress admin area is the administration center of a WordPress powered website. An administrator has full access to all the sections within the WordPress Admin Area. Users with other roles such as editor, contributor, or author have limited access to the admin area. Some users such as users with the subscriber role only have access to their profile page inside the admin area.

At the top of each administration screen is the toolbar or admin bar. It provides access to several administrative functions. On the left side is the main navigation that provides access to most of the WordPress management tools. Each major section typically comes with a sub-menu that can fly out and expand to show extra options.

The area in the middle of the screen is called the work area. This is where you can write, edit, and delete posts as well as adjust settings. At the bottom of each administration page is the footer. The footer contains links to WordPress and the version of WordPress that you currently have installed.

started

Launch A Self-Hosted Blog Using WordPress In 15 Minutes

There are a few free platforms out there for the novice blogger to use, but for the serious writer/blogger, utilizing a self-hosted blog is the way to go. It is affordable and easy to do. Some think that setting up a self-hosted WordPress blog is difficult. Nothing could be further from the truth. After this short article, you will be on your way to publishing your first blog.

 

NO TECHNICAL EXPERIENCE NECESSARY

Just follow these simple steps:

Pre-steps:

Gather some necessary information:

  • a domain name (ie: www.myblogsite.com) info on creating a domain name
  • an idea for your blog
  • payment method

OK, now that we have that ready, it’s time to get started…Wordpress Logo Continue reading

css2

First-Child CSS Tip To Fix Margins

I have done many websites in the past and had to set specific attributes for multiple items that were really the same item but because of its positioning, I couldn’t use all the same values.  What do I mean with this?

Let’s say you have a column with 4 blocks in it.  We are gonna say it is the side bar and you have the following items in it:  Specials, Product of the Week, Upcoming Events and Sponsored Ads.  I am referencing a site I did for VIP Billiards.

first-child1

Now in that side bar, you want spacing between each section.  So in this case, I used my <h3> tag to create the spacing and I set the value to 1.5em.  But when I do that, I feel like my spacing at the top of the column is too large.  How do we fix that in a quick manner without having to have a new class for the <h3> tag?

first-child2

Simple, we add a “first-child” to the <h3> tag.  We re-adjust the {margin-top} to 1.0em; and then add the following code:

h3:first-child {

margin-top: .5em

}

first-child4

By doing this, we give the first <h4> tag in that column only a .5em margin at the top and give the spacing for the rest a 1.0em margin.

Now we have nice spacing between the navigation bar and the column as well between each section.  And because we added a “first-child” for the <h3>, it works for any section that has an <h3> tag.

first-child3

Using a first-child can fix other issues as well.  Maybe you want to set the spacing between a few images but you don’t want a margin to the left on the first image.  Use a first-child for your images.

Now if we can use a first-child, then that should mean we can use a “last-child” as well.  Test it out, let me know how it works for you.

Happy coding!!

-Jim

PS:  10/25/2014 – Since writing this and making minor adjustments, I re-adjusted my <h3> by adding a padding-top: 6px; and a padding-bottom: 6px; and with the h3:first-child {padding-top:0px;}.  This helped with page layout a little better than how it is written above. CSS is so versatile that there are many ways to “skin a cat”.