Blogger tutorial,  social media icon,  vectors

Blogger Tutorial: How to Add Custom “subscribe to” Buttons for Blogger

/

This post is born out of jealousy! Ha ha! I hate being jealous and I have to find a way to stop being jealous.

You know those nifty little “subscribe to” buttons you see in other blogs? You click on them then it takes you to Twitter, Facebook, Rss etc. where you can follow the blog.  I found an easy way to do it without really having to become an HTML guru! I tried to search the web for like 3 days and most of the tutorials out there are geared toward WordPress. I found one for Blogger but it only showed how to add share buttons at the bottom of each post. Some are sooo freakin’ technical I can’t wrap my brain around it without getting a little cuckoo. So without going through so much pain – and I don’t want you feeling jealous either – here’s how to do it.
1. You need to find an icon or vector for whatever social media site you want. I found mine through Productivedreams, you can also go to  Tutorialfreakz and feast your eyes on 3000+  FREE buttons for virtually almost every social networking site. Luv them!
2. Once you’re done feasting, choose a design set that you want and download them,save to your hard drive and upload the icons you want to a web album of your choice. This should be on .PNG format ‘coz if it’s in .JPG you can see the background and it’s not so nice. I used Photobucket for my site. I tried to use Picasa but it did not work out. Don’t ask me why ‘coz I’m new to this, remember?
3. Now the tricky part! This will include a little HTML so hold your breath.
Step 1. Get the URL of the link you want, like your Twitter page. 
Step 2. Get the URL of the icon you saved on Photobucket. You want to copy the Direct link.
Step 3. Now you have both links you need to go to your Blogger Design section to get to the Page elements.
Step 4. Next, click on Add Gadget and choose HTML/JavaScript  to open an HTML box.

Step 5. Now the code part, you need to copy the code below on the HTML box

<h2 class=’title’>Subscribe to</h2>

<div class=’widget-content’>

<center><a href=”YOUR URL HERE“><img border=”0″ alt=”” 
src=”YOUR IMAGE DIRECT LINK HERE” /></a>


Step 6. Make sure you copy the code exactly as it is shown and replace the purple text with your own URL for your link and image.  Like this example below:

<a href=”http://twitter.com/witchycrazymom“><img border=”0”

alt=””
src=”http://i1007.photobucket.com/albums/af191/witchycrazymommy/twitter_64x64.png” /></a>



Note:
You can also change the word Subscribe to with your personal message.

If you want to add more links simply  copy  the code below and replace with your  link and image.

<a href=”YOUR URL HERE“><img border=”0″ alt=”” 
src=”YOUR IMAGE DIRECT LINK HERE” /></a>
Make sure you save your work before viewing your blog and enjoying your nifty little buttons!

I hope this tutorial was helpful. Once you have your links up, kindly leave a comment here with your blog URL so I can visit you and follow you around too!
Luv yah but I have  to go and be Mommy to my daughter now!
Toodles!
Trying-to-be-HTML Mommy

5 Comments