Trang web của bạn đang diễn ra một chương trình khuyến mại hay giveaway và bạn muốn giới thiệu nó tới bạn đọc, hay đơn giản bạn muốn người đọc chú ý tới mọi người một thông báo nào đó. Ý tưởng đầu tiên lóe lên trong đầu chắc hẳn là sử dụng Hello Bar. Đúng vậy. Hello Bar là một thanh thông báo trên đầu trang, cố định khi người dùng cuộn xuống. Hello Bar là một hình thức tuyệt vời thu hút ngay từ cái nhìn đầu tiên của khách truy cập, và bạn có sử dụng các plugin hoặc tự code để tạo Hello Bar cho blog của mình.
Như mình đã nói bên trên, để tạo Hello bar cho WordPress bạn có 2 cách. Hôm nay mình sẽ hướng dẫn các bạn tự tạo cho mình Hello Bar thật ưng ý.
Đối với các Child Theme của Genesis
Các bạn có thể thêm đoạn code sau vào cuối file functions.php của theme mà bạn đang sử dụng:
function cswp_add_genesis_bar() {?><div id="genesisbar-pusher"></div><div id="genesisbar-wrapper"> <div id="genesisbar-container"> Đây là nội dung của Hello bar. Các bạn có thể dùng HTML. </div></div><?php}add_action( 'genesis_before', 'cswp_add_genesis_
function cswp_add_genesis_bar() {
?>
<div id="genesisbar-pusher"></div>
<div id="genesisbar-wrapper">
<div id="genesisbar-container">
Đây là nội dung của Hello bar. Các bạn có thể dùng HTML.
</div>
</div>
<?php
}
add_action( 'genesis_before', 'cswp_add_genesis_
Sau đó, bạn cần tạo stylesheet cho Hello Bar. Mở file style.css và thêm đoạn code sau.
/*Hellobar Genesis----------------------------------- */ #genesisbar-pusher { height: 33px;} #genesisbar-wrapper { position:fixed; width: 100%; top: 0px; left: 0px; background-color: #eb593c; color: white; text-align: center; line-height: 30px; font-size: 16px; font-family: Georgia; border-bottom: 3px solid #fff; -webkit-box-shadow: 0 8px 6px -6px #999; -moz-box-shadow: 0 8px 6px -6px #999; box-shadow: 0 8px 6px -6px #999; padding: 10px; } #genesisbar-container a { background-color: #888; color: #fff; text-decoration: none; line-height: 30px; padding: 8px; border-radius: 3px; margin-left: 7px; font-size: 14px;} #genesisbar-container a:hover { background-color: #1e8cbe;} .admin-bar #genesisbar-wrapper { top: 32px;}
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
/*
Hellobar Genesis
----------------------------------- */
#genesisbar-pusher {
height: 33px;
}
#genesisbar-wrapper {
position:fixed;
width: 100%;
top: 0px;
left: 0px;
background-color: #eb593c;
color: white;
text-align: center;
line-height: 30px;
font-size: 16px;
font-family: Georgia;
border-bottom: 3px solid #fff;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
padding: 10px;
}
#genesisbar-container a {
background-color: #888;
color: #fff;
text-decoration: none;
line-height: 30px;
padding: 8px;
border-radius: 3px;
margin-left: 7px;
font-size: 14px;
}
#genesisbar-container a:hover {
background-color: #1e8cbe;
}
.admin-bar #genesisbar-wrapper {
top: 32px;
}
Ok. Bạn đã có Hello Bar rồi đó. Giờ bạn có thể tùy chỉnh lại nội dùng và màu sắc sao cho phù hợp với trang web là được
Còn đối với các theme khác, các bạn có thể sử dụng một trong các plugin sau để tạo Hello Bar.
WordPress Notification Bar – Miễn phí
WordPress Easy Sticky Notification Bar – Miễn phí
WPFront Notification Bar – Miễn phí
WP Notification Bar Pro – Trả phí – Download v1.1.7
Chúc các bạn thành công!
Nguồn: Việt Hùng admin https://chiasewp.com/ 
Bình Luận