 |
How to implement below CSS3 social icons to your blog?
STEP 1 : Goto Design --->Edit HTML ---> ctrl+f ---> Search for <head> tag ---> Copy paste the below code just after the <head> tag.
<link rel="stylesheet" href="http://discovernine.webs.com/css3%20social%20icons/style.css"
type="text/css"/>STEP 2 : Add a gadget anywhere you want your icons to appear
And paste any code of your choice given below.The code is common for all three demo's except one change.check out below
CSS3 360 Rotation Demo
Paste as it is! change the # with your URL
<table><tr>
<td>
<a href="#facebook"><img src="http://4.bp.blogspot.com/-ITEUr3pgKOA/Tsi-Uyg3toI/
AAAAAAAABlc/tssq-y_U8uc/s1600/f.png" class="rotate"></td>
<td><a href="#twitter"><img src="http://2.bp.blogspot.com/-tRcJjzQ4FbU/Tsi-
YuH2_pI/AAAAAAAABmE/26yzawTvofA/s1600/t.png" class="rotate"></td>
<td><a href="#firefox"><img src="http://3.bp.blogspot.com/-qotWlxnjDIY/Tsi-
3phswhI/AAAAAAAABmQ/M7GFkZhrCWY/s1600/di.png" class="rotate"></td>
<td><a href="#feed"><img src="http://1.bp.blogspot.com/-ks3VAXiYTGM/Tsi-
VEYGKkI/AAAAAAAABlk/KRD2zGzCJc0/s1600/fee.png" class="rotate"></td>
<td><a href="#stumble"><img src="http://4.bp.blogspot.com/-5HT-UhqESwQ/Tsi-
YGqlOMI/AAAAAAAABl8/NDNNmTEldh4/s1600/s.png" class="rotate"></td>
<td><a href="#flickr"><img src="http://3.bp.blogspot.com/-NFEhTT3ngvw/Tsi-
WJpbFdI/AAAAAAAABlw/tFgCymsk_eg/s1600/fr.png" class="rotate"></td>
<td><a href="#google"><img src="http://2.bp.blogspot.com/-KgrO20XeR0w/Tsi-
Xv464OI/AAAAAAAABl0/cPpOcc1hptU/s1600/g.png" class="rotate">
</td>
</tr>
</table>CSS3 180 Rotation Y Demo
Change the class property shown in red above to "class=rotatey"
---------------------------------------------------------------------------------------
CSS3 Zoom Out Demo
Change the class property shown in red above to "class=flt-wdt"
---------------------------------------------------------------------------------------
CSS3 Link Nudge Effect 3D Text Demo
<ul id="animateList">
<h1><li><a href="#FACEBOOK URL" style="color:#153E7E;">Facebook</a></li>
<li><a href="#TWITTER URL" style="color:#38ACEC;">Twitter</a><li>
<li><a href="#FLICKR URL" style="color:#F52887;">Flickr</a></li>
<li><a href="#RSS URL" style="color:#F88017;">RSS Feed</a></li>
<li><a href="# STUMBLE URL" style="color:#347C17;">StumbleUpon</a></li>
</h1></ul>
