A blog about Download free games, Download free software and movies. Learn everything about blogging. Watch live T.V. Send free SMS and much more

Thursday 24 January 2013

Add Star shaped social media buttons widget

Star shaped social media buttons widget.jpg
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 :

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.
/* 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="http://3.bp.blogspot.com/-SKQ1igs2LNU/UOhE6HiT1rI/AAAAAAAAGPY/ePZqZ_lQ5lc/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/YOUR_FACEBOOK_PAGE_OR_USERNAME"><img src="http://1.bp.blogspot.com/-r0H2-cmL5dg/UOhE5_nSIQI/AAAAAAAAGPU/VHIaXRyd_XY/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.stumbleupon.com/YOUR_STUMBLE_USERNAME"><img src="http://1.bp.blogspot.com/-pam6BN03QbY/UOhE7L4ISnI/AAAAAAAAGPk/UEVxDhh8wfM/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/YOUR_TWITTER_ID"><img src="http://4.bp.blogspot.com/-_Ph0s8LMOPA/UOhE7pj8mmI/AAAAAAAAGPw/xraxPNw2ERY/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/YOUR_FEED_ID"><img src="http://3.bp.blogspot.com/-Su8IoWDfS1o/UOhE6YvgxnI/AAAAAAAAGPc/2eiJmeVQ8eY/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>    
7, Replace all the link with your own.

0 comments

.

Share This Content:

 
© 2011 Rocking Aseel Blog (Have Everything)
Designed by Rocking ASeel Cooperated with Usama Shahid
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top