Tạo hiệu ứng Drop Cap cho bài viết trong Blogger


Khi sử dụng MS Word, chắc các bạn đều biết đến tính năng DropCap giúp tạo kích cỡ lớn cho chữ đầu tiên trong đoạn văn, gây chú ý cho người đọc. Một thủ thuật nhỏ bên dưới đây sẽ giúp bạn mang tính năng đó vào Blogger.
  1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
  2. Tìm đến thẻ ]]></b:skin> và thêm đoạn code dưới đây ngay bên trên nó :
    .dropcap {
          float:left;
          line-height:30px;
          margin:18px 5px 5px 0px;
          font-family:arial;
          font-size:80px;
    }
  3. Save lại template.
  4. Từ giờ, mỗi khi soạn thảo bài viết mới, bạn chỉ cần chèn thẻ :
    <div class="dropcap">Kí tự đầu tiên</div>
    là có thể sử dụng tính năng ấy.

Hy vọng thủ thuật nhỏ này sẽ giúp bạn trang trí thêm cho bài viết của mình. Chúc vui !

12 Nhận xét on "Tạo hiệu ứng Drop Cap cho bài viết trong Blogger"

vuluganck on 9 June 2009 at 12:31 said...

Hình như hồi đó dx có nhờ mình làm cho 1 cái tip nào đó h mình quên rồi.Hình như là cái menu,và cũng hình như cái code đó có vẻ bị lỗi.nên ko chạy dc mà author vẫn chưa sửa.

Mình có cái này ko biết dx thấy thế nào.Đó là thủ thuật làm pagepeel mà ngày trước mình nói, dx nói là thủ thuật đó ko thể chạy dc trên blogger.Nếu dx chê cái pagepeel này thay cho cái menu thì có lẽ đợi khi khác mình kiếm dc menu nào đẹp share cho.

Cho ý kiến nhé.H đi ăn cơm cái

vuluganck on 9 June 2009 at 12:32 said...

Ấy chết quên cho demo, nó dc sử dụng ngay tức khắc sau khi mình test thành công trên blog mình :
Zenplate

★☆★ Lê Hữu Tài ★☆★ on 9 June 2009 at 12:47 said...

Có cách nào cho nó tự động mà khỏi cần dùng class không nhỉ :-?

boyproDX on 9 June 2009 at 16:58 said...

@vuluganck : Cái Pagepeel này chạy tốt hơn so với của 123-Banner đấy :D . Nhưng mình chưa biết dùng nó vào việc gì cả :|. Đang kiếm vài tips khác để trang trí thêm cho Blog nhưng vẫn chưa thấy (-.-)

@Lê Hữu Tài : 1 cách >> Tự viết code để chèn tính năng DropCap vào Khung soạn thảo của BLogger :D

vuluganck on 9 June 2009 at 21:08 said...

Thì nó dùng cho việc Subscribe Feed đó còn gì.Thế thì đành đợi dịp khác vậy.

Ngankvn ® on 11 June 2009 at 20:22 said...

Ko có code nào tự động phóng to chữ cái đầu tiên lên hả BoyPro ??? Làm thủ công thế thì còn gì là NgânKVN =))

boyproDX on 12 June 2009 at 11:52 said...

@Ngankvn ® : Haizz :)) ... Cái này đúng là 'Được voi đòi Hai bà trưng' :D . Đùa tí, nếu có thì mình sẽ share cho. Tại chưa biết cách chèn thẳng vào khung soạn thảo của Blogger (Chắc có lẽ phải dùng tới Greasemonkey mới đc :| )

Ngankvn ® on 12 June 2009 at 13:55 said...

Thực chất thì bác Ẹt từng có chiêu cho chữ cái đầu tiên tự động to đùng y như vầy - nó được tích hợp vào code ReadMore do bác âý chế - Có điều nó thất thường - bài đc bài ko :(

boyproDX on 12 June 2009 at 21:16 said...

@Ngankvn ® : Nếu là code chèn thẳng vào template thì mình chịu :D , trình độ còn gà làm sao mà so với các bác ấy được :P . Mà hình như sau khi bác Ẹt thay temp mới thì đâu còn sử dụng code đó đâu nhỉ :-/

NAD on 13 June 2009 at 11:01 said...

Đã áp dụng thành công blog my blog, thanks :D

choncon on 29 July 2009 at 07:32 said...

ga vl

TDT on 25 February 2012 at 20:42 said...

Cái này hay đó :)
nhưng tiếc cái tiện là mỗi lần post bài lại phải thêm cái code kia nhỉ :( không có cách gì tiện lợi lợi hả bạn? đỡ phải nhớ cái code kia :D

GREEN VIETNAM

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3