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. 

thế đeo nào em vội quên đi và thế đéo nào em đưa mùa thu đi

Tải về

...GHI CHÚ...

...GHI CHÚ...

DEMO

Screenshot

Live Demo

http://www23.zippyshare.com/v/kQHHojsZ/file.html

Download

http://www23.zippyshare.com/v/kQHHojsZ/file.html
http://www23.zippyshare.com/v/kQHHojsZ/file.html
Cách sử dụng

1. HƯỚNG DẪN VÀ CÁCH SỬ DỤNG FONT CHỮ NÀY

Hiện nay một số trang web đã làm tiêu đề rất đẹp Ctrl + S

TRÊN ĐÂY LÀ BÀI CHIA SẺ: - Nếu thấy hay đừng quên like share hoặc đánh dấu trang để xem lại nhé!TÔI YÊU INTERNET VÀ CÁC BẠN !

Bài này có ích đối với bạn?

Có

Không

CẢM ƠN BẠN! Phản hồi của bạn đã được ghi nhận! Chúc bạn vui!