In this post, im going to present about social icons with bubble effect for your blogger.you can link with your social profile with this buttons.you can check my earlier social media gadgets from below link
Social media
DEMO
1. Log in to blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6.Paste below code.
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
Social media
1. Log in to blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
/* Bloggertrix */ .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 65px; height:60px; } .bubblewrap li img{ width: 55px; /* width of each image.*/ height: 60px; /* height of each image.*/ border:0; margin-right: 12px; /*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.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6.Paste below code.
<center> <ul class="bubblewrap"> <li><a href="http://www.stumbleupon.com/stumbler/soharox/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77_-fjgFNuF-lVcvBTvABWxerh3HxB5QJTSnpwVKdqYPVahxb6E2Ab-ryh495eDGMnf5gE1bqExBIeSCLX4yZTntEk2tSNonlrkY4KmrBGE99Xd_8yNLLKNNnu0cMSWvZJHa00XCuTBY/s1600/bloggertrix.com-StumbleUpon.png" title="Add to Stumbleupon" /></a></li> <li><a href="https://www.facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_ClefGNdTeOslg_2KawGf1vmoH2QMOaDNUpQFPNVVyN61QuXHVUys-84KEQVNK0Kmhi-iVbvcxTjC7OBog82Tp81AZOAqg863-7BvJEmio277YyY4-_S23AXG3ar4P8T7QRMCuO1SzA/s1600/bloggertrix.com-Facebook.png" title="Add to Facebook" /></a></li> <li><a href="http://www.digg.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQXI20muMprrSd_sGLJp9H7nOQOzu5msIZ5V0k6HCKkO0uQ8YgBdlge7M4gGckav3U6x3fiDQMnyWnqwjN44FAOr9-gfg3Glz5VlcgJXRXlQv8OB0_oq05fmk5ehaqQ7XgRe_kw-Thsg/s1600/bloggertrix.com-Digg.png" title="Add to Digg" /></a></li> <li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3alWss3UVEj2s8PDZnRuP-ZIpsEgWbL8XOsBKVt7epst-RfLs0gYPBib09C2ol2JVWcMqf6o3PMGG2RwFgdYlJe55swkRAvJHaS7FfEJTuGNqEo5Od32SLdW7qrFd8wpsjxPLljxZFak/s1600/bloggertrix.com-Twitter.png" title="Add to Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHBqftixWTPpCh6DDqNUVupp3hgigvJVhXhVP7zLLGhjO-iFNMVm44xEvO7sYr0PHI19gC4sTcst3dnKg2LVek0PSidfV5vDPLZlnmfakGQRbC2pFMlAt3yyK6jUHCJVncygra7OFI7NA/s1600/bloggertrix.com-RSS.png" title="Add RSS Feed" /></a></li> </ul> </center>
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
Hello,
ReplyDeleteThis is a very beautiful blog and very nice blog post.. we want come back on this blog.... Thanks