Adding Link Icon's in Blogger

Most of you have probably seen link icons such as this one . They are designed to make a link more prominent. I have created a small arrow icon that you can use to emphasize a specific link and it is a little more subtle than the page icon.

To create this type of link, you apply a unique CSS class to the link's anchor tag. This code defines the arrow image as the links background. It is then positioned so that it displays to the right of the link text and the color is set to match that of the arrow.

Below is the CSS used for creating and positioning these background images. You will need to add this into the style sheet section of your template. If your not familiar with this part of the template, it is towards the top and comprises a large portion of the code. It begins with this opening tag: <style type="text/css"> and ends with </style> You can add the following CSS anywhere in this section as long as it's after a closing bracket }.

a.special:link{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px ;
padding: 0 12px 0 0;
}

a.special:visited{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px;
padding: 0 12px 0 0;
}

a.special:hover{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px ;
padding: 0 12px 0 0;
}

Notice we have added three different CSS elements. The first defines how the link looks when it has not been clicked and the cursor's pointer is not hovering over the link. The second element defines how the link looks after it has been clicked upon or visited. The last element defines our links look when the cursor's pointer is hovering above it.

Now you will need to enter into the above code the address of the image you want to display during each elements action. For example, if you want the link text and arrow to be red when it has not been clicked, you will enter the #FF000 color code in the place where it says color in our first element above. Then you will add the address of the red arrow icon from the list below. This will be entered between the brackets where it says "image address". You will have to do this for each of the three different elements.

Black Arrow
use text color code #000000
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_blk.png

Dark Gray Arrow
use text color code #999999
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_dkgray.png

Green Arrow
use text color code #00FF33
Use this Image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_grn.png

Red Arrow
use text color code #FF0000
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_red.png

Dark Red
use text color code #993300
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_dkred.png

Blue Arrow
use text color code #0066CC
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_blue.png

Light Blue Arrow
use text color code #66CCFF
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_ltblue.png

Once you have completed this you can create a special link icon anywhere in your template or post using this HTML format:

<a class="special" href="http://www2.blogger.com/address%20of%20the%20link">Text for your link</a>

The above is a easy method to add link icon's as I have created the images for you. If your savvy and can create your own images that are properly sized, there is a more efficient method that will load slightly quicker. The arrows I use in Blogatech are all contained in one image. I use X and Y positioning to display the correct arrow for the active element. Here is the image I use for this:



Below is the CSS that I use to position these arrows:

a.special:link{
color: #009999;
text-decoration: underline
background: url(http://i76.photobucket.com/albums/j38/stratman4u/link_icon2.gif) no-repeat 100% 0px ;
padding: 0 8px 0 0;
}

a.special:hover{
color: #F87217;
text-decoration: underline
background: url(http://i76.photobucket.com/albums/j38/stratman4u/link_icon2.gif) no-repeat 100% -100px ;
padding: 0 8px 0 0;
}

a.special:visited{
color: #808080;
text-decoration: underline
background: url(http://i76.photobucket.com/albums/j38/stratman4u/link_icon2.gif) no-repeat 100% -200px ;
padding: 0 8px 0 0;
}

If you choose to create your own icon's be sure to leave a considerable amount of white space between each one. In the image above I space the arrows 100px apart.

Technorati Tags: link icons, css, blogatech

Double Your Search Power

In the past, once I had exhausted a search with Google, I'd load Yahoo to look for additional results. Now due to the ingenuity of Twingine I can get search results from both search engines simultaneously.

I have even set it as my home page in Firefox and when I find what I'm looking for, I right click that frame and select "This Frame" and then "Show Only This Frame". I'm now back to my normal browser view.

Give it a try

Technorati Tags: twingine, google, yahoo

I don't like New Blogger

Blogger has forced you to upgrade to what is now referred to as "New Blogger". You have found that adding back many of the features that were in place in your old blog is not as easy as it was before and your sick of seeing this?

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly."

Your in luck. You can revert to a classic template and presto even tho you have migrated to New Blogger, everything is back to normal. If this sounds like the path you would like to take, it's a easy one. Select the Template/edit HTML menu and at the bottom of the page you will see a text message that says "Revert to Classic Template".



Clicking this link will recall a saved copy of your old template and you will be able to make changes to your blog just as you did before the switch to New Blogger.

You will no longer have access to new features like labels, drop and drag layouts but if you were comfortable navigating your old template you will feel like your back home.


Technorati Tags: new blogger, revert, template

What is Pinging?

Pinging as it relates to blogging is like raising your hand and saying "hey, I'm over here, please come and checkout the updates I've made to my blog".

The actual ping is a program that sends a XML formated text message verifing that your URL exists and that it is capable of accepting requests. After receiving this message the target site sends out a "spider" that "crawls" your blog. The spider is another program that reads and searches your site for new content.

You can manually send a ping to a site each time your blog changes but using a Ping Service such as Ping Goat or Ping-O-Matic allows you to ping multiple directories at once by simply entering your site's name and URL and clicking go. It's that easy.

Pinging really does help increase your traffic and should be done any time you add a new post to your blog.

HTML Tips

There are a couple of self closing HTML tags that I use all the time. One is the line break <br/> which drops the text or image down one line. Although it's not recommended, you can place several line break tags together in order to create white space between items such as photo's.

Another tag I like to use the horizontal rule tag <hr/> This tag creates a line across the page in the element you place it in, such as:

Right Here

---

You can also control the line width and color of the HR tag using CSS atributes in your style sheet.

hr {
border-style: solid;
border-color: red;
border-width: 2px}

By placing the above CSS in the style section of your template any horizontal rule you created would be red and two pixels wide.

---

Technorati Tags: html tricks, horizontal rules, line breaks, blogatech

How to Create Tabbed Menus

For those of you that have asked about the tab menus you see at the top of the page. I created them from found code snipets and images I created. I hope to post a tutorial on how its done in the near future but in the mean time you can find a good "how To" here.