Tạo nút bàn phím (keyboard) trong bài viết blogger

Nếu quan sát, bạn sẽ thấy blog sử dụng CSS nút bàn phím và các nút lệnh. Nghĩa là có một khung nhỏ bao quanh text, nhìn rất giống biểu tượng nút bàn phím. Blog sẽ hướng dẫn bạn làm điều này

Cài đặt

1. Bạn vào Blogger Dashboard > Edit HTML

2. Nhấn tổ hợp phím Ctrl+F và tìm đến thẻ ]]></b:skin>

3. Dán code sau vào trước thẻ ]]></b:skin>

4. Code cho nút bàn phím

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

5. Code cho nút lệnh

lenh{
border:1px solid gray;
font-size:0.9em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:4px 0px;
display: inline-block;
padding:1px 5px;
color: #565b56;
background-color: #aeeaab;
}

Ở đây phim là chỗ mà bạn có thể đặt theo tên mà bạn muốn, không nên có khoảng cách, càng ngắn càng tốt. Xem cách sử dụng bên dưới.

Cách sử dụng

Để sử dụng, bạn đặt text cần bao khung vào giữa hai thẻ <phim></phim> hoặc <lenh></lenh>. Ví dụ

<phim>Ctrl</phim>

Ở đây bạn có thể chỉnh thuộc tính theo ý riêng của bạn,ví dụ như màu sắc của nút lệnh, độ rộng, kích thước font chữ,... Bạn có thể dùng addon "FireBug" của Firefox để chỉnh trực tiếp trên trình duyệt. Mình sẽ post một bài chi tiết về điều này sau.

Chúc bạn thành công.