Tạo Flat UI Ribbon Cho Tiêu Đề Blogger - Blogspot

Thông thường thì các tiêu đề trang hay bài viết trên blog chỉ có chữ ko nên nhìn hơi giản dị. Vì vậy hôm nay mình sẽ hướng dẫn các bạn tạo ribbon cho tiêu đề. Hiểu đơn giàn chữ trên hình

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Tạo tiêu đề nổi bật
• .....

Thực Hiện

1. Các bạn đăng nhập vào Blogger -> Mẫu -> Chỉnh sửa HTML

2. Sau đó Ctrl + F tìm từ thẻ đóng ]]></b:skin> hoặc </style>

3. Chèn toàn bộ code sau vào trước một trong hai thẻ đóng trên

CSS.arrange-ribbon {
    position: relative;arrange
    z-index: 1;
}

.flatuiribbon {
    font-size: 16px !important;
    width: 50%;
    position: relative;
    background: #4FA8DC;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.flatuiribbon:before, .flatuiribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #4399dc;
    z-index: -1;
}

.flatuiribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.flatuiribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.flatuiribbon .flatuiribbon-content:before, .flatuiribbon .flatuiribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2a82b6 transparent transparent transparent;
    bottom: -1em;
}

.flatuiribbon .flatuiribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.flatuiribbon .flatuiribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

4.Lưu mẫu lại.
5. Để sữ dụng thì khi viết bài đăng các bạn chuyển sang chế độ HTML và chèn code HTML sau vào đó

HTML<div class="arrange-flatuiribbon"> 
  <h1 class="flatuiribbon">
    <strong class="flatuiribbon-content">Hi Everyone</strong>
  </h1>
</div>

6. Sau đó viết tiếp bài và xuất bản xem thành quả

Demo
click to view

Nâng Cao

Tìm chữ 

Hi Everyone  Để thay đổi thành chữ bạn muốn

Thay đổi màu sắc. Ở đây có 3 màu cùng tông màu chính nếu các bạn để ý thì sẽ thấy

• Màu hình chữ nhật dài(không phải hai cái rìa bên ngoài) 

Tìm dòng mả màu #4FA8DC rồi thay đổi màu bạn muốn (ở đây nên chọn màu nhạt hơn)

• Màu cái bóng tam giác nhỏ ở dưới 

Tìm dòng chữ #2a82b6  rồi thay đổi màu bạn muốn (nên chọn màu đậm hơn)

• Màu cái còn lại là cái rìa ngoài cùng

Tìm chữ #4399dc và thay đổi là xong

Vào đây để lấy màu 

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Flat UI Ribbon Cho Tiêu Đề Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.