Skip to main content

Follow Me...

In this post I’m going to show you how to add CUSTOMIZED “Follow Me” social media icons on the blog for blogger, which changes when the mouse hovers over and out of the icon.





 Step 1: Search social media icons 
  • Search the social media icons which you want to use in your blog & are available for use for FREE.
  • It would be good if the images are .png format and the dimensions are 100 x 100. 
  • I used this amazing site GEEK FAIRY for the social media icons. You can download & use it for FREE!

Step 2: Upload the social media icons in Google Drive 
  • Login into your Google Drive and create folder and upload the downloaded media icon images in it.
To create a folder on Google Drive: 
  1. On the left, click on New > Folder.
  2. Enter a name for the folder.
  3. Click Create.
To upload the files in Google Drive:
  1. Select the image files in your computer which you want to keep in Google Drive.  
  2. Drag and Drop the image files into Google Drive. 

   
Step 3: Make folder/files view over internet 
  • Click on My Drive so that you’ll see the folder we just created in ‘Step 2’.
To share the folder & files over internet:
  1. Right click on your folder, click Share.
  2. At bottom right, click on Advanced.
  3. Under Who has Access, click on Change... link.
  4. Select On – Public on the web option, click on Save. (Note: Access: Anyone (no sign in required) Can view should be selected else anyone on internet can modify those folder/files.)
  5. Click on Done.
 

To check whether the files are viewable over internet:
  1. Right click on your image file, click Get link.
  2. Copy the link and paste it in a different browser.
  3. If the image opens then you are good to GO!! 


Step 4: Create embedded URL for the images in Google Drive 
  • Copy the Get link URL. It will be something like: https://drive.google.com/open?id=0ByiyKfnLP50sdjFoTXVMM2YtRE5
To make an embedded URL of image in Google Drive:
  1. From the above copied URL cut the part which is after ‘id=’ i.e.: 0ByiyKfnLP50sdjFoTXVMM2YtRE5  
  2. Replace it with the FILEID it the following URL: https://drive.google.com/uc?export=view&id=FILEID
  • Repeat this step for all the images in Google Drive which you want to use in your blog.  

Step 5: Create “Follow Me” gadget on blogger 
  • In Blogger go to Layout.
  • Click on Add a Gadget.
  • Select HTML/JavaScript gadget. 
  • Give the Title as “Follow Me”. 
  • Copy Paste below code in Content:
    <center>
    <a href="link to your social media profile" target="_blank">
    <img src="image1 URL" onmouseover="this.src='image2 URL'" onmouseout="this.src='image1 URL'" width="40" height="40/" />
    </a> 
    </center> 
  • You can repeat the code from ‘<a href…’ to ‘</a>’ for the number of social media links you are adding. I’ve repeated the code 3 times in my blog for facebook, instagram and twitter social media links. 
  • Click Save then on Save arrangement and check your blog.
*image1 URL: Is the image URL which we created in ‘Step4’ and of the image which will be loaded when blog loads and when you hover the mouse out of the icon.
*image2 URL: Is the image URL which also we created in ‘Step4’ and will come when you hover the mouse on the icon. 

Please feel free to comment if this post was useful or you if face any issues in any of the steps.
Creativity knows no bounds. Keep Blogging!


About Author

Abhishek Gorale

A software engineer by profession and a curious blogger by will. An ambivert who balances his creative and geeky sides.


Comments

Popular posts from this blog

Life is a box of emptiness..

In valley of singing birds and a river, lived a brother and his sister in a wooden cabin. His name was Daniel and hers Shirley. Daniel used to earn bread by cutting timber and Shirley was in school. He was creative whereas she was curious!

Yours truly, Author

Dear Blog,
This is the first time I’m writing a letter to you. Hope you receive it in time. It’s been a while since I thought of writing a letter to you, to tell you how important you are to me. We have been together since few years now but there was hardly a time we spoke to each other. I believe there’s no better way than a snail mail to fill up this gap. Frankly speaking I can’t recollect what motivated me to start a blog but I do remember how the enthusiasm kicked in and we started writing our own history together. We started the journey with youthful rhymes. Yeah! I remember why we decided it to be named as “rhymes” & not poems. It was because we didn’t consider ourselves to match the level of those celebrated poets. We considered ourselves rookie in this field but I must say I enjoyed and still do the way we wrote rhymes & were eager to publish it to the world. We were like a drop in the sea but what encouraged us was that now we are the part of the sea! Year passed and we…

Walk a mile in my shoes

I missed your first talk. I left for office when you first walk.
I couldn’t be with you, first day at school. I know your dad isn’t that cool.
I was on the way home, when you got injured. I was really scared when I heard.
I cancelled our plan for the sunset. I know I owe you my time as a debt.
I wish for a life to live those lost moments. More than you, I regret my absence.
I was out there to make your future bright. I want your days ahead to be filled with light.
Coz I’ve been in the darkness and blues. I'd never want you to walk a mile in my shoes. This post is a part of Write Overthe Weekend, an initiative for IndianBloggers by BlogAdda.