Sharing widgets help bloggers to expand there exposure in the web since it makes our articles viral in the internet. I would share you another example of sharing widget where it is very customizable in your part. This is from one of my circle of friends from G+ and I woul shre it to you coz I believe that you will really like it. This sharing widget uses CSS to make it more attractive than others.This include zooming hover effects. You can check right here in my blog sidebar for the demo.
Social Network Buttons With CSS3 (Metro) Style
Step 1. Go to Blogger Dashboard >> Template >> Back-up your template for your reference.
Step 2. Click Edit HTML
Step 3. Click anywhere in the code section and search the code below
Step 6. Go back to Blogger Dashboard >> Click Lay-out (or anywhere in blog pages).
Step 7. Scroll down and select HTML/Javascript.
Step 8. Inside the empty box, place the HTML code below
Note: Simply replace the corresponding four URLs with yours.
Also Read:
How To Get Your Feedburner Email Feedlink
Adding Email Subscription Widget To Blogger/Blogspot
Adding Twitter Follow Buttons In Blogger Sidebar
Step 9. Save your template and Bravo!
Peace on EARTH Bro!
Social Network Buttons With CSS3 (Metro) Style
Step 1. Go to Blogger Dashboard >> Template >> Back-up your template for your reference.
Step 2. Click Edit HTML
Step 3. Click anywhere in the code section and search the code below
]]></b:skin>Step 4. Above the code in step 4, paste the css code below
/* Bloggingtipsandtrix.blogspot.com */Step 5. Save your Template and you're halfway done!
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 48px; /* width of each image.*/
height: 38px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.1); /*scale up image 1.1x*/
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}
Step 6. Go back to Blogger Dashboard >> Click Lay-out (or anywhere in blog pages).
Step 7. Scroll down and select HTML/Javascript.
Step 8. Inside the empty box, place the HTML code below
<ul class="bubblewrap">
<li><a href="googleplus URL here"><img src="http://4.bp.blogspot.com/-8iulyWrFHT4/Ut6UFpAeKGI/AAAAAAAACC4/WaGeDKsNnac/s1600/bloggingtipsandtrix.blogspot.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="facebook fun page URL or Username here"><img src="http://1.bp.blogspot.com/-C0K3F8wrv7c/Ut6TkyV-yuI/AAAAAAAACCw/k-yLSUzUNIc/s1600/bloggingtipsandtrix.blogspot.com-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="Digg Username URL Here"><img src="http://2.bp.blogspot.com/-cl3HYfosZ1s/Ut6Te6bHSeI/AAAAAAAACCo/NJ83Ob3paEA/s1600/bloggingtipsandtrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="Your Twitter URL Here"><img src=" http://2.bp.blogspot.com/-GjtWtoeMmnM/Ut6TY9gqR-I/AAAAAAAACCg/AOd02ILh2uo/s1600/bloggingtipsandtrix.blogspot.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="Your Feedburner URL Here"><img src=" http://4.bp.blogspot.com/-Xnu7zD1g8JE/Ut6Ss_rlBCI/AAAAAAAACB4/Ha5a8q6YfRc/s1600/bloggingtipsandtrix.blogspot.com-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>
Note: Simply replace the corresponding four URLs with yours.
Also Read:
Step 9. Save your template and Bravo!
Peace on EARTH Bro!
