Social sprite in circle style for Blogger

The social sharing is the best method to spread your article. If you are interested to being an professional site then you must have social connectivity. We are created an cool social circle sprite buttons for blogger users. This social media buttons are optimized for loading and its not giving you any types of blogging css problem. The social sprite images is fully optimized with Photoshop for faster loading. The social sprite coming with 31 buttons with circle style effect. Mostly the social sprite buttons for increasing your subscription list. Greatly the social buttons are loading much more faster than other your blogger loading speed. We have use only css3 then its better for blogger platforms.

Social Sprite in circle style for Blogger

Live Demo


I recommended all bloggers those are interested to using this social sprite then they are first choose the place to add and the below single post area is the best place to adding the social sprite buttons.

How to add in Blogger

First visit blogger dashboard > template editor

Then search below code using ctrl + F

]]></b:skin>

Now paste the below code just above it.

/* My Blogger Club Social Sprites: Icon Classes
================================================== */

.mbc li.digg { background-position: 0 0; }
.mbc li.digg:hover { background-position: 0 -40px; }
.mbc li.dribbble { background-position: 0 -80px; }
.mbc li.dribbble:hover { background-position: 0 -120px; }
.mbc li.facebook { background-position: 0 -160px; }
.mbc li.facebook:hover { background-position: 0 -200px; }
.mbc li.flickr { background-position: 0 -240px; }
.mbc li.flickr:hover { background-position: 0 -280px; }
.mbc li.forrst { background-position: 0 -320px; }
.mbc li.forrst:hover { background-position: 0 -360px; }
.mbc li.googleplus { background-position: 0 -400px; }
.mbc li.googleplus:hover { background-position: 0 -440px; }
.mbc li.html5 { background-position: 0 -480px; }
.mbc li.html5:hover { background-position: 0 -520px; }
.mbc li.icloud { background-position: 0 -560px; }
.mbc li.icloud:hover { background-position: 0 -600px; }
.mbc li.lastfm { background-position: 0 -640px; }
.mbc li.lastfm:hover { background-position: 0 -680px; }
.mbc li.linkedin { background-position: 0 -720px; }
.mbc li.linkedin:hover { background-position: 0 -760px; }
.mbc li.myspace { background-position: 0 -800px; }
.mbc li.myspace:hover { background-position: 0 -840px; }
.mbc li.paypal { background-position: 0 -880px; }
.mbc li.paypal:hover { background-position: 0 -920px; }
.mbc li.picasa { background-position: 0 -960px; }
.mbc li.picasa:hover { background-position: 0 -1000px; }
.mbc li.pinterest { background-position: 0 -1040px; }
.mbc li.pinterest:hover { background-position: 0 -1080px; }
.mbc li.reddit { background-position: 0 -1120px; }
.mbc li.reddit:hover { background-position: 0 -1160px; }
.mbc li.rss { background-position: 0 -1200px; }
.mbc li.rss:hover { background-position: 0 -1240px; }
.mbc li.skype { background-position: 0 -1280px; }
.mbc li.skype:hover { background-position: 0 -1320px; }
.mbc li.stumbleupon { background-position: 0 -1360px; }
.mbc li.stumbleupon:hover { background-position: 0 -1400px; }
.mbc li.tumblr { background-position: 0 -1440px; }
.mbc li.tumblr:hover { background-position: 0 -1480px; }
.mbc li.twitter { background-position: 0 -1520px; }
.mbc li.twitter:hover { background-position: 0 -1560px; }
.mbc li.vimeo { background-position: 0 -1600px; }
.mbc li.vimeo:hover { background-position: 0 -1640px; }
.mbc li.wordpress { background-position: 0 -1680px; }
.mbc li.wordpress:hover { background-position: 0 -1720px; }
.mbc li.yahoo { background-position: 0 -1760px; }
.mbc li.yahoo:hover { background-position: 0 -1800px; }
.mbc li.youtube { background-position: 0 -1840px; }
.mbc li.youtube:hover { background-position: 0 -1880px; }

.mbc li.github { background-position: 0 -1920px; }
.mbc li.github:hover { background-position: 0 -1960px; }
.mbc li.behance { background-position: 0 -2000px; }
.mbc li.behance:hover { background-position: 0 -2040px; }
.mbc li.yelp { background-position: 0 -2080px; }
.mbc li.yelp:hover { background-position: 0 -2120px; }
.mbc li.mail { background-position: 0 -2160px; }
.mbc li.mail:hover { background-position: 0 -2200px; }
.mbc li.instagram { background-position: 0 -2240px; }
.mbc li.instagram:hover { background-position: 0 -2280px; }
.mbc li.foursquare { background-position: 0 -2320px; }
.mbc li.foursquare:hover { background-position: 0 -2360px; }
.mbc li.zerply { background-position: 0 -2400px; }
.mbc li.zerply:hover { background-position: 0 -2440px; }

/* My Blogger Club Social Sprites: Shapes
================================================== */

.mbcsquare { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.mbccircle { overflow: visible !important; }
.mbccircle li { border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; background-color: #FFF;
-webkit-box-shadow:0 2px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0 2px rgba(0,0,0,0.3); 
    box-shadow:0 2px rgba(0,0,0,0.3); 
    
    margin-right: 5px !important;
	
	-webkit-transition: background-color 0.2s linear;
	-moz-transition: background-color 0.2s linear;
	-o-transition: background-color all 0.2s linear;
	-ms-transition: background-color all 0.2s linear;
	transition: background-color all 0.2s linear; }

.mbccircle li:active, .mbccircle li a:active { border-radius: 100% !important; -moz-border-radius: 100% !important; -webkit-border-radius: 100% !important; }
/* My Blogger Club Social Bar
================================================== */

.socialbar {
	width: 100%;
	min-height: 40px;
	background-color: #FFFFFF;
	padding: 0;
	font-size: 0;
	z-index: 999;
}

.socialbar:after {
	clear: left;
	content: " ";
}

.socialbar_mbc {
	width: 100%;
	min-height: 40px;
	padding: 0;
	font-size: 0;
	z-index: 999;
}

.socialbar_mbc:after {
	clear: left;
	content: " ";
}

.borderless .mbc li { border: none; }
.borderless .mbc li:first-child { border: none; }

.borderless li { border: none; }
.borderless li:first-child { border: none; }


/* My Blogger Club Social Sprites: General Listing
================================================== */

.mbc {
	width: auto;
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

.mbc li {
	display: inline-block;
	margin: 0;
	padding: 0;
	border-right: 1px solid rgba(0,0,0,0.2);
	background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfmzJPWxuQxBcSDgSzYGJzRbCgbfDqpUTtkeQPhAIEeZea-FbBWN1X0CiJJgAJ7XPyhPP9NGpbd6OusZoCk9h1OkD2_fwE_kGSebUVEtfzfWn80G_bEs84qkNwctLVxb4Jnr_H3yxWhUA/s320/socialsprites.png");
	background-repeat: no-repeat;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.mbc li:hover {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.mbc li:first-child {
	border-left: 1px solid rgba(0,0,0,0.2);
}

.mbc li a {
	display: block;
	text-indent: -9999;
	height: 40px;
	width: 40px;
}

.mbc li a:active {
	box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
}

Then place the below code where you want to place.

<div class="socialbar_mbc borderless">
	<ul class="mbc mbccircle">
		<li class="digg"><a href="#">digg</a></li>
		<li class="dribbble"><a href="#">dribbble</a></li>
		<li class="facebook"><a href="#">facebook</a></li>
		<li class="flickr"><a href="#">flickr</a></li>
		<li class="forrst"><a href="#">forrst</a></li>
		<li class="googleplus"><a href="#">googleplus</a></li>
		<li class="html5"><a href="#">html5</a></li>
		<li class="icloud"><a href="#">icloud</a></li>
		<li class="lastfm"><a href="#">lastfm</a></li>
		<li class="linkedin"><a href="#">linkedin</a></li>
		<li class="myspace"><a href="#">myspace</a></li>
		<li class="paypal"><a href="#">paypal</a></li>
		<li class="picasa"><a href="#">picasa</a></li>
		<li class="pinterest"><a href="#">pinterest</a></li>
		<li class="reddit"><a href="#">reddit</a></li>
		<li class="rss"><a href="#">rss</a></li>
		<li class="skype"><a href="#">skype</a></li>
		<li class="stumbleupon"><a href="#">stumbleupon</a></li>
		<li class="tumblr"><a href="#">tumblr</a></li>
		<li class="twitter"><a href="#">twitter</a></li>
		<li class="vimeo"><a href="#">vimeo</a></li>
		<li class="wordpress"><a href="#">wordpress</a></li>
		<li class="yahoo"><a href="#">yahoo</a></li>
		<li class="youtube"><a href="#">youtube</a></li>
		<li class="github"><a href="#">gitgub</a></li>
		<li class="behance"><a href="#">behance</a></li>
		<li class="yelp"><a href="#">yelp</a></li>
		<li class="mail"><a href="#">mail</a></li>
		<li class="instagram"><a href="#">instagram</a></li>
		<li class="foursquare"><a href="#">foursqure</a></li>
		<li class="zerply"><a href="#">zerply</a></li>
	</ul>
</div>

Just change "#" with your social media links.

Now save your template and visit your blog.

you wiil finding an coolest social media sprite buttons.

The new year is just few days, so we hope to giving you many types of coolest creations that help your blog to growing. Also don't forget to share this topic in your favorite social media site and don't forget to share your opinion using comment section.