Социальные кнопки в Blogger.

Сегодня я собираюсь показать, как можно добавить социальные кнопки в стиле Metro с эффектом Hover на ваш Blogger блог. Такой виджет можно часто встретить на сайтах сделанных на платформе WordPress, поэтому, что-то подобное хотелось найти для Blogger.

Этот виджет поможет привлечь больше траффика на ваш сайт. Элегантный внешний вид этого виджета заставит многих кликнуть по необходимой социальной кнопке.

Чтобы добавить код виджета нужно перейти в настройки вашего блога: Дизайн → Добавить виджет → код HTML / JavaScript и вставьте этот код:

<center><ul id="abt-social-icons"><li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41YfNJyNFEcAfFv12BMlRRuFHD2vPhK0VJlDk71dBb2eGlSX3xYHHavlGl6R3SvIiAENADoxyLin2fNcEIz7IcQxBzNVtS6f-PnBv8mnF4wuskFSWlDAvnFbmEf-wWlO3iqhRadWmFZ4/s1600/rss.png" width="147" /></a></li><li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkJ96FmVK1nqWYFt0FuPkocv0L815KTszCU84dYd_DXRWdvLCkWy1g65_IgTLxUd1DuDltimJbH82X07A75l-6pQ7vx7rCYHBpyM8qwARf_b38WCIjoTvbJbYf73D8PzzA0gVllaAdsc/s1600/twitter.png" width="147" /></a></li><li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uHlb2TXoRImOmGjTHoJXw5L_DgkQZ3P9OAtj-POKA_f0HY-sal2CK-ZjRcpGNH5mI5NAs_vWUOUM1ODiug68u17Lnzmvlnqb9aaIqDJOdWZ8Byq4Q2E3bNoptBs8Va8TRcwhW7S-_DQ/s1600/facebook.png" width="147" /></a></li><li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6L0i6TOxqz1xSDUnjwNZu9GtBFLRVq3y7s7RzLbY2oZ8XtrsqpYTgRscBaKLxJDKI2DVYpacY_-IvltDvVVn9ASWyBfaoI2S-IiUh3i1va7IAusEaWEcYLMwDlaASpK4DGV1g3KMmdcE/s1600/google.png" width="147" /></a></li></ul></center><style>#abt-social-icons li {float: left;width: 147px;height: 147px;margin: 0 6px 6px 0;padding: 0 0 0 0;border-bottom: none;list-style: none;}#abt-social-icons li a {line-height: 1px;display: block;}#abt-social-icons li a:hover img {-webkit-opacity: 0.8;-moz-opacity: 0.8;opacity: 0.8;}#abt-social-icons li a span {display: none !important;<center><ul id="abt-social-icons"><li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41YfNJyNFEcAfFv12BMlRRuFHD2vPhK0VJlDk71dBb2eGlSX3xYHHavlGl6R3SvIiAENADoxyLin2fNcEIz7IcQxBzNVtS6f-PnBv8mnF4wuskFSWlDAvnFbmEf-wWlO3iqhRadWmFZ4/s1600/rss.png" width="147" /></a></li><li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkJ96FmVK1nqWYFt0FuPkocv0L815KTszCU84dYd_DXRWdvLCkWy1g65_IgTLxUd1DuDltimJbH82X07A75l-6pQ7vx7rCYHBpyM8qwARf_b38WCIjoTvbJbYf73D8PzzA0gVllaAdsc/s1600/twitter.png" width="147" /></a></li><li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uHlb2TXoRImOmGjTHoJXw5L_DgkQZ3P9OAtj-POKA_f0HY-sal2CK-ZjRcpGNH5mI5NAs_vWUOUM1ODiug68u17Lnzmvlnqb9aaIqDJOdWZ8Byq4Q2E3bNoptBs8Va8TRcwhW7S-_DQ/s1600/facebook.png" width="147" /></a></li><li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6L0i6TOxqz1xSDUnjwNZu9GtBFLRVq3y7s7RzLbY2oZ8XtrsqpYTgRscBaKLxJDKI2DVYpacY_-IvltDvVVn9ASWyBfaoI2S-IiUh3i1va7IAusEaWEcYLMwDlaASpK4DGV1g3KMmdcE/s1600/google.png" width="147" /></a></li></ul></center><style>#abt-social-icons li {float: left;width: 147px;height: 147px;margin: 0 6px 6px 0;padding: 0 0 0 0;border-bottom: none;list-style: none;}#abt-social-icons li a {line-height: 1px;display: block;}

#abt-social-icons li a:hover img {-webkit-opacity: 0.8;}</style>