Приветствую вас, дорогой читатель моего блога! Спешу поделиться с вами друзья, новыми виджетами для блога. Социальные виджеты Blogger на боковую панель блога довольно красивые. Я вам представлю гаджеты несколько видов и стилей, думаю каждый подберёт для своего блога, то, что ему нужно (ещё вы можете посмотреть соцвиджеты которые я представил чуть раньше - тут и здесь).
Социальные виджеты это - виджет подписки на обновление блога, с социальными кнопками; виджеты (популярного на сегодняшний день) в стиле метро и так далее. Все виджеты смотрим и пробуем в демонстрационном блоге
Стильные социальные виджеты для Blogger в стиле метро
Чтобы установить такой стиль виджета, зайдите в панель инструментов blogger - дизайн - добавить гаджет HTML / JavaScript и в его поле вставляем этот код:
<style> /*Metro UI Social Profile Widget*/ #jocial{width: 305px; float: left;margin-top: 10px;} #jocial li{position:relative; cursor:pointer; padding: 0 !important;} #jocial .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #jocial .icon{overflow:hidden;} #jocial .facebook{width: 150px; height: 150px; background: rgba(59,89,152,1) url("http://1.bp.blogspot.com/-UKryCh_9ofg/UTZhTsKo1JI/AAAAAAAABB8/nZELvc-I_mU/s000/facebook.png") no-repeat center center;} #jocial .twitter{width: 150px; height: 74px; background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;} #jocial .googleplus{width: 150px; height: 74px; background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;} #jocial .rss{ width: 302px; height: 74px; background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;} #jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .rss{background:rgba(255,102,0,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} </style> <ul id='jocial'> <a class='icon facebook' href='http://www.facebook.com/xxxxx'/> </a> <a class='icon twitter' href='http://twitter.com/xxxxx'/> </a> <a class='icon googleplus' href='https://plus.google.com/xxxxx'/> </a> <a class='icon rss' href='http://feeds.feedburner.com/xxxxx'/> </a> </ul>
Сохраните гаджет. Заменяем ххххх на ваши данные социальных сетей и поток feedburner. Следующий стиль:
Для того, чтобы мне не повторяться - все виджеты устанавливаются при помощи не заменимого гаджета HTML / JavaScript. Вот код для вставки:
<style> /*Metro UI Social Profile Widget*/ .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px} .metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} </style> <div class="metro-social"> <li><a class="fb" href="http://www.facebook.com/ххххх"></a></li> <li><a class="tw" href="http://twitter.com/ххххх"></a></li> <li><a class="gp" href="https://plus.google.com/ххххх"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/ххххх"></a></li> </div>
Здесь так же вставляем свои данные и сохраняем гаджет.
Стильный виджет подписки на обновление блога с кнопками социальных сетей
Здесь, при наведении на соцкнопки они увеличиваются и есть счетчик ваших подписчиков. Вот код для вставки в гаджет HTML / JavaScript:
<style> .bouncy_bb{ list-style-type:none; margin:0; padding:0; } .bouncy_bb li{ display:inline; width: 60px; height:60px; } .bouncy_bb li img{ width: 55px; height: 55px; border:0; margin-right: 4px; -webkit-transition:-webkit-transform 0.1s ease-in; -moz-transition:-moz-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; } .bouncy_bb li img:hover{ -moz-transform:scale(1.8); -webkit-transform:scale(1.8); -o-transform:scale(1.8); } #bbEmailsub { display: block; clear: both; margin: 10px 0; } form.bbEmailform { margin: 20px 0 0; display: block; clear: both; } .emailText { background: url("https://lh5.googleusercontent.com/-LHTGmvK1_Io/UXyjlU0L1iI/AAAAAAAAAc0/30yinhwo2qM/h120/bb-mail.png") no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .emailButton { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } </style> <center> <br/> <ul class="bouncy_bb"> <li> <a href="http://www.facebook.com/XXXXXX"><img src="http://1.bp.blogspot.com/-ADDbt89x5C8/UXvuXc-Lu8I/AAAAAAAAAbs/AI1fQzkk7wY/s1600/facebook-tangerine.png" title="Like Us On Facebook" /></a> </li> <li> <a href="https://twitter.com/XXXXXX"><img src="http://4.bp.blogspot.com/-fengzyRpM18/UXvuYNxkrfI/AAAAAAAAAb8/DeTDf4BXDLA/s1600/twitter-tangerine.png" title="Follow Us On Twitter" /></a> </li> <li> <a href="https://pinterst.com/XXXXXX"><img src="http://1.bp.blogspot.com/-33qg4bOZJfs/UXvuXJsYoRI/AAAAAAAAAbk/A2C34K_U8Xs/s1600/pinterest-tangerine.png" title="Follow On Google+" /></a> </li> <li> <a href="http://feeds.feedburner.com/ххххх"><img src="http://4.bp.blogspot.com/-Td4-uXMe8Ks/UXvuXLEOdxI/AAAAAAAAAbo/7yhkmk6n7Fw/s1600/rss-tangerine.png" title="Join us at feeds" /></a> </li></ul></center> <div style="text-align: center;"> <a href="http://feeds.feedburner.com/blogspot/jizET"><img src="http://feeds.feedburner.com/~fc/ххххх?bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" /></a> <div id="bbEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ххххх', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="bbEmailform"> <input type="hidden" value="ххххх" name="uri" /> <input type="hidden" name="loc" value="ru_RU" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailText" /> <input type="submit" class="emailButton" value="Жми!" title='' /> </form> </div></div>
Незабываем менять ххххх на свои данные, а так же текст пишем любой.
Социальный виджет с выпадающим эффектом на боковую панель блога
Так будет выглядеть виджет в закрытом состоянии:
А так в открытом:
Напоминаю вам дорогие друзья, что это все можно испытать в демо блоге. Ссылка на блог, вверху сообщения. Для такого эффектного виджета вот такой код:
<style> .widget-item-control a{display:none;} .glossy-selectbox { display:inline-block; font:normal bold 12px Arial,Sans-Serif; position:relative; width:300px; background-color:#111; text-align:left; /* CSS3 Browser */ background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%); /* IE only */ filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111'); border-radius:7px; box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.7); } .glossy-selectbox:before, .glossy-selectbox:after { content:""; display:block; width:0; height:0; border:3px solid transparent; border-width:5px 3px; border-bottom-color:#999; position:absolute; top:25%; right:5px; z-index:4; } .glossy-selectbox:after { border-color:#999 transparent transparent; top:auto; bottom:25%; } .glossy-selectbox input { display:block; position:absolute; top:0; right:0; bottom:0; width:15px; height:100%; opacity:0; z-index:10; cursor:pointer; } .glossy-selectbox label { display:block; line-height:45px; color:rgba(255,255,255,.5); padding:0 15px; transition:all 0s ease-out; } .glossy-selectbox label:before { content:attr(data-default); } .glossy-selectbox label:after { content:""; display:block; position:absolute; top:0; right:0; bottom:0; width:15px; border-left:1px solid rgba(0,0,0,.4); border-radius:0 7px 7px 0; box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); } .glossy-selectbox input:hover + label { color:white; } .glossy-selectbox input:hover + label:after { background-color:rgba(255,255,255,.04); } .glossy-selectbox ul { margin:0 0; padding:0 0; position:absolute; top:100%; left:14px; right:14px; background-color:#222; border:1px solid #111; box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4); visibility:hidden; opacity:0; z-index:99; } .glossy-selectbox li { margin:0 0; padding:0 0; list-style:none; float:left; width:50%; display:inline; } .glossy-selectbox a { display:block; position:relative; color:#999; text-decoration:none; text-shadow:0 0 2px black; line-height:30px; border-top:1px solid #111; border-right:1px solid #111; padding:0 15px 0 32px; box-shadow:inset 0 0 0 1px #333; /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */ border-radius:1px; } .glossy-selectbox a:nth-child(even) { border-right-width:0; } .glossy-selectbox a:before { content:""; display:block; width:16px; height:16px; position:absolute; top:7px; left:7px; background-color:transparent; background-repeat:no-repeat; background-position:50% 0; } .glossy-selectbox a:hover:before { background-position:50% 100%; } .glossy-selectbox .social-rss:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjE4MjgwMzAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjE4MjgwMjAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlHzXt4AAAFnSURBVHja7JTPRwRxGIdnttQxomujRHQtJZZNLHWK9Ce0HaI/oGN0iOgUaXTqkE2H1Cl1qUvs2lXq0nFELBGdItb0vOv98pra3WyHLjM85vWddz7z/prXj+PY+8vlFwoFUajDPXzAFZzCY7uXwzD0Mmp3wThkYQMe4AmW2olkWjwbhRO4hcFWAj50wwQswB68GZ9puINcqwikBlU4h1UYhi2tiVz9cPmTiAjESgX2IQ/vsA4zUFPfHk1pqFkNpIgr+qVrGIEyTMGL+gzA4W+KKKGWtCvPsAif+ixru+OK2Kvh7hpHyfvMRLJjPrCZjEBeuoG1RMgicqD2ttbGtTjXLAWZyHkTiTjOamuPjN+cE3D5lkybZIxD4+xyvkjMR0OgCJNK0TgcGzuv96o5G3MCdXNo7bKx3Si/mrM+J7Csw1JT2zM/WFL425kfRVHHuyAIgsZP1PE+sG1M90G6D9J98N/74EuAAQBrM499eIKXUgAAAABJRU5ErkJggg==')} .glossy-selectbox .social-facebook:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjE4MjgwNzAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjE4MjgwNjAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpkBkIAAACASURBVHjaYvz//z8DJYAxNTV1L5B2IkPvvlmzZjkzkamZAaaPiQiFziCXImEUQIwB+/BJspDgZKyhzcRAIcDnAkYc/P90c8F/fDZTzQXDwAAWchMQsgt2kGk5WB/jgwcPyHa+vLw82AV7oc4kFe+FeWG0PBgtD0bLg8FQHgAEGAA6pyme0xeFcQAAAABJRU5ErkJggg==')} .glossy-selectbox .social-twitter:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjM1NzQwMDAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjM1NzNGRjAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psm+fpUAAAClSURBVHjaYvz//z8DJYAFxkhLS7MHUl1QbhkQH8SladasWZgGAMEKIJZAYksS4wImJLYEDjbRBpAF8BnwHws+CcT2lLjADBo+FHnhLyUGvADiFKzpAAtgHPBYINmAj5RG4z5Ko7EGiN+RHY3V1dXXgJQeEK+BRhdR0cgIKw8ePnxIdMDJy8tj9YI9NJAwAoqoAmW0PBgtD0bLAyqVB0BAVnkAEGAAd3tFMviqyf8AAAAASUVORK5CYII=')} .glossy-selectbox .social-google:before {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjM1NzQwNDAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjM1NzQwMzAzMUUxMUUxQThDN0E3RjZBMzJBQUI2NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNTQ1NjQ2NjBCMDNFMTExOEFFNUMxQUI0QURFQTMyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MTEwQTQ2RjY1RkVFMDExODA0OEVBREIxOUJCOTU1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pha4bDUAAACFSURBVHjaYkxNTd3LwMDgxAABjED8nwEB8PH3zZo1y5kJSTOpAKyPiYFCwAJ1FgOaM4nms6D5kVTASLEXqBIGDDj8+B+Hv/9T1QVMaLYw4uD/p0sY/McTBvSNBVw2/6eJC0AG7CBTL1gfS3V1NRuR+R+dzwZzwWh5MFoejJYHw6I8AAgwAO50IMDSbJUlAAAAAElFTkSuQmCC')} .glossy-selectbox a:hover { background-color:rgba(0,0,0,.2); color:#ccc; } /* On click, then... */ .glossy-selectbox input:checked + label { color:rgba(255,255,255,.4); transition-duration:.4s; } .glossy-selectbox input:checked + label:before { content:attr(data-focus); } .glossy-selectbox input:checked + label:after { background-color:rgba(0,0,0,.2); box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); } .glossy-selectbox input:checked ~ ul { visibility:visible; opacity:1; }</style> <div class="glossy-selectbox"> <input type="checkbox" /> <label data-default="Follow me" data-focus="Присоединяйтесь ко мне..!!"></label> <ul> <li><a class="social-rss" href="http://feeds.feedburner.com/ххххх" target="_blank">RSS Feed</a></li> <li><a class="social-facebook" href="http://www.facebook.com/ххххх" target="_blank">Facebook</a></li> <li><a class="social-twitter" href="http://www.twitter.com/ххххх" target="_blank">Twitter</a></li> <li><a class="social-google" href="https://plus.google.com/ххххх" target="_blank">Google+</a></li> </ul> </div>
Меняем всё на свои данные, текст и готово. Очень надеюсь, что вам понравились предоставленные социальные виджеты. Не забываем подписываться на обновление моего блога. Спасибо. Удачи.
Виджеты - bloggingbolt
С уважением, Сергей
Сергей! Отрадно видеть, как ваш блог просто стремительно меняется, и все в лучшую сторону! Давний ваш читатель. Не перестаете удивлять! Спасибо.
Привет, Ирина! Спасибо, за приятные моему сердцу слова. Стараюсь делать блоги для людей, а не для машин.Все таки родному bloggeru отдал два года, теперь как видите, пустился во «взрослую жизнь». Давно мечтал открыть блоги на платном хостинге и стать не зависимым. Мечты сбываются. Удачи вам. Заглядывайте в гости почаще, буду очень рад таким как Вы, читателям. 🙂
Очень интересная статья, и кнопочки оригинальные. Спасибо.
Привет!Для вас стараюсь.
Сергей, согласен с мнением Ирины на 5 баллов 🙂 Мне тоже такие виджеты нравятся, но все никак руки не доходят поставить, но информацию в твоем блоге мотаю всегда на ус 😉 Так что спасибо тебе за старания 🙂
Привет,Эдуард!Спасибо за хороший отзыв.Буду и дальше стараться.
А вконтакте почему нет?)