Привет, читатель! Очень рад вас видеть на страницах моего блога. Сегодняшний пост посвящен: устанавливаем красивые социальные кнопки на боковую панель блога Blogger. В последние несколько лет социальные сети стали чем-то большим, нежели просто для общение друзей и новых знакомств. Они так же играют огромную роль для продвижения блога и привлечения посетителей.
Чем больше друзей, тем больше шансов получить трафик для своего блога. Поэтому, я представлю вам набор красивых социальных кнопок, с эффектом при наведении на боковую панель блога. Весь набор кнопок социальных сетей, можно посмотреть и проверить в демонстрационном . Все представленные социальные кнопки устанавливаются при помощи волшебного гаджета HTML/JavaScript. В поле гаджета добавляйте представленный код. В место решеток вставляйте ссылки на ваши профили или на страницы блога в социальных сетях, RSS поток, текст меняете на свой. Дайте привлекательное название и сохраняйте.
Виджет для Blogger - кнопки социальных сетей RSS, Google plus, Facebook и Twitter
Код кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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
Код для этих кнопок:
|
1 2 |
<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
Код для этих кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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
Код кнопок со счетчиком:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<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. Можно тогда в коде убрать этот элемент?
Привет, Эдуард! Можно конечно.
Приветствую, Сергей, спасибо за ответ 🙂 Еще такой момент забыл спросить: можно ли вставлять свои социальные иконки в этот шаблон? Естественно, сперва залив сами иконки на хостинг.
Привет, Эдуард! Конечно можно. Иконки всегда лучше держать на своём хостинге.
Привет, Сергей! Спасибо за подтверждение 🙂
Пожалуйста,Эдуард!