Thêm giao diện nút bàn phím vào bài viết cho Blogger

Hôm nay tại bài viết này mình xin hướng dẫn các bạn thêm giao diện bàn phím vào bài đăng của bạn. Với giao diện bàn phím này, mình nghĩ nó sẽ giúp website của bạn trong đẹp và bắt mắt người dùng hơn, giúp người dùng đỡ rối mắt hơn trong việc xác định nút nào trên bàn phím, và có vẻ rất thích hợp với bạn nào làm Blog hướng dẫn về các thủ thuật trên máy tính. Giao diện này chỉ sử dụng CSS3, không thêm bất cứ phụ gia nào khác nên các bạn có thể yên tâm về tốc độ tải trang.

Ctrl + F

Hướng dẫn thêm giao diện nút bàn phím vào bài viết cho Blogger

Đầu tiên chúng ta sẽ sao chép toàn bộ đoạn CSS bên dưới đây, sau đó vào Mẫu >> Chỉnh sửa HTML >> dán toàn bộ vào trên thẻ ]]></b:skin>

banphim{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Sau khi chèn hoàn tất các bạn lưu lại mẫu. Việc cần làm bây giờ là mỗi khi đăng bài viết mới các bạn đăng theo cấu trúc sau.

<banphim>Ctrl</banphim> + <banphim>F</banphim>

Chỉ như việc làm đơn giản như trên bạn đã làm cho các chữ mã chỉ dẫn bàn phím tại bài viết của bạn thật dễ nhìn, dễ hiểu trong mắt khách truy cập.