Содержание
Создание «липкого» виджета боковой панели, который прокручивается вместе с вами…
Hello Bar — это веселая, ненавязчивая, но в то же время хорошо видимая веб-панель инструментов, которая находится в верхней части вашего веб-сайта и является отличным способом привлечения пользователей.
Я использовал БЕСПЛАТНУЮ версию Hello Bar в течение дня, чтобы отобразить самую актуальную запись, и сегодня я получил от них электронное письмо — Вы прошли 1-й уровень Hello Bar!
Хотя у них есть очень хорошая Премиум-функция, я not quite готов к этому. Итак, я подумал о Sticky Sidebar "Trending Now" раздел в моем блоге. Если кто-то из вас заинтересован в том, чтобы иметь образец липкой секции на боковой панели WordPress, просто используйте приведенный ниже код, и все будет готово.
Другие должны читать:
- Я выбираю BitBucket вместо Github для моих профессиональных плагинов WordPress. Зачем?
- Как обезопасить свой плагин WordPress? Предотвратить уязвимость CSRF
Пример скриншота:
Этот раздел трендов останется и прокручивается вместе с вашим свитком
Поместите ниже в вашу тему WordPress style.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
.wrapper {
поле : 20px авто ;
фон : URL ( https : //crunchify.com/
ширина : 214 пикселей ;
высота : 90px ;
пограничный радиус : 10 пикселей ;
-webkit-box-shadow : 0px 0px 8px ргба ( 0,0,0,0,3 ) ;
-moz-box-shadow : 0px 0px 8px ргба ( 0,0,0,0,3 ) ;
коробка-тень : 0px 0px 8px ргба ( 0,0,0,0,3 ) ;
положение : родственник ;
z-индекс : 90 ;
набивка : 0px 15 пикселей ;
}
.ribbon-wrapper-green {
ширина : 85px ;
высота : 88px ;
переполнение : скрытый ;
положение : абсолютный ;
верх : -3px ;
правильно : -3px ;
}
.ribbon-green {
шрифт : смелый 15px Без засечек ;
цвет : # 333 ;
выравнивание текста : центр ;
текстовая тень : rgba ( 255 255 255,0,5 ) 0px 1px 0px ;
-webkit-transform : повернуть ( 45 градусов ) ;
-моз-преобразование : повернуть ( 45 градусов ) ;
-ms-преобразование : повернуть ( 45 градусов ) ;
-о-преобразование : повернуть ( 45 градусов ) ;
положение : родственник ;
набивка : 7px 0 ;
слева : -5px ;
верх : 15 пикселей ;
ширина : 120px ;
цвет фона : # BFDC7A ;
фоновое изображение : -Вебкит-градиент ( линейный, оставил Топ, оставил низ, из ( # BFDC7A ) , к ( # 8EBF45 ) ) ;
фоновое изображение : -webkit-linear-Gradient ( вверху, # BFDC7A, # 8EBF45 ) ;
фоновое изображение : -моз-линейно-градиентный ( верх, # BFDC7A, # 8EBF45 ) ;
фоновое изображение : -ms-линейный градиент ( верх, # BFDC7A, # 8EBF45 ) ;
фоновое изображение : -o-линейный градиент ( верх, # BFDC7A, # 8EBF45 ) ;
цвет : # 6a6340 ;
-webkit-box-shadow : 0px 0px 3px ргба ( 0,0,0,0,3 ) ;
-moz-box-shadow : 0px 0px 3px ргба ( 0,0,0,0,3 ) ;
коробка-тень : 0px 0px 3px ргба ( 0,0,0,0,3 ) ;
}
.ribbon-green: до, .ribbon-green: после {
содержание : ;
граница вершины : 3px твердый # 6e8900 ;
граница слева : 3px твердый прозрачный ;
Граница-право : 3px твердый прозрачный ;
положение : абсолютное ;
дно : -3px ;
}
.ribbon-green: перед {
слева : 0 ;
}
.ribbon-green: после {
правильно : 0 ;
}
|
Идти к Widget Section и создайте новый виджет с кодом ниже:
|
1
2
3
4
5
|
< div class = wrapper >
<Бр>
< а href = https://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/ > Простой JSON для Скрипт конвертера таблиц HTML < / a >
< div class = ribbon-wrapper-green > < div class = ribbon-green > Тенденции < / div > < / div >
< / div >
|
Как обычно, дайте мне знать, если вы видите какие-либо проблемы с этим ..
Живой пример:
ссылка jsfiddle: http://jsfiddle.net/H6rQ6/8540/
0.00 (0%) 0 votes
