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


Сегодня вы узнаете как установить на свой блог 3d социальные иконки с эффектом вращения. Известно, что чем более оригинально выглядят ваши иконки, тем больше будут кликать по ним ваши посетители, и тем больше соответственно будет у вас подписчиков по rss и e-mail, фолловеров в твиттере, друзей в google + и fasebook.

Похожие записи:

Вот так выглядят социальные иконки:

#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); }

Icon Icon Icon Icon Подпишись на Pinterest

Для того, чтобы вставить их на страницы вашего блога, вам нужно добавить гаджет HTML / JavaScript с кодом:
..

<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="Подпишись на RSS" href="URL RSS" target="_blank"><img border="0" src="https://mycrib.ru/wp-content/uploads/2012/11/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Подпишись письмом" href="Ссылка на подписку по email" target="_blank"><img border="0" src="https://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/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="Ссылка на ваш профиль fasebook" target="_blank"><img border="0" src="https://mycrib.ru/wp-content/uploads/2012/11/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Стань читателем в twitter" href="Ваш профиль twitter" target="_blank"><img border="0" src="https://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Стань читателем на Google+" rel="nofollow" href="Ссылка на ваш профиль GOOGLE-PLUS здесь" target="_blank"><img style="margin-right:1px;" src="https://mycrib.ru/wp-content/uploads/2012/11/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST" target="_blank"><img style="margin-right:1px;" src="https://mycrib.ru/wp-content/uploads/2012/11/PINTEREST-48x48.png" alt="Подпишись на Pinterest" /></a></center> <!--End Pinterest Icon--> </div><br/>

Обязательно замените отрезки кода, выделенные желтым на ссылки на ваши профили соцсетей.
По желанию вы можете вынести css из данного кода в шаблон блога (вставить отрезок кода, заключенный между <style>  и </style> в редакторе шаблона блога до  ]]></b:skin>.

3 ответа к «3D социальные иконки»

  1. Конечно, будет. Это чистый css + html.
    Вставляй код, заключенный между <style> и </style> в таблицу стилей, а остальной код — в виджет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *