Thursday 20 September 2012

Pin It

Widgets

Adding 3D Social Icons With Rotate Spin Effect To Blogger

With the Css rotate when you place your cursor over each icon they spin 360 degrees, they then spin back 360 when the cursor is removed (Cool eh).I also have a slight opacity hover effect on the icons.So in this post I will show you how to add the icons to your blog, linked to your social profiles and feeds.

Live Demo:



Icon Icon Icon Icon Follow Me on Pinterest

TechnoClouds

In the new Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste In The Following Code
WIDGET CODE:

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDs5ZPB0Cwl1AahluhwRFP7hzSQgSZsYc92OBa7wErzyyGWhbnXCFs0TnouaHL92QAJORlCUn9Z8Haib0b9JTzw29W1B_-9Qr2-uRwpm5LHbDdBDjM7efvbFlvET3-hv0UAoFMQvHo-QoA/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmowIJg-ykvt28NS2PMdJE8AREqfqRulqQjBW6B6upZKEWEpAR9q-n90y6zIcFrS-qCEKBCe97XXCvI9-hZQz9ZztjNly6DVGR7BEMvC4g2cfxzx165pFY28ZP_ltQUvqUc-tZ0Lo8_poc/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7mK3zO4mAS6VWfmpZlEyZ7uyYpbOo6N8rxwxFHQk26T6G5d7kirBH0VvmHddsAfh3be1rKAutuKnTWhYe3Kj6EwhIbwSZAmaEwa1eNy9ofq_SuJo1bobfEUSzEx95pZUv7AtURBCeVfG/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOlcrhAOVDR71sknSrnKbRDDa8Svm41SxLKvUdImFW-R9vLNp4wiOX0s799ntv6060gr2WA8Dn_LAPDXZIoSoVi2bwNy122DhmJuKva0se7om2zfx_IpIFT930KMPhWFPxLrgHxjtREYK/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_jRAI2OVQjMlNEdO3oYWaYx8mOn4T6SOAlHTr_WEvzIgYBGkDor9LUq1-jxlfKrDz4JteOWQ3pCnf0Fv4kEXVknfMgLj1cKLL5fNuSrntelVjOahjYdOrw7W8iF5QVsvlBpHFDaklt0x/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcd3xFbNX7bELQT-N3tUdQT47WZgPI-eXbL6od0i-nlPSAHW2ewVXo7fGy5NkHMKWugnXjr5Afdmt29zRslUn66OWoqqX8-vuZP6GqTvCsP2Um9azohe3UO7ONIt7Qang9soil9YjXQdBP/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="TechnoClouds"


Important - Replace the RED sections with your social profiles and feed URLs. 

Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...

Test your Widget with HTML editor

0 comments:

Post a Comment

Complicated?
If you have any question about any Post, Don't hesitate to ask question.You can simply drop a comment below post.Your Feedback always appreciated.