Крутящиеся кнопки социальных сетей для блога

3D социальные иконки для Blogger

Роль социальных сетей - Facebook, Twitter, Вконтакте, Google+ ....... нельзя игнорировать. Уже сегодня сложно найти сайт или блог без социальных плагинов, дизайн которых становится все более оригинальным. Наткнувшись на 3D социальные иконки с эффектом вращения, не смог пройти мимо. И хоть с сайдбаре уже был установлен комплект иконок, решил поиграться с новыми. Если навести курсор, иконки начинают вращаться и рука сама тянется кликнуть на мышку.

Код иконок :

<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">
<a href="feeds.feedburner.com" rel="nofollow" target="_blank" title="Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXRIwAXHPT4Gm7vMf0GQaZyANW3AA04_cnZ1Uz8reUO09-h5zsRr0VBNEn5GmdVHDC_xcKWjoxUEml9O7_0TU8PsGDm_8wFp2uOBj1w4_nJMPLAK1zYFEH1QdDiPQKqHH_nNkF1CAPYk/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a>   <a href="feedburner.google.com" rel="nofollow" target="_blank" title="Получать свежие статьи на Email"><img alt="Icon" border="0" src="http://1.bp.blogspot.com/-6Db4xlsxpfM/UCd62NNnDFI/AAAAAAAACXM/7juUQLsr7lg/s1600/RSS-EMAIL-48.png" style="margin-right: 1px;" /></a>    <a href="facebook.com" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzM7xBJs8xhe2XrGF7pSb4PcfXHsE2KxSKDAHHy9aAOt3VIoBIO6pz-FMsCx9Tsv-BQsAtLE_64nHxQXMcTu6bSI7WMrcPmFbgqV880JOwt5TLt9E_5hyphenhyphenzsknuYqowZpAZfLLjVbpI_yk/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a>   <a href="twitter.com" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="http://1.bp.blogspot.com/-JuuqzK04p8s/UCS5x16X97I/AAAAAAAACWs/bWjTy0p3ueI/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a>   <a href="plus.google.com" rel="nofollow" target="_blank" title="Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI320HZKOjEClx3VrvESPFotT-m982S66dz_BpEWLaL1iiCSXqrdHjcFESd_hK1eddOzT5qRZ1vKyga1KWXNYx77ig88QpADx96iOdYWy_cEvrfXhKB_rJIpag560Wq_v1dc1qTPjtdpc/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a>   </div>   </center>

Установить легко: "Дизайн" -- "Добавить гаджет" -- "HTML/JavaScript" -- код гаджета.

Только адреса профилей соцсетей и RSS канала поменяйте на свои. Сохраняем и перетягиваем гаджет, лучше повыше...

А вот пример,выглядит так;

Posted in: Blogger