Cách Tạo Number List Độc Đáo Trong Bài Viết Cho Blogger

Trong công cụ viết bài của Blogger chúng ta có thể tạo danh sách bằng dạng số chỉ có thể dùng công cụ có sẵn của họ. Đây là Tool hỗ trợ khi bạn muốn liệt kê một danh sách điều gì đó trong nội dung.

Tuy nhiên bạn có thấy nhàm chán khi chỉ có mấy con số đó, đúng là nó nhàm chán thật. Bên cạnh đó bạn muốn tạo ra cho Blog mình một Style với những number list khác biệt nhưng bạn không rành về Code. Và đây là bài viết cung cấp cho bạn 3 Style number list để làm thay đổi trang web, Blog của mình lạ mắt, đẹp hơn.

LÀM THẾ NÀO ĐỂ TẠO NUMBER LIST MỚI CHO BLOGSPOT?

Rất đơn giản bạn chỉ cần thêm một vài đoạn CSS trong HTML là ok thôi.

Bước 1: Truy cập vào Blogger Dashboard > Mẫu > Edit HTML

Bước 2: Tìm trong HTML thẻ ]]></b:bin> với tổ hợp phím CTRL + F

Bước 3: Gắn đoạn CSS bên dưới vào trên thẻ ]]></b:bin> , có 3 Sltye cho bạn lựa chọn. Sau đó Lưu mẫu và xem bài viết mình có gì thay đổi khi sử dụng Number List không nha.

Slyle 1

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'roboto'; /* font chữ và size */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
} 
.post ol li:hover:before{
transform: rotate(360deg);
} 
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;   
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* màu chữ */
background: #00afee; /* màu background */
border: .2em solid #fff; /* màu border */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Style 2

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{ 
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2; /* màu bottom border của chữ */
background:#f2f2f2; /* màu background của chữ */
text-indent:14px;
}
.post ol li:before{ 
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* size của số */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff; /* color của số */
text-align:left;
background:#00afee; /* background color của số */
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* màu của triangle behind */
}

Style 3

 .post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'roboto'; /* font và size của chữ */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;   
left: -30px;
top: 50%;
margin-top: -1em;
color: #fff; /* màu của số */
background: #00afee; /* màu background của số */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em;   
top: 50%;
width: 0; 
height: 0; 
border-top: 8px solid transparent;
border-bottom: 8px solid transparent; 
border-left:8px solid #00afee; /* màu background của the right arrow*/
}

Lưu ý: các mã màu mình in đậm các bạn có thể thay đổi được và bạn có thể lựa chọn cho mình các màu sắc yêu thích hay màu sắc thương hiệu của doanh nghiệp, để tạo cho Blog mình một phong các riêng. Chúc bạn tạo một Number List trong BlogSpot thành công!

>>> Cách Hiển Thị Bình Luận Trong Blog
>>> Làm Website Kéo Thả Với Weebly
>>> Cách SEO Hình Ảnh Lên TOP Google

Tăng doanh số với LỚP DẠY SEO HIỆU QUẢ