4 hiệu ứng CSS làm đẹp cho Trang bài viết (Blogger Posts) của bạn

Add 4 killer effects to blogger posts

Thiết kế mặc định của Trang bài viết (Blogger Posts) nhìn khá là chán, hôm nay Iris Tips sẽ chia sẻ cho các bạn một vài Code CSS đề "tút" lại Body Post trông cá tính hơn. Hy vọng bạn sẽ thích nó :)

1. Hiệu ứng đổ bóng (shadow effect) cho Blogger Posts

 .post
{
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-webkit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
} 

2. Hiệu ứng chiếc lá (leaf effect) cho Blogger Posts

 .post
{
border:1px solid #dcdcdc;
border-top-right-radius:50px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
border-bottom-left-radius:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:15px;
} 

3. Hiệu ứng bo góc (rounded corner effect) cho Blogger Posts

 .post
{
border:1px solid #dcdcdc;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
} 

4. Hiệu ứng màu Neon (multicolor Neon effect) cho Blogger Posts

 .post
{
box-shadow:1px 1px 4px  #7fbf4d;
-moz-box-shadow:1px 1px 4px  #7fbf4d;
-webkit-box-shadow:1px 1px 4px  #7fbf4d;
-goog-ms-box-shadow:1px 1px 4px  #7fbf4d;
} 

Bạn có thẻ đổi #7fbf4d thành màu khác mà bạn thích.

Cách thực hiện

Rất đơn giản bạn chỉ cần dán một trong các đoạn code trên vào trước thẻ ]]></b:skin> trong template của bạn, sau đó Lưu lại là xong.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by dapinder/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm