Add Touch Me Social Sharing Widget for Blogger:Digital Tech Inspiration

I have presented you many gadgets before for Blogger. Today, I present you a special and very attractive social sharing “Touch Me” gadget. Due to it’s great appealing look

and mouse hover touch me effect attract visitors and your loyal readers to roll hover the cursor and hit them.

You can see this working by clicking the below button.

LIVE DEMO

How to Add Touch Me Social Sharing Widget to Blogger?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<style>
/*--------WT Touch Me Social Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcbfHcL7PJdiqB__b55E_9ZD-zBxVtREc37ZQIKZDSXs0ix6ZeLKr7BvGuCVhJRRBzgRlt_lqqfIYCL6o4AxUCOnjMG2R7IEKt75gchlpGIMzNxH4Z5x6wCiR2YxI01-5MuSsEn2xNurFF/s454/Sharing%2520Touch%2520Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>

<div class='touchme'>


<a class='rss' href="http://feeds.feedburner.com/WIKITECHNOL"
rel='external nofollow' target='_blank'></a>

<a class='googleplus' href="https://plus.google.com/107244857879006042054"
rel='external nofollow' target='_blank'></a>

<a class='facebook' href="https://www.facebook.com/WIKITECHNOL"
rel='external nofollow' target='_blank'></a>

<a class='twitter' href="https://www.twitter.com/WIKITECHNOL"
rel='external nofollow' target='_blank' ></a>

</div>

Customization:

§ Replace WIKITECHNOL with your feed username.

§ Replace 107244857879006042054 with your Google+ ID.

§ Replace WIKITECHNOL with your Facebook username.

§ Replace WIKITECHNOL with your Twitter username.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.