Hướng dẫn bạn đặt biểu tượng liên hệ góc phải trang web, minh họa bằng cách làm thật vào chính trang web này để bạn có thể hình dung từ bước làm HTML, CSS cho đến nhúng vào WordPress.
Hãy sử dụng trình soạn thảo plain text
Những bài thực hành mang tính chỉnh chọc như này chúng tôi thường viết dưới dạng làm để học vì thế mà luôn cổ vũ nên làm cách thô sơ nhất, sử dụng “công cụ lao động” sơ khai để hiểu rõ bản chất của bài học. Chúng tôi luôn né các công cụ nhắc bài như Visual Studio Code hoặc những trình soạn thảo có gợi ý các tag HTML.
Tạo một file HTML có tên contact.html có nội dung gần như sau:

Tiếp tục, soạn file mystyle.css có nội dung:


Cần đặt file mystyle.css vào đúng thư mục css, nếu không, tính tương quan giữa nó với các file hình ảnh biểu tượng của các liên hệ sẽ không thể hiển thị. Lần nữa chúng tôi nói rằng đây là kiến thức tin học
Hãy tải các file icon bên phần thảo luận về nút liên hệ để có thể chép vào thư mục img để các icon hiển thị cho đúng. Bạn được khuyến khích tự tìm icon cho riêng mình để các nút trông mỹ thuật hơn hoặc đạt ý đồ của bạn.
Những gì đạt được cho đến nay?
Mở file contact.html với trình duyệt web của bạn, nhìn ở góc phải – dưới của trang, bạn thấy gì? Nó sẽ trông “quê một cục” màu sắc quái lạ?

Có được 4 mục liên hệ tương ứng với các công cụ thường sử dụng nhất: Zalo, Facebook Messenger, điện thoại và cuối cùng là email.
Ở đây, chúng ta thấy rằng click chuột vào các icon chẳng có tác dụng gì. Điều đó chứng tỏ icon chỉ mởi để trang trí cho vui mà thôi, hoàn toàn chưa có tác dụng nào trong thực tế.
Chỉnh chút ít về HTML, CSS, giả sử như hình dưới:


Vậy là các biểu tượng khi rê chuột vào đã hiện hình bàn tay và có thể click để đi đến liên kết.
Thêm vào WordPress – ngay site này luôn cho dễ hình dung
Các bước mà KACBT thực hiện như sau: truy cập mục Appearance -> Theme File Editor trong khu vực bảng điều khiển Admin (Admin Dashboard) nhìn bên góc phải thấy ngay mục có file functions.php, click file này để mở ra một cửa sổ soạn thảo code:

Đến đây, nếu bạn chạy ra trang chủ khó ăn cát bê tông để xem sẽ thấy có một dãy chấm chấm màu đen ở góc trái – dưới của trang. Ta tạm cho rằng HTML được thêm vào chạy tốt, đoạn mã trên không có thiếu sót về mặt cú pháp PHP.
Tiếp tục, nhìn ở dải bên phải, ngay chỗ lúc này click file functions.php, nhìn thấy file styles.css thì click nó để có thể soạn thêm CSS. Nội dung CSS chính là bê cái mystyles.css của ta đặt vào. Tuy nhiên, vì KACBT không chủ trương cái nút màu mè nên có chỉnh cho đơn giản bớt, giờ chỉ còn như sau:


Đến đây, xem như phần thêm các biểu tượng liên hệ vào website của KACBT xong được 50 phần trăm rồi. Bạn đã nhìn thấy chưa? Còn năm mươi phần trăm nữa ở đâu? Đó chính là dành cho mobile. Đoạn mã đó như sau:

Khi chạy lên sẽ thấy một cái gì đó nho nhỏ khiến chưa hoàn thiện. Nghĩa là lúc này thanh liên hệ nằm ở đáy màn hình điện thoại, lúc đó margin-bottom thật vô nghĩa, cần phải sửa dòng:
margin-bottom: 10px;
biến thành:
margin-right: 10px;
Cải tiến dành cho bạn như là bài tập về nhà
Bạn có thấy rằng một dải “nền đỏ chữ vàng” trông quá kinh dị không? Hãy cái tiến cho nó đẹp hơn, đó có thể là không còn nền cho khối contact nữa mà chỉ còn nền cho các nút icon mà thôi. Tìm icon khác đẹp hơn thay vào. Khi rê chuột vào có hiệu ứng vui mắn hơn.
Bạn cũng có thêm đoạn CSS dành cho thiết bị di động, lúc này có thể dời các icon về đáy màn hình và trải theo chiều ngang thay vì chiều đứng. Hãy thử sức xem bạn có làm được không nhé?