2013 CSS , Metro Style , Widgets 0 Comments

Social Media always gives good traffic to your blog so we always make special widgets for it but today this one is completely different then our other social widgets it has anime images with it you can change the images if you want so lets continue to the tutorials.

Install It Into Blogger

The tutorial is not big you just need to add this code where ever you want it to appear.

<div class="social-ax fade">
<a target="_blank" href="#" class="facebook-BA">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYRdv_347_ajWsg57Ls5XSgUXqJshM38_4YwSyO8FwEZsQAUZNaImmIPIH8Vw3zuLX5IyIN3ktBP3RGMxFcEOBHHQYBZbaCOye-73etvXxKEimFgvVkOnDRTbeWq9DzJJxm9enN1U9G-f/s1600/01.jpg">
<span></span>
</a>

<a target="_blank" href="#" class="twitter-BA">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_CyEI_kETF-ftVCPGSCoA-s-eNkPWSOdNCDddmxWF8UHquBpJLux_wMM2g-kyDVVa62ow4lJ-SEuZzIowudj0sQZqQ4AEKRUM5OCvoNDNfuJZR0Kq2t3DT-OI8RxaafIggVzbjrVkvIyG/s1600/02.jpg">
<span></span>
</a>

<a target="_blank" href="#" class="google-BA">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvBuF3xikK9oYVJF2YeMh491FjvThncIy7poyX1efBOr9yk9HTLtVHxKp_8f0lBT5fmKCQoR44o9EOBBGaSkfXoGbeI-Dc1fMNogsDMGhwId6JHJM3aMCMpYlNvFHnSWFeqdxN-s_Rvohw/s1600/03.jpg">
<span></span>
</a>

<a target="_blank" href="#" class="youtube-BA">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCgXIJokd81qb2BUTeY7vymx1_SwnR62lDzIaUuPaK_8n_RUbG6hExjGtBCTXYpbg_aThnF8uLj6g4e2mSKn42BNY899Aleolpf5-DSD6FaydafJrrpgTzIa3TnU-MZX-iGMN3VtAInp_/s1600/04.jpg">
<span></span>
</a>

<a target="_blank" href="#" class="rss-BA">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBG-VvUUkcGmhKWW-0vtN_r4o6BL23MtYk7srEcP0AK5huQfBtY4rQfXVKynDGhLb0WSe_YuRfUqjW9SF1PyJZFcDBY2dH8W3A7CZ1dZn2TdK3WQ-o6T-c_tQt20MuOmRWN6k2y3xNv6_c/s1600/05.jpg">
<span></span>
</a>
</div>
<style>
.social-ax > a {
border: 1px solid #CCCCCC;
display: inline-block;
height: 70px;
line-height: 0;
margin: 0 20px 10px;
padding: 4px;
position: relative;
width: 70px;
}

.social-ax > a > span {
background-color: rgba(255, 255, 255, 0.7);
background-image: url("http://imageshack.us/a/img248/5871/alliconscopy2.png");
background-repeat: no-repeat;
display: block;
height: 70px;
position: absolute;
top: 4px;
width: 70px;
z-index: 50;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}

.facebook-BA > span {background-position: 7px 2px;}
.twitter-BA > span {background-position: -92px 2px;}
.google-BA > span {background-position: -194px 2px;}
.youtube-BA > span {background-position: -292px 2px;}
.rss-BA > span {background-position: -393px 1px;}
.social-ax.fade > a > span {opacity: 0;}
.social-ax.fade > a > span:hover {opacity: 1;}
</style>