Содержание
Привет, ребята, я снова с новым виджетом кнопок социальных сетей для WordPress . Виджет уникален и привлекателен с приятным эффектом наведения. Он включает в себя все основные кнопки социальных сетей и не замедляет ваш блог.
Нажмите здесь для демонстрации .
Теперь давайте начнем.
Шаг 1
Скачайте иконки отсюда .
Шаг 2
Извлеките и поместите его в папку с изображениями вашей темы.
Шаг 3
Добавьте ниже CSS к вашей теме style.css файл.
style.css
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
.icons a {
дисплей : встроенный блок ;
ширина : 24px ;
высота : 24px ;
поле : 10 пикселей ;
выравнивание по вертикали : середина ;
-опереход : все .3с ;
-моз-переход : все .3с ;
-webkit-transition : все .3с ;
-ms-переход : все .3с ;
}
.icons a.twitter { фон : url ( images / social / twitter.png ) оставил Топ без повтора ; }
.icons a.dribbble { фон : url ( images / social / dribbble.png ) оставил Топ без повтора ; }
.icons a.rss { фон : url ( images / social / rss.png ) оставил Топ без повтора ; }
.icons a.pinterest { фон : url ( images / social / pinterest.png ) оставил Топ без повтора ; }
.icons a.digg { фон : url ( images / social / digg.png ) оставил Топ без повтора ; }
.icons a.flickr { фон : url ( images / social / flickr.png ) оставил Топ без повтора ; }
.icons a.forrst { фон : url ( images / social / forrst.png ) оставил Топ без повтора ; }
.icons a.vimeo { фон : url ( images / social / vimeo.png ) оставил Топ без повтора ; }
.icons a.reddit { фон : url ( images / social / reddit.png ) оставил Топ без повтора ; }
.icons a.linkedin { фон : url ( images / social / linkedin.png ) оставил Топ без повтора ; }
.icons a.facebook { фон : url ( images / social / facebook.png ) оставил Топ без повтора ; }
.icons a.paypal { фон : url ( images / social / paypal.png ) оставил Топ без повтора ; }
.icons a.stumbleupon { фон : url ( images / social / stumbleupon.png ) оставил Топ без повтора ; }
.icons a.email { фон : url ( images / social / email.png ) оставил Топ без повтора ; }
.icons a.deviantart { фон : url ( images / social / deviantart.png ) оставил Топ без повтора ; }
.icons a.netvibes { фон : url ( images / social / netvibes.png ) оставил Топ без повтора ; }
.icons a.yahoo { фон : url ( images / social / yahoo.png ) оставил Топ без повтора ; }
.icons a.github { фон : url ( images / social / github.png ) оставил Топ без повтора ; }
.icons a.addthis { фон : url ( images / social / addthis.png ) оставил Топ без повтора ; }
.icons a.behance { фон : url ( images / social / behance.png ) оставил Топ без повтора ; }
.icons a.blogger { фон : url ( images / social / blogger.png ) оставил Топ без повтора ; }
.icons a.slashdot { фон : url ( images / social / slashdot.png ) оставил Топ без повтора ; }
.icons a.technorati { фон : url ( images / social / technorati.png ) оставил Топ без повтора ; }
.icons a.googleplus { фон : url ( images / social / googleplus.png ) оставил Топ без повтора ; }
.icons a.apple { фон : url ( images / social / apple.png ) оставил Топ без повтора ; }
.icons a.myspace { фон : url ( images / social / myspace.png ) оставил Топ без повтора ; }
.icons a.sharethis { фон : url ( images / social / sharethis.png ) оставил Топ без повтора ; }
.icons a.yelp { фон : url ( images / social / yelp.png ) оставил Топ без повтора ; }
.icons a.delicious { фон : url ( images / social / tasty.png ) оставил Топ без повтора ; }
.icons a.lastfm { фон : url ( images / social / lastfm.png ) оставил Топ без повтора ; }
.icons a.youtube { фон : url ( images / social / youtube.png ) оставил Топ без повтора ; }
.icons a.skype { фон : url ( images / social / skype.png ) оставил Топ без повтора ; }
.icons a.tumblr { фон : url ( images / social / tumblr.png ) оставил Топ без повтора ; }
.icons a.aim { фон : url ( images / social / aim.png ) оставил Топ без повтора ; }
.icons a.google { фон : url ( images / social / google.png ) оставил Топ без повтора ; }
.icons a: hover { background-position : оставил -34px ; }
|
Шаг 4
Перейти к боковой панели виджета добавить код ниже.
|
1
2
3
4
5
6
7
8
|
< div class = icons >
< а класс = твиттер href = http://twitter.com/Crunchify target = _blank > < / a >
< а класс = фейсбук href = http://facebook.com/Crunchify target = _blank > < / a >
< а class = googleplus href = https://plus.google.com/+CrunchifyDotCom target = _blank > < / a >
< а класс = интерес href = https://www.pinterest.com/Crunchify/crunchify-articles target = _blank > < / a >
< а class = rss href = https://feeds.feedburner.com/Crunchify target = _blank > < / a >
< а класс = электронная почта href = https://feedburner.google.com/fb/a/mailverify?uri=Crunchify target = _blank > < / a >
< / div >
|
И все готово. Убедитесь, что вы обновляете свои ссылки в социальных сетях.
Нажмите здесь для демонстрации .
0.00 (0%) 0 votes
