Góc Ribbon cho Blogger
Các blogger có thể có thể muốn thêm một dải ruy băng ở góc blog của họ và hướng dẫn này sẽ chỉ cho họ làm thế nào họ có thể dễ dàng thêm một dải ruy băng màu xanh lá cây ở góc blog của họ. băng này được tạo thành từ Widgets CSS và rất ít số lượng mã hóa do đó nó là nhanh chóng tải. Không giống như các băng khác không có hình ảnh được sử dụng vì chúng làm tăng thời gian tải trang. Bạn có thể xem demo của băng này ở bên cạnh góc phải của bài viết này. Bạn có thể chỉnh sửa văn bản được hiển thị trong băng theo sự thuận tiện của bạn. Để thêm tiện ích này vào blog của bạn làm theo các bước dưới đây.
Bạn có thể thêm các băng trên blog như một toàn bộ hoặc trên một yếu tố cụ thể như <div id="example"> .
Để thêm này trên bất kỳ yếu tố cụ thể chỉ cần dán mã dưới đây đưa ra ngay bên dưới các yếu tố bắt đầu.
Để thêm các widget trên blog như một đi toàn bộ tới Blog Title → Giao diện → Thêm Widget → HTML / JavaScript và dán mã dưới đây vào hộp.
<div class="ribbon-wrapper-green"><div class="ribbon-green">DEMO</div></div>
<style>
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 99999;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
</style>
Thay đổi DEMO với văn bản mong muốn của riêng bạn. Sau khi chỉnh sửa mã lưu mẫu / Widget. Bạn đang thực hiện bây giờ. Bây giờ bạn và truy cập của bạn có thể thấy điều này thanh lịch CSS băng trên góc của blog của bạn.
DEMO