Привет друзья, сегодняшний урок будет про социальные кнопки, кнопки не обычные они с очень красивым раздвижным эффектом при наведении. Кнопки сами по себе не могут не привлекать пользователей, потому как тяжело их не заметить и думаю поспособствуют продвижению вашего веб ресурса социальных сетях, и получению трафика.Что бы их установить я напишу несложную инструкцию, и так первым делом заходим в наш блог идём в раздел Дизайн, далее жмем добавить гаджет. В списке ищем HTMLjawascrpt, и жмем вставляем туда скрипт, а как вставите не забудьте изменить именя профилей в социальных сетях как это сделать указано под скриптом.
<!----------zarnakoom flash social buttons starts-------------> <style type="text/css"> #buttonbg { width: 260px; margin: 10px 20px; padding: 0; } #buttonbg li { cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon { background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fghUcsUUfa-kjLRTP1Aw3W9U2PYzsgGFRxbkXJ34K_ShYtZcEGPid3lY8pt5g36Y1_4qFTMRJWV7tVqMXkINvsAhyphenhyphenSUqaqO0UUukx9z6-s9ATWP5UCT1s5l9hKVxpZiDRD92DA6d3uw/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42); border-radius: 30px; display: block; color: #141414; float:none; height: 48px; line-height: 48px; margin: 5px 0; position: relative; text-align: left; text-indent: 90px; text-shadow: #333 0 1px 0; white-space: nowrap; width: 48px; z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover { visibility: hidden;} #buttonbg span { display: block; top: 15px; position: absolute; left: 90px;} #buttonbg .icon { color: #fafafa; overflow: hidden;} #buttonbg .fb { background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit { background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google { background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint { background-color: rgba(204, 0, 0, .42); background-position: 0 -526px;} #buttonbg .linked { background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant { background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube { background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss { background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon { width: 250px; } #buttonbg li:hover .icon { background-color: #d91e76; } #buttonbg li:hover .fb { background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google { background-color: #A70000; background-position: 0 -94px;} #buttonbg li:hover .pint { background-color: #C00; background-position: 0 -142px; } #buttonbg li:hover .linked { background-color: #005772; background-position: 0 -190px;} #buttonbg li:hover .deviant { background-color: #4C7A4A; background-position: 0 -238px;} #buttonbg li:hover .ytube { background-color: #A00; background-position: 0 -286px; } #buttonbg li:hover .rss { background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active { bottom: -2px;-webkit-box-shadow: none; -moz-box-shadow: none;-o-box-shadow: none;} </style> <style type="text/css"> #buttonbg {width: 260px; margin: 10px 20px; padding: 0;} #buttonbg li { cursor: pointer; height: 48px; position: relative; list-style-type: none; } #buttonbg .icon { background: #D91E76 url('http://2.bp.blogspot.com/- JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42); border-radius: 30px; display: block; color: #141414;float:none;height: 48px;line-height: 48px; margin: 5px 0; position: relative; text-align: left; text-indent: 90px; text-shadow: #333 0 1px 0; white-space: nowrap; width: 48px; z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover { visibility: hidden;} #buttonbg span { display: block; top: 15px; position: absolute; left: 90px;} #buttonbg .icon { color: #fafafa; overflow: hidden;} #buttonbg .fb { background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit { background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google { background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint { background-color: rgba(204, 0, 0, .42); background-position: 0 -526px;} #buttonbg .linked { background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant { background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube { background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss { background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon { width: 250px; } #buttonbg li:hover .icon { background-color: #d91e76; } #buttonbg li:hover .fb { background-color: #2d76b9; background-position: 0 2px;} #buttonbg li:hover .twit { background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google { background-color: #A70000; background-position: 0 -94px;} #buttonbg li:hover .pint { background-color: #C00; background-position: 0 -142px; } #buttonbg li:hover .linked { background-color: #005772; background-position: 0 -190px;} #buttonbg li:hover .deviant { background-color: #4C7A4A; background-position: 0 -238px;} #buttonbg li:hover .ytube { background-color: #A00; background-position: 0 -286px; } #buttonbg li:hover .rss { background-color: #EC5601; background-position: 0 -334px; } #buttonbg .icon:active { bottom: -2px; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;} </style> <ul id="buttonbg"> <li ><a href="http://www.facebook.com/zarnakoom" class="icon fb"> Like us on Facebook</a> <span>Like us on Facebook</span></li> <li ><a href="http://twitter.com/zarnakoom" class="icon twit" > Follow us on Twitter</a><span>Follow us on Twitter</span></li> <li ><a href="https://plus.google.com/101660954502545138757/101660954502545138757/posts" class="icon google" > Follow us on Google+</a> <span>Follow us on Google+</span></li> <li ><a href="http://pinterest.com/zarnakoom/" class="icon pint">Follow us on Pinterest</a> <span>Follow us on Pinterest</span></li> <li ><a href="http://feeds.feedburner.com/zarnakoom" class="icon rss" >Subscribe via RSS</a> <span>Subscribe via RSS</span></li> </ul> <!---------zarnakoom flash social buttons end---------->
А теперь где я пометил маркером, заменяем на свои имена в социальных сервисах,и не забываем нажать на сохранение.
0 коммент. :