Разноцветный виджет социальных закладок для блога

---

Предлагаю оригинальный виджет социальных закладок для боковых панелей блога

Всем здравствуйте. Хочу предложить владельцам блогов необычный виджет социальных закладок с возможностью настройки цветового фона.

Виджет легко установить и настроить. Установка в черновике 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+, выделенное коричневым-можете написать свой текст. 

Вроде ничего не забыла. На этом у меня на сегодня все. Не забывайте делиться со своими друзьями. До свидания.

Рекомендуемый контент: