In this article, we will learn a simple technique to display an image by the side of a URL. This method uses a simple CSS class to dress up the URL.
First, we need to select an image to be displayed. In this example, I'm using a 14x14 pixel image hosted on this blog's companion site. (Note: The selected image must be hosted online)
Then, we add a simple CSS rule, such as the one below, to the blog's skin.
a.image {
padding-right:16px;
background:url(http://thebloggerguide.googlepages.com/icon_ext_window.png) no-repeat 100% 50%;
}
padding-right:16px;
background:url(http://thebloggerguide.googlepages.com/icon_ext_window.png) no-repeat 100% 50%;
}
In the above code, the a.image selector is called, in CSS jargon, a class selector. What that means is that any anchor element (i.e. <a>) that has the class property set to image will be modified according to the rules defined in that selector. In this instance, the first rule tells the browser to insert some space (i.e. padding) to the right of the URL and the second rule inserts a background image to be displayed in that space.
The following screenshot illustrates how this CSS code can be added by going to Layout -> Edit HTML.
Once this code is added to the blog skin, it is available to be used from within blog posts.
The last step is to attach this CSS rule to the URL that needs to be modified. All you need to do is to add class="image" attribute to that URL.
<a href="some URL" class="image">The Link Text</a>
For example, the following HTML:
<a href="http://thebloggerguide.googlepages.com" class="image">The Blogger Guide Web Site</a>
will be displayed as follows.
The Blogger Guide Web Site
That's it. Try it yourself and let me know how it goes.
PS:
This is the first post after a long silence of about 3 months. Though new content was not added, I was responding to my readers' queries. Hope to get back to more frequent posting again. Many thanks to all the readers out there!
Related Posts
