Blogging has taught me HTML coding over and over again. Small things really but coding none the less. And to be honest, it's about time I have some cute social networking tabs on here for you to click on.
Well, after about an hour or two of research, I found the easiest way to do it. Because of that, I'm going to make it as easy on you as possible.
You ready? Here we go!
STEP 1: DOWNLOAD CUTE TABS
I got mine from Etsy.com but there are free tabs all over the internet you can download.
STEP 2: SAVE TABS AS JPG FILES
This was a little tough for me. The ones I downloaded didn't automatically save as jpg files and I couldn't right click and save them as such either. So how did I do it? Probably the hard way but at least it worked!
Take a screen shot of the tabs one by one (on a PC it's FN + PRTSN (Print Screen)) Paste the screen shot into Paint.
Now crop the tab and save it as a jpg file
STEP 3: ABOUT ME PAGE
Add the tabs as photos in your About Me page. Once you do that, publish the page. Now, leave them alone. You'll come back to them. I promise! ;)
STEP 4: ADD THE CODING
While your cute tabs are sitting in your About me, go into your homepage of Blogger. Click on "Layout" then click on "Add a Gadget"
Click on "HTML/JAVA SCRIPT"
Once that window opens, copy in your coding. It will look a lot like this. If you are adding multiple tabs, be sure each tab has this coding.
STEP 5: MAKE YOUR CODING COME TO LIFE
This is where we go back to your About Me page. Click on "View Blog" and go to your About Me page. Right click on the image, then click on "Copy Image URL."
Now you have the tab you want. All that is left to do is copy and paste the link you want it to open. For example, when you click on my Pinterest Tab I want it to take you to my Pinterest page. So I put the link to my Pinterest page where "YOUR LINK" is.
After you have done that, you are ready to push "save" and enjoy your new cute tabs!
EXTRA TIP:
To center your tabs, add in <center> in the HTML window as well.
Hope this helps! It certainly added a little extra something to my blog! :)
Happy Coding!
0 comments:
Post a Comment