Tạo danh sách ghi chú đẹp cho Blogger/Blogspot

Simple Unordered List

Tạo danh sách ghi chú đẹp cho Blogger/Blogspot

Bước 1: Vào Mẫu >> Chỉnh sửa HTML, thêm đoạn code sau trước thẻ ]]></b:skin>

 .list {
  color: #555;
  font-size: 18px;
  padding: 0 !important;
  width: 500px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
  background-color: rgba(255,255,255,1);
}
.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  padding: 10px 0 10px 35px;
  height: auto;
  text-transform: capitalize;
}
.list li:hover {
  background-color: rgba(220,220,220,0.3);
  -webkit-transition: all 0.2s;
  -moz-transition:    all 0.2s;
  -ms-transition:     all 0.2s;
  -o-transition:      all 0.2s;
}
.list li a {text-decoration:none;color:#777}
.list li a:before{
  border-left:4px double red;
  width:30px;
  position:relative;
  left:-15px;
  top:-11px;
  padding-bottom:22px;
  height:45px;
  content:""
} 

Bước 2: Khi viết bài bạn soạn thảo theo cú pháp sau

 <ul class="list">
  <li><a href="#">NỘI DUNG 1</a></li>
  <li><a href="#">NỘI DUNG 2</a></li>
  <li><a href="#">NỘI DUNG 3</a></li>
  <li><a href="#">NỘI DUNG 4</a></li>
  <li><a href="#">NỘI DUNG 5</a></li>
  <li><a href="#">NỘI DUNG 6</a></li>
</ul> 

• DEMO

• NỘI DUNG 1
• NỘI DUNG 2
• NỘI DUNG 3
• NỘI DUNG 4
• NỘI DUNG 5
• NỘI DUNG 6

Created by Arlina/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm