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



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


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

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

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




Автор статьи ✎ Olga Protasova Выпуск ✹ 4/24/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *