Save jPod Site Badge
Want a save jPod badge as seen in the upper right corner of my site?
If you answered yes to the previously stated question, you’d probably appreciate how to do the same thing to your blog, website, etc. (I’m just guessing).
It’s very simple, and only takes a bit of CSS, a line of HTML, and an image.
How to Make Your Own “Save jPod” Site Badge
First, grab the small banner image by clicking here and upload it to your site.
Secondly, copy and paste the following code into your CSS stylesheet (usually styles.css or stylesheet.css) and make sure to edit the background property to point to where you uploaded the file:
a#saveJpod {
position: absolute;
right: 0;
top: 0;
border: 0;
display: block;
height: 58px;
width: 150px;
background: url(/directory/to/your/image/save_jpod_small.png) top right no-repeat;
text-indent: -999em;
text-decoration: none;
}
Finally, paste the following code just under your <body> tag of the page you’d like to apply the badge to:
<a id="saveJpod" href="http://savejpod.ca/">Save jPod!</a>
There you have it! Your own 42androids-esque Save jPod banner.
Extra Options
To make the banner stay in the corner even when scrolling down a page, simply change position: absolute; in the CSS to position: fixed;.
To change the position of the image (for example, move it to the left corner), change right: 0; to left: 0; or you can change top: 0; to bottom: 0;, etc.
In Conclusion
Be sure to check out my article on the cancellation of jPod.
This technique was modified from code originally by Too Cool for Internet Explorer
Comments
Leave a Comment
Commenting is closed for this article.
Cancer Cowboy
May 23, 11:03 AM
Looking sharp!
I’ve added your badge to saveJpod.ca to show it off and posted a link to your article.
Thanks for the awesome work.