If you are familiar with the way things typically look on A2Z (and aren’t reading me on a reader), then you know that I recently gave my blog a much needed makeover! Two questions that keep coming my way are how did you do your rollovers on your navigation bar and where did you find your social networking buttons under your “find me” section?
First let me say, I am a complete novice when it comes to messing with html and really have no idea what I’m doing. I am, however, tenacious and good at using google search. Anything you could ever want to know about anything is just a search engine away!
Okay, so let’s break down this code for you….
I never type in whole strings of code. I’ll screw it up somehow along the way and it won’t work. I always copy and paste the code into html and then just change the necessary info. The easiest way to get the http: code for your pictures is to upload them into Photobucket and grab the “Direct Link” code. You can see the I’ve hightlighted the code in blue in the pic below.
You can also find the code for your pictures by uploading them into your post and looking for the http code for you picture.
1. Change the website you want the picture to go to if clicked on. Right after the a href you will see the link to my blog. Change this to your own link, post link, button link, etc.
2. Next you want to change the onmouseout http code to whatever pic you want showing on the screen before it’s scrolled over by the mouse. This code will be entered TWICE. Simply copy and paste in the http code for your picture after where it says onmouseout AND at the very end after the src.
3. The last thing you want to do is change the middle onmouseover http code to whatever pic you want showing when scrolled over.
If this tutorial made no sense, then here is a link to another tutorial that might make more sense!
How to Create Social Media Icons
I created the icons under the Find Me section using Scrapblog.com. However, there are many free icons ready for you to download and use! If you know how to create a link on a picture, then you will know how to link to your twitter, facebook, subscribe, flickr, etc., account. Click on this site, Blogger Tips & Tricks, and choose which icons you would like to use!
Let me know how it works out for you and happy Pimp Your Blog Day!