Networking Buttons / Social Media Icons: Blogging Tip # 4

I had been wanting to have some of those cute little networking buttons on my blog, but always thought it probably needed some HTML coding.  Or I thought may be if I bought a domain I could add them.

Since I had no intentions of buying a .com domain for Spusht anytime soon or ever in the future (because Alok said he cannot buy the entire Spusht Technologies businesses located in UAE & India just for my hobby :P), I dropped the idea of adding the social networking icons.

In a few months I realized how simple adding the social media icons to blog was.  How adding icons did not need any kind of advanced coding knowledge.  And how all these months I missed out on having readers easily connect with me.  One year, precisely.

It is so much better to have the small icons at the top of page instead of a long list or big boxes for social media on the side bars.  All that clutter and mess on the blog, no good.

So here it goes - how to add social media icons to your blog/website - making it as simple as I can for those of you who want to add these to your site.

(right click images and open in new window to view full size)

Step 1:  Search for social media icons or social networking buttons on Google Images and choose what you like.

Step 2:  If the images are separate, great.  Otherwise using MS Paint, MS Office Picture Manager, Adobe Photoshop, or any other software you're comfortable with - crop each image, save as separate files in .png format.  Yes, NOT the usual .jpg format.  Name each image as what it is [eg. facebook icon named as facebook or fb] because it will help you later in Step 5.  Reduce the size to as little icon as you want.  I feel 1 cm x 1 cm is perfect.

Step 3:  Create a new post on your Blogger.  Upload all the images at once onto your post.  Now click on "HTML" and look for the addresses for each .png image.  Let's call it IMAGE URL.  Copy each of them, go back to "Compose", and paste the IMAGE URLs below the images on your post.  If you're on any other publishing platform, upload your images on a new post or somewhere online to extract the link leading to the image.

Step 4:  Now go to your pages (for Twitter / Facebook / Pinterest / RSS / E-mail Subscription / Instagram / LinkedIn, etc etc etc) and copy the links that lead to your page [let's call them TARGET LINK] and paste below the images in your post.  Like so.

Step 5:  This is basically the equation for each of your media icon that you add on your blog/website:

<a href ="TARGET LINK" target="_blank"><img src="IMAGE URL"></a>

- Since you already saved each image as its media name [Step 2],
- and since you already sorted out each TARGET LINK and its IMAGE URL [Step 3 & 4],
- now all you have to do is copy paste each TARGET LINK & IMAGE URL into the equation, separately.  Like so.

Step 6:  In your Blogger Layout, click 'Add a Gadget' where you want to place your icons and choose HTML/JavaScript (to add third-party functionality or other code to your blog).  Copy-paste your code in the order of icons you want appearing.  Click Save.  Click Save arrangement.  Check out the cute little icons on your blog now.

And then come back to check my social media buttons.  And then click on each icon.

Like my Facebook page.  Stalk me on Twitter.  Subscribe to my RSS feeds.  Follow my Pinterest boards.  Sign up for e-mail updates.

And share all of them with all your friends and tell them to do all of the above.

Just kidding.

More Blogging Tips:                                                                                                

Blogging Tip # 7: Solutions for Search Queries
Blogging Tip # 6: Create photo index for blog posts
Blogging Tip # 5: Tips for bloggers to save time

Blogging Tip # 3: How to set your RSS feed

Blogging Tip # 2: Creating Facebook page and NetworkedBlogs

Blogging Tip # 1: Adding contact form to your blog

                                                                                                                                         

If this post helped you and if you will apply this blogging tip in future on your blog - leave me a comment to tell me about it (it will make me feel proud to know this post was worth my time).  If you find this tip and this blog useful - share the link with people in your network to let them know too (it will make me happy!).

. . . . . . . . . . . . . . . . . . . . . . . .
Connect with Spusht via: Facebook  |  Email  |  RSS  |  Twitter