Tạo chữ Drop Cap chữ cái đầu bài viết cho Blogspot

Chào các bạn, tình cờ đi ngang qua 1 blog nước ngoài thì thấy cái Drop Cap này, mình thấy nó khá Deep nên đem về share cho anh em :v :3

Thủ thuật này cực kì đơn giản chỉ chèn code CSS 1 lần và tất cả các bài viết trong trang Blogspot đều xuất hiện mà không phải làm 1 cách thủ công như các thủ thuật tương tự ở các trang khác.


Hình Minh Họa: TSM Blogger


Tiến hành làm Drop Cap cho Blogspot
1. Truy cập vào Mẫu
2. Tìm ]]></b:skin>
3. Chèn bên trên nó đoạn code bến dưới và save lại
.post-body:first-letter, .post-body .dropcap:first-letter{font-weight:bold;font-size:65px;font-family: Times, serif, Georgia;color: #F35F5E;float:left;padding:0;margin:-4px 5px 0px 0px;position: relative;background-color:none;line-height:0.9;} 
Để tối ưu hoàn toàn (tức không cho hiện Drop Cap ngoài trang chủ phần trích dẫn bài viết) thì nên thêm thẻ điều kiện.
Chèn toàn bộ đoạn Code sau thẻ </head>
<b:if cond="data:blog.url != data:blog.homepageUrl"><style>.post-body:first-letter, .post-body .dropcap:first-letter{font-weight:bold;font-size:65px;font-family: Times, serif, Georgia;color: #F35F5E;float:left;padding:0;margin:-4px 5px 0px 0px;position: relative;background-color:none;line-height:0.9;} </style></b:if>
Nâng cao: Bạn có thể hoàn toàn chỉnh sửa màu sắc, kích thước size chữ lại bằng cách sửa các thông số CSS ở đoạn code bên trên.

Chúc bạn thành công!


Tác giả bài viết: Trần Thái Tính
Thời gian đăng bài: Thứ Ba, 29 tháng 8, 2017
Tổng số bình luận: 5

5 nhận xét:

  1. Bài viết rất có ích khắc phục đc cách làm thủ công <3
    Tuy nhiên để tối ưu hoàn toàn (tức k cho hiện drop cap ngoài trang chủ phần trích dẫn bài viết) thì bạn nên thêm thẻ điều kiện nha.
    Chèn toàn bộ đoạn code sau trước thẻ </head>
    <code><b:if cond='data:blog.url != data:blog.homepageUrl'><style>.post-body:first-letter, .post-body .dropcap:first-letter{font-weight:bold;font-size:65px;font-family: Times, serif, Georgia;color: #F35F5E;float:left;padding:0;margin:-4px 5px 0px 0px;position: relative;background-color:none;line-height:0.9;} </style></b:if></code>
    ---Mình chỉ góp ý thôi nên nếu k hài lòng có thể bảo mình nha hihi

    Trả lờiXóa
  2. Opps.. Bỏ hộ mình thẻ đóng và mở <code></code> đi nhé. Mã hóa lại Css nên quên chưa bỏ.

    Trả lờiXóa
  3. K có gì bạn. Chúc blog bạn ngày càng phát triển :)

    Trả lờiXóa
  4. @CUONG NGUYEN Cảm ơn bạn nhiều nha <3

    Trả lờiXóa