Bạn có nhận thấy rằng rất nhiều Website của các thương hiệu lớn như Facebook, Youtube… sử dụng màu sắc thương hiệu riêng của họ cho thanh địa chỉ trong trình duyệt trên thiết bị di động. Tò mò, nên mình đã lên google tìm kiếm một vòng và thấy điều này khá là đơn giản. Thủ thuật này được gọi là Meta Theme Color, và theo Google Developers, nó hoạt động trên Chrome, Firefox và Opera.

Cach Doi Mau Sac Thanh Dia Chi Trinh Duye



 

Trước và sau khi chỉnh sửa



Sử dụng WordPress

Chèn code dưới vào file function.php trong thư mục gốc theme của bạn đang sử dụng.

function tieC_address_bar_color() { echo '<meta name="theme-color" content="#2F4468">';
echo '<meta name="apple-mobile-web-app-status-bar-style" content="#2F4468">';
echo '<meta name="msapplication-navbutton-color" content="#2F4468">'; }
add_action( 'wp_head', 'tieC_address_bar_color' );

Không sử dụng WordPress

Nếu website của bạn không sử dụng WordPress, thì bạn chèn code dưới trong cặp thẻ <head>…</head>

<meta name="theme-color" content="#2F4468">

bổ sung thêm iOS

 

Azdigi

<meta name="apple-mobile-web-app-status-bar-style" content="#2F4468">

Hoặc code JavaScript

<script> jQuery("meta[name='theme-color']").attr("content", "#2F4468"); </script>

Đừng quên đổi #2F4468 thành mã màu mà bạn muốn đổi.

Nhấp nháy nhiều màu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { var i = 0; var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF"]; setInterval(function() { var color = colors[i = i++ > 4 ? 0 : i]; $("meta[name='theme-color']").attr('content', color); $("#x").text(color); }, 500); }); </script>

Lưu ý: Không hoạt động ở chế độ Ẩn danh vì thanh địa chỉ nó có màu riêng.

Lời kết

Quá tuyệt vời phải không nào, nếu bạn cũng muốn đổi màu thanh địa chỉ như mình hãy làm theo nhé. Cảm ơn bạn đã ghé thăm blog của mình, chúc các bạn thành công!

5/5 - (1 bình chọn)



Nhận thông báo qua email
Nhân thông báo cho
guest
0 Bình luận
Inline Feedbacks
View all comments
0
Bạn thích bài viết này, viết bình luận nhé.x