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:
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...
Posts
0 comments:
Post a Comment