Tạo một bức ảnh luôn xuất hiện trên Blog


Nếu bạn muốn tạo một bức ảnh luôn xuất hiện trên trang Blog của mình để trang trí, hoặc để làm một bảng thông báo nho nhỏ thì thủ thuật hôm nay mình xin giới thiệu sẽ giúp cho bạn đấy. Mời bạn xem screenshot bên dưới.

Các bạn tiến hành theo thứ tự những bước sau đây :
  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ó :
    #top_image {
    position:fixed;
    bottom:5px;
    right:5px;
    clip:inherit;
    Lưu ý : Với đoạn code này, mình đã thiết lập cho hình luôn xuất hiện ở vị trí góc Cuối/Phải . Nếu không thích vị trí này, bạn hãy thế Bottom/Right thành Top/Left (góc Trên/Trái) hay đại loại thế.
  3. Tìm tiếp thẻ </body> và thêm đoạn code này vào :
    <div id='top_image'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png'/></div>
    Lưu ý : Bạn hãy chỉnh lại Link hình bên trên thành Link hình của bạn (Hãy dùng hình có kích cỡ nhỏ để ít tốn thời gian load Blog và không gây phiền phức cho người đọc). Đồng thời, nếu muốn chèn URL vào hình, hãy sử dụng thẻ <a href="URL"><img src="Link hình"></a>.
  4. Save lại template và kiểm tra kết quả.
Vậy là bạn đã thực hiện xong thủ thuật chèn ảnh luôn nổi trên Blog rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !

9 Nhận xét on "Tạo một bức ảnh luôn xuất hiện trên Blog"

Pika Rock on 30 June 2009 at 21:35 said...

mấu chốt là cái position:fixed thoai mà

★☆★ Lê Hữu Tài ★☆★ on 1 July 2009 at 22:05 said...

Cái này có gì đâu nhỉ? Cũng giống như cái lên đầu trang thoy hà, fixed là yeahssssss. À mà nó không có tác dụng ở IE đâu Boypro ơi >"<

boyproDX on 2 July 2009 at 02:15 said...

@Pika Rock & Lê Hữu Tài : Hì, tips này chủ yếu dành cho newbie mới vào Blogger thui mà, chứ đâu phải dành cho pro như các bác :D (vì thế đừng chê em nhé ^^!)
Còn IE thì mình chịu thua rùi. Chả biết ver 7,8 có khá hơn chút nào ko :|

NAD on 3 July 2009 at 16:46 said...

Thủ thuật này bình thường, ko hay lắm :D

atm said...

Bạn Boypro ui trong trang này http://boyprodxtrial.blogspot.com/ có phần: Nếu bạn thích bài viết này, hãy copy liên kết sau và gửi tới bạn bè, link bài viết hướng dẫn đó ở đâu vậy bạn.

boyproDX on 8 July 2009 at 12:39 said...

@atm : Mới cập nhật thủ thuật, mời bạn xem tại đây. Chúc vui ^^!

Anonymous said...

:))

Triệu Đình Phúc on 1 February 2010 at 20:56 said...

bạn ơi, trong cái thẻ body, mình chèn hình thì được, nhưng mình hok biết cách chèn url vào hình, rút cuộc cái link nó phải ntn, mình chèn mà nó báo lỗi hoài ah :(

Triệu Đình Phúc on 1 February 2010 at 21:21 said...

hehehee, cuối cùng thì mình cũng làm được rùi, thank bạn very very much nghen

:)) ;)) ;;) :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