Предлагаю оригинальный виджет социальных закладок для боковых панелей блога
Всем здравствуйте. Хочу предложить владельцам блогов необычный виджет социальных закладок с возможностью настройки цветового фона.
Виджет легко установить и настроить. Установка в черновике blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить.
Пример посмотрите в демо блоге справа, прокрутите страницу немного вниз, под гаджетом ярлыки. О настройках читайте ниже. Для начала давайте скопируем код:
<style type='text/css'>
.wg-roseicwidget { width: 250px; margin: -10px; text-decoration: none; }
.wg-roseicwidget ul { margin: 0; padding: 0; text-decoration: none;}
.wg-roseicwidget ul li { list-style:none; padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a { color: #fff; display:block; text-decoration: none;}
.wg-roseicwidget ul li a:hover { color: #c9c9c9; background-color: #333; text-decoration: none; }
.wg-roseicwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.wg-roseicwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="wg-roseicwidget">
<ul>
<li><a class="facebook" href="https://www.facebook.com/olga.protasova">Присоединяйтесь к нам на Facebook</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/blogspot/tPD">Подпишитесь на RSS канал</a></li>
<li><a class="twitter" href="https://twitter.com/viola">Следуйте за мной на Twitter</a></li>
<li><a class="google" href="https://plus.google.com/+OlgaProtasova">Присоединяйтесь ко мне в Google +</a></li>
</ul>
</div>
Теперь о настройках: width: 250px;-ширина виджета; выделенное коричневым цветом-фон полей закладок; olga.protasova-адрес аккаунта или личной странички facebook; blogspot/tPD-адрес канала RSS; viola-адрес аккаунта Twitter; +OlgaProtasova-адрес аккаунта или личной странички в Google+, выделенное коричневым-можете написать свой текст.
Вроде ничего не забыла. На этом у меня на сегодня все. Не забывайте делиться со своими друзьями. До свидания.
Вроде ничего не забыла. На этом у меня на сегодня все. Не забывайте делиться со своими друзьями. До свидания.
Рекомендуемый контент: