As you see star shaped social media buttons in the picture and when you hover a mouse from these buttons it will pop-up doubling in size and its looking very nice in blogger it is very good widget for about layout its looking like windows button you can also able to change the picture of widget and if you want to Add Star shaped social media buttons widget in blogger so just you want to follow below steps :
1, Go to Blogger.com >> Sign-in to your account >> go to template >> Edit html >> proceed.
How To Add Star shaped social media buttons widget?
1, Go to Blogger.com >> Sign-in to your account >> go to template >> Edit html >> proceed.
2, Now find ]]></bskin> Great tip for finding the code press (ctrl+f)
3, Copy the below code and paste it just above the code.
5, go to layout >> add a gadget >> html/JavaScript
6, paste the below code into html/Javascript
/* Rockingaseel */
.bubblewrap{
list-style-type:none;
margin:0;
padding:1;
}
.BUBLEWRAP LI{
display :inline;
width:59px;
height:59px;
}
.bubblewrap li img{
width: 49px; /* every image width*/
height: 49px; /* every image width*/
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.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
4, Save your template.5, go to layout >> add a gadget >> html/JavaScript
6, paste the below code into html/Javascript
<br />
<ul>
<li><a href="http://www.plus.google.com/YOUR_GOOGLE_PLUS_ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQhjSz3EqMlsPsB0b63HUl4iTS6HPkIVYAQvfrBXKbFwG_mE9VCYOZjt5yqiPfiUy3ESJiSLk1oG3HLhol6l5q05ggPYx4WtHv7FVe_sru-eaTFzF7bNWDZOIiiKIofFWqmM184KVNjc/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/YOUR_FACEBOOK_PAGE_OR_USERNAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0leZKqilXc0kf812vbi9a-RGVaBTvLluxkYPm8Ug6mdEbP25eyUZLEaN3bn55UjeFcbHI9ZFkPgOIL5Q2-aLgU0rNYT8x0b39wE8bPqALUGOEDmRICeEm_aw4_KLC7tU6ABcIjNW_gSc/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/YOUR_STUMBLE_USERNAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhTDBljoTicow04FG8gKlBU9uLUYfHiW1YI1II3c54FIDGWsmYaGeFVglZpJL-iXPQ8tYjPlTra1gV_rOO6IyFRHwiEoTcwkg-E_CeESNHlLdwc0GTTcu2R40Miu2728CYlAB6o-OVX4/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/YOUR_TWITTER_ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQoM0FlULlQgZPl4z9y_S_NOHnhZIJhLTjUm_j-5XbHiwKMz23LT8Km9B0PItaQxSJIoQK68zTl-5vxnavIEXnJte_UGTT-BS-TVNfkdw6s0teSgM-R1czNGKXDFGWUDv1YFohUTf_vKU/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/YOUR_FEED_ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafuNcbb57Rvf8G9KkxxAxoZNwvdMuFCVEzsIaYNNjg3wnCLIRIlkEicKaSgl-1FysS1QKLDsbmbwMUl8eqXbUTV3n9oRLVB5PUaoByMwddRtVNwM8jN9I9-zZy2Zf0hBKqN8qyWBLXQY/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
7, Replace all the link with your own.
0 comments