Hôm nay bật mí code làm blast blogspot của tớ cho bạn nào chuyển sang blogspot mà vẫn vương vấn style của anh Răng Hô :D.
Code tớ viết sẽ giúp các bạn có thể thay đổi kiểu chữ, màu chữ sao cho phù hợp với blog và tùy biến theo ý mình còn sướng hơn anh Răng Hô nhiều.
Rất đơn giản là tạo thêm 1 widget rồi đưa vào layer có vị trí cố định và ta sẽ trang trí cho widget này để làm blast.
Hình minh họa tổng quát cho bạn dễ hình dung :
1. Chuẩn bị :
Các bạn hãy xem hình sau:
Tớ chia cắt viền khung cho widget blast như hình trên.
Độ rộng widget tớ để là 400px
Phần top của blast là 1 ảnh PNG viền khung bo tròn với Width x Height = 400x10px
Phần bottom cũng là 1 ảnh PNG viền khung bo tròn có cái đuôi dạng callout (hay bubble hoặc thought là tùy ý thích bạn) với WxH = 400x40px
Phần content chứa nội dung blast thì sẽ tự động co giãn theo số lượng ký tự gõ vào và chỉ cần 1 ảnh nhỏ PNG cỡ 10x10px rồi cho lặp lại ảnh này để lấp đầy phần content.
Nếu các bạn muốn blast của mình có độ trong để có thể nhìn thấy background ở sau như ở blog tớ thì dùng phần mềm chỉnh sửa ảnh tạo 1 ảnh PNG có độ trong suốt bao nhiêu tùy ý bạn. Ở đây tớ để độ trong suốt 90% (Transperent = 90%)
Các bạn cũng có thể dùng luôn viền khung blast của tớ làm tại link sau:
- Top : http://img196.imageshack.us/img196/5043/blasttop.png
- Content : http://img38.imageshack.us/img38/7851/blastbg.png
- Bottom : http://img32.imageshack.us/img32/5981/blastbot.png
2. Viết code cho Blast:
a. Khai báo biến: Blast Text Font & Blast Text Color để tiện thay đổi cỡ chữ, kiểu font, màu chữ (sẽ nói ở phần 4)
Các bạn tìm đoạn code <b:skin><
b. Viền khung cho Blast:
Giờ bạn tìm đoạn code #header-wrapper (tùy code của từng template mà bạn sử dụng cho blog, cũng có thể chỉ là #header) và hãy thêm phần code sau ngay phía bên dưới đoạn code này:
*Giải thích:
- mục blasttop & blastbot: padding dùng để canh lề, nếu độ cao của ảnh viền khung blast mà bạn làm khác thì bạn phải canh lề cho phù hợp theo đúng độ cao của viền khung. Ví như ảnh viền khung của tớ phần top là : blasttop.png có độ cao 10px thì padding top của tớ cũng phải để độ cao là 10px, tương nhự như vậy với phần bottom.
- mục blast : phần text-align để canh lề chữ của blast, nếu bạn thích canh giữa khung blast thì đổi thành center ( trong trường hợp bạn muốn thể hiện blast là 1 vài câu thơ lục bát ...)
- thay thế link ảnh viền khung của bạn vào từng phần tương ứng.
3. Hiển thị Blast:
Bạn hãy copy và paste đoạn code sau ngay dưới phần <body>
*Giải thích:
- position:absolute là dùng để định vị vị trí tuyệt đối của layer Blast,
- width:400px là độ rộng của layer = độ rộng của blast mà bạn đã định nghĩa ở phần code lúc ban đầu.
- 2 tham số left và top dùng để điều chỉnh vị trí của Layer blast. Bạn có thể thay đổi lại sao cho phù hợp với blog của bạn.
Vậy là ta đã viết xong phần code cho Blast.
4. Viết và chỉnh sửa Blast:
Giờ bạn muốn viết blast thì hãy vào Dashboard, chọn Layout
Phần Page Elements bạn sẽ thấy 1 widget nằm ở vị trí bạn đã định vị.
Bạn nhấn vào Edit rồi gõ đoạn text muốn hiển thị ở blast. Nhấn Save để lưu blast.
Bạn muốn chỉnh sửa Font, cỡ chữ to nhỏ, đậm, nghiêng hay màu sắc chữ blast thì chọn tiếp Fonts & Colours ngay bên cạnh Page Elements.
Tại đây bạn sẽ thấy 2 tham số mà bạn đã khai báo : Blast Text Font & Blast Text Color
Bạn chỉ việc chọn rồi thay đổi theo ý bạn. Sau đó nhấn Save Changes là xong.
Vậy là bạn đã có 1 blast còn tuyệt vời hơn cả anh Răng Hô.
Chúc vui vẻ và nếu thấy thú vị thì credit bài này cho tớ nhé, he he.
Code tớ viết sẽ giúp các bạn có thể thay đổi kiểu chữ, màu chữ sao cho phù hợp với blog và tùy biến theo ý mình còn sướng hơn anh Răng Hô nhiều.
Rất đơn giản là tạo thêm 1 widget rồi đưa vào layer có vị trí cố định và ta sẽ trang trí cho widget này để làm blast.
Hình minh họa tổng quát cho bạn dễ hình dung :
1. Chuẩn bị :
Các bạn hãy xem hình sau:
Tớ chia cắt viền khung cho widget blast như hình trên.
Độ rộng widget tớ để là 400px
Phần top của blast là 1 ảnh PNG viền khung bo tròn với Width x Height = 400x10px
Phần bottom cũng là 1 ảnh PNG viền khung bo tròn có cái đuôi dạng callout (hay bubble hoặc thought là tùy ý thích bạn) với WxH = 400x40px
Phần content chứa nội dung blast thì sẽ tự động co giãn theo số lượng ký tự gõ vào và chỉ cần 1 ảnh nhỏ PNG cỡ 10x10px rồi cho lặp lại ảnh này để lấp đầy phần content.
Nếu các bạn muốn blast của mình có độ trong để có thể nhìn thấy background ở sau như ở blog tớ thì dùng phần mềm chỉnh sửa ảnh tạo 1 ảnh PNG có độ trong suốt bao nhiêu tùy ý bạn. Ở đây tớ để độ trong suốt 90% (Transperent = 90%)
Các bạn cũng có thể dùng luôn viền khung blast của tớ làm tại link sau:
- Top : http://img196.imageshack.us/img196/5043/blasttop.png
- Content : http://img38.imageshack.us/img38/7851/blastbg.png
- Bottom : http://img32.imageshack.us/img32/5981/blastbot.png
2. Viết code cho Blast:
a. Khai báo biến: Blast Text Font & Blast Text Color để tiện thay đổi cỡ chữ, kiểu font, màu chữ (sẽ nói ở phần 4)
Các bạn tìm đoạn code <b:skin><
:) 
:D 
:)) 
=)) 
;)) 
;;) 
;) 
:p 
:X 
:-* 
:"> 
:( 
:(( 
=(( 
:-o 
8-} 
>:) 
B-) 
8-X 
:-" 
:-w 
Wonderful! Go ahead!
Trùi ui, nhiều kiến thức quá huhu.... mai lại phải thức đêm rùi, cảm ơn anh H nhiều lắm nhé!
Phải công nhận là sau mấy ngày ngồi nghịch code chán (nghịch code thì ít nhẩm ô chế ảnh thì nhiều) quay lại đây mới nhận ra hết được chân giá trị blog của anh, thật là quá phê! Đúng là rất pro (trừ hình ảnh hơi xì tin :D) Anh Huy gửi bản html hoặc download full template về cho em mượn em ngâm cứu học hỏi với :x
CẢM ƠN BẠN NHIỀU NHA
Trời, cái này khó làm quá huhu...
(Joey bên Hội Thêu Thùa nè)
Gái muốn làm cái phần top và bottom của blast widget dài hơn 400px thì làm bằng cách nào (ko dùng hình VHLT đã làm sẵn đc hichic)
Bài viết có đầy đủ hướng dẫn rồi mà em Joey :D
Nếu em muốn làm size khác đi thì tạo 1 ảnh PNG với size mà em muốn, rồi chia cắt ra theo dạng như trên, sau đó upload ảnh lên, chỉnh sửa lại code là xong thôi :D