Привет, читатель! Очень рад вас видеть на страницах моего блога. Сегодняшний пост посвящен: устанавливаем красивые социальные кнопки на боковую панель блога Blogger. В последние несколько лет социальные сети стали чем-то большим, нежели просто для общение друзей и новых знакомств. Они так же играют огромную роль для продвижения блога и привлечения посетителей.
Чем больше друзей, тем больше шансов получить трафик для своего блога. Поэтому, я представлю вам набор красивых социальных кнопок, с эффектом при наведении на боковую панель блога. Весь набор кнопок социальных сетей, можно посмотреть и проверить в демонстрационном
Виджет для Blogger - кнопки социальных сетей RSS, Google plus, Facebook и Twitter

Код кнопок:
<style> /*--------Touch Me Sharing Widget ------*/ .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://new-school-blogger.googlecode.com/files/Sharing%20Touch%20Me.png ) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <div class='touchme'> <!--RSS--> <a class='rss' href="####" rel='external nofollow' target='_blank'></a> <!--Google Plus--> <a class='googleplus' href="####" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="####" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="####" rel='external nofollow' target='_blank' ></a> </div>
Виджет Blogger социальные кнопки Facebook, Twitter, Google+ и Pinterest

Код для этих кнопок:
<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> <div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/####" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a rel="nofollow" title="Подписаться на обновление блога по Email" href="http://feedburner.google.com/fb/a/mailverify?uri=####" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a rel="nofollow" title="Like Our Facebook страница" href="####" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="####" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a title="Follow на Google+" rel="nofollow" href="####" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png" /></a><a title="Follow Our Pins" rel="nofollow" href="####" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>
Кнопки соцсетей Twitter, Facebook, RSS, YouTube и Google Plus - виджет Blogger

Код для этих кнопок:
<style> /************************** Social Buttons from *************************/ .gotsocial {padding: 2em 0 1.5em 50px;} .gotsocial span a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("http://4.bp.blogspot.com/-R1ZmmnETQEQ/T0xFPa2HyXI/AAAAAAAAAB0/zIaZHlquhv0/s1600/socialbuttons.png") 0 0 no-repeat;} .gotsocial span {float: left;display: inline;margin-center: 8px;} #iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;} #iconTwitter {background-position: -33px -33px;} #iconTwitter:hover {background-position: -33px 0;} #iconFacebook {background-position: -66px -33px;} #iconFacebook:hover {background-position: -66px 0;} #iconRSS {background-position: 0 -33px;} #iconRSS:hover {background-position: 0 0px;} #iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0} #iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;} .ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;} </style> <div class="gotsocial"> <span> <div style='text-align: center'> <a href="####" id="iconTwitter" target="_blank" title="Twitter:Сергей Загуляев">Twitter</a></div></span> <span><a href="####" id="iconFacebook" target="_blank" title="Facebook:Школа Blogger(а) ">Facebook</a></span> <span><a href="http://feeds.feedburner.com/####" id="iconRSS" target="_blank" title="RSS Feed: Школа Blogger(а) blog post feed">RSS</a></span> <span><a href="####" id="iconYouTube" target="_blank" title="YouTube Channel: Сергей на youtube">YouTube</a></span> <span><a href="####?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus:Школа Blogger(а) ">Google</a></span> </div>
Социальные кнопки Twitter, Facebook, Google Plus со счетчиком для Blogger

Код кнопок со счетчиком:
<style type="text/css"> .container { margin: 0px auto; width: 300px; text-align: center; } .share-btn { display: inline-block; vertical-align: top; position: relative; margin: 0 5px; padding-top: 40px; width: 75px; font-weight: bold; text-align: center; text-decoration: none; border-radius: 8px; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .share-btn:active { margin-top: 3px; } .share-btn:active .share-btn-action { padding-bottom: 3px; -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); } .share-btn:active .share-btn-action:after { bottom: 3px; } .share-btn-count { position: absolute; top: 0; left: 0; right: 0; line-height: 40px; font-size: 19px; letter-spacing: -1px; color: #555; text-shadow: 0 1px white; background: #e6eff5; border-width: 1px 1px 0; border-style: solid; border-color: #c5c5c5 #bbb; border-radius: 8px 8px 0 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); } .share-btn-count:before, .share-btn-count:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #e6eff5; } .share-btn-count:before { margin-left: -7px; margin-top: 1px; border-width: 7px; border-top-color: rgba(0, 0, 0, 0.07); } .share-btn-action { display: block; position: relative; line-height: 32px; padding: 2px 0 6px; font-size: 14px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); border: solid rgba(0, 0, 0, 0.18); border-width: 0 1px; border-radius: 0 0 8px 8px; } .share-btn-action:after { content: ''; position: absolute; top: 0; bottom: 6px; left: 0; right: 0; border-radius: 0 0 6px 6px; -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); } .share-btn-tweet { background: #83cfe8; background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4); background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4); background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4); background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4); -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); } .share-btn-tweet:after { -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); } .share-btn-tweet + .share-btn-count { -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); } .share-btn-like { background: #6480bd; background-image: -webkit-linear-gradient(top, #6480bd, #3c5894); background-image: -moz-linear-gradient(top, #6480bd, #3c5894); background-image: -o-linear-gradient(top, #6480bd, #3c5894); background-image: linear-gradient(to bottom, #6480bd, #3c5894); -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); } .share-btn-plus { background: #626262; background-image: -webkit-linear-gradient(top, #626262, #404040); background-image: -moz-linear-gradient(top, #626262, #404040); background-image: -o-linear-gradient(top, #626262, #404040); background-image: linear-gradient(to bottom, #626262, #404040); -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); } </style> <div class="container"> <a href='####' rel='nofollow' target='_blank' title='Найти нас на twitter' class='share-btn'> <span class="share-btn-action share-btn-tweet">twitter</span> <span class="share-btn-count">4291+</span> </a> <a href='####' rel='nofollow' target='_blank' title='Найти нас на facebook' class='share-btn'> <span class="share-btn-action share-btn-like">facebook</span> <span class="share-btn-count">500+</span> </a> <a href="####" class="share-btn" target="_blank" rel="author" title='Найти нас на google+'> <span class="share-btn-action share-btn-plus">google+</span> <span class="share-btn-count">106+</span> </a> </div>
Дорогие друзья, здесь счетчик не автоматический, меняйте количество друзей в ручную. Удачи. Всем пока.
С уважением, Сергей
Можно ли убирать из кода какой-либо элемент социальной сети, если сайт в нем не представлен? Допустим, моего сайта нет на Youtube. Можно тогда в коде убрать этот элемент?
Привет, Эдуард! Можно конечно.
Приветствую, Сергей, спасибо за ответ 🙂 Еще такой момент забыл спросить: можно ли вставлять свои социальные иконки в этот шаблон? Естественно, сперва залив сами иконки на хостинг.
Привет, Эдуард! Конечно можно. Иконки всегда лучше держать на своём хостинге.
Привет, Сергей! Спасибо за подтверждение 🙂
Пожалуйста,Эдуард!