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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTqDR42YyGwhNxCFmVgMCnBVfau4l6cAwB7yB93x_VedRlN5t8f_APeQZlIs6YQLadvU_VFdnuDIaFSz12r4XnTt5TBbubLErwjjiZDBxKnYHVavga28gpSF6Hq_84q2EmUaspHbafDX4/s1600/bloggingtipsandtrix.blogspot.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="facebook fun page URL or Username here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qXsdO-SCYSJMOo-NfyQzKutyVJnsLNzW3zm9onl8sN7BZtmYu2qC5tmlAv4VpewsAP1lWFxztfpMZoqM4DdKu2Lu6_mT_KWfPe8xUZ9QfyhCcHVKgrLvUl4zK0j1GyQu3PCScTrJ4O4/s1600/bloggingtipsandtrix.blogspot.com-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="Digg Username URL Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTyOKTgY1gMx08-uic_JfEq6NCIykL8tEFtta6sSBM4UlGB29LMwJ7KqYMcP_dLLScfV-LXbIuB3GxcgaEccVP0V_I3LQ9U9_J8Qe79Ca2WOSHMDEPE9QVQBSpgdpetqgDb8YaWDdz9o/s1600/bloggingtipsandtrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="Your Twitter URL Here"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PNMh26AMeM9yhwDCo9UglFhdRzwyNEmi0h3-2YIGaS6XMJGvaxN4HGM5vnx_LQhtYSjIRWY7gSJN1B61KefwBZwdoFmeTsIVvRJ0C6RFSDf7GD1XJGW9fTDw7J_iQB72G7tJHK5j0QA/s1600/bloggingtipsandtrix.blogspot.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="Your Feedburner URL Here"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6bSr0o29q3_FpErhN4yQ4JFjFH7aiy7y9vAerX8QzERlf8XjiDtNHpqV2bBpSjUvI4do7QlzPkhiCsrwCdcwDGB0m6iYFxUtSba0HjygUXHiHnAWCecN1sVe1arYVkZRXKKUWuEps0A/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!
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV