Thêm các biểu tượng social vào WordPress bằng Simple Social Icons

Admin

Admin

Tổng số bài gửi : 34
Points : 44099
Reputation : 0
Join date : 30/04/2012

Thêm các biểu tượng social vào WordPress bằng Simple Social Icons

Simple
Social Icons đơn giản và dễ sử dụng. Có thể tùy chỉnh các thiết lập của
bạn để hướng người dùng đến các trang social (mạng xã hội) của bạn.

Thêm các biểu tượng social vào WordPress bằng Simple Social Icons Simple-icons

Plugin
cho phép bạn lựa chọn mạng xã hội nào được hiển thị, tùy chỉnh màu sắc,
kích cỡ biểu tượng đại diện cũng như căn chỉnh trái phải cho mạng xã
hội đó. Tất cả thiết lập được thực hiện tại mục quản lý widget và tại
form thiết lập của widget mà không cần phải thiết lập thêm ở bất kỳ đâu.
Nếu
bạn muốn thêm các icon riêng biệt bạn hãy chuẩn bị các file định dạng
PNG trong suốt với kích cỡ 48×48, 32×32 và 24×24. Ví dụ như các icon
sau:

32x32_facebook.png
32x32_googleplus.png
32x32_linkedin.png
32x32_pinterest.png
32x32_rss.png
32x32_twitter.png

Sau đó copy các file này vào thư mục images của theme của bạn và tiến hành định dạng css cho các icon này.
Áp dụng sau chỉ đối với theme Genesis, các bạn có thể tùy chỉnh để phù hợp với theme của mình

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

/* Social Media Icons
------------------------------------------------------------ */

#header ul li.social-facebook,
#header ul li.social-googleplus,
#header ul li.social-linkedin,
#header ul li.social-pinterest,
#header ul li.social-rss,
#header ul li.social-twitter {
float: left;
}

#header ul li.social-facebook a,
#header ul li.social-facebook a:hover,
#header ul li.social-googleplus a,
#header ul li.social-googleplus a:hover,
#header ul li.social-linkedin a,
#header ul li.social-linkedin a:hover,
#header ul li.social-pinterest a,
#header ul li.social-pinterest a:hover,
#header ul li.social-rss a,
#header ul li.social-rss a:hover,
#header ul li.social-twitter a,
#header ul li.social-twitter a:hover {
display: block;
height: 32px;
margin: 0 0 0 10px;
padding: 0;
text-indent: -9999px;
width: 32px;
}

#header ul li.social-facebook a {
background: #333 url(images/32x32_facebook.png);
}

#header ul li.social-facebook a:hover {
background: #000 url(images/32x32_facebook.png);
}

#header ul li.social-googleplus a {
background: #333 url(images/32x32_googleplus.png);
}

#header ul li.social-googleplus a:hover {
background: #000 url(images/32x32_googleplus.png);
}

#header ul li.social-linkedin a {
background: #333 url(images/32x32_linkedin.png);
}

#header ul li.social-linkedin a:hover {
background: #000 url(images/32x32_linkedin.png);
}

#header ul li.social-pinterest a {
background: #333 url(images/32x32_pinterest.png);
}

#header ul li.social-pinterest a:hover {
background: #000 url(images/32x32_pinterest.png);
}

#header ul li.social-rss a {
background: #333 url(images/32x32_rss.png);
}

#header ul li.social-rss a:hover {
background: #000 url(images/32x32_rss.png);
}

#header ul li.social-twitter a {
background: #333 url(images/32x32_twitter.png);
}

#header ul li.social-twitter a:hover {
background: #000 url(images/32x32_twitter.png);
}

Thêm các biểu tượng social vào WordPress bằng Simple Social Icons Social-media-icons

Các khu vực bạn có thể thêm widget này vào là: phần bên phải của header, sidebar, và footer widget đối với các theme Genesis
Giao diện thiết lập widget:

Thêm các biểu tượng social vào WordPress bằng Simple Social Icons Simple-social-icons-widget

Plugin này có thể chạy trên bất cứ theme nào của wordpress và có tải về tại địa chỉ : Simple Social Icons

Thêm các biểu tượng social vào WordPress bằng Simple Social Icons

1 Thêm các biểu tượng social vào WordPress bằng Simple Social Icons Wed May 02, 2012 7:32 pm

Admin