THU THUẬT BLOG 18

Bài viết Tìm bài viết: TìmTrích dẫn Báo cáo giới thiệu tổng quát về thiết kế giao diện cho blog Thư mục: thiết kế blog | Đăng ngày: 23:42 22-05-2009 các bạn của tôi các bạn vừa đổ một

Trang 1

Bài viết Tìm bài viết: Tìm

Trích dẫn Báo cáo

giới thiệu tổng quát về thiết kế giao diện cho blog

Thư mục: thiết kế blog |

Đăng ngày: 23:42 22-05-2009

các bạn của tôi các bạn vừa đổ một cái móng nhà nhưng chẳng biết làm thế nào để xây nó thành một ngôi nhà mang đặc trưng riêng của chủ nhân các bạn chịu khó mày mò trong bài

viết này nha

đối với dân thiết kế và dân chuyên nghiệp thì chẳng nói làm gì nhưng đối với những người đang bắt đầu viết blog thì đây quả là vấn đề nan giải trước tiên mời anh em du nạp thêm hai từ chuyên ngành mà ta sẽ phải luôn nhắc đến đó là code và theme ,code là các đoạn

mã lệnh để tạo ra một cái giao diện cho blog đó chính là theme mà các bạn đăng săn lùng

và tìm kiếm các bạn không cần thiết phải biết ý nghĩa của các dòng lệnh mà chỉ cần quan tâm nó bỏ vào chổ nào và cần phải thay thế những gì trong đoạn lệnh đó để nó mang đặc

trưng của riêng mình 1 code bỏ vào đâu ? sau khi các bạn đăng nhập bằng tài khoản của mình rồi thì chú ý nhìn lên phía trên ở đó có phần thiết kế sau khi kich chọn thiết kế thì tiếp tục chọn theme chọn chế độ tự chỉnh sửa các bạn ấn tiếp tục và rồi bây giờ kéo xuống các bạn có thấy cái khung soạn thảo ở trên có dòng chữ CSS không đó chính là nơi an tọa của các dòng

code

2 ->phải thay thế những gì trong các dòng code để nó biến thành cái mang đặc trưng của mình? cái mà các bạn cần phải thay nhiều nhất đó là các đường link ảnh kink ảnh chính là cái đường dẫn bắt đầu từ http:// kết thúc là các đuôi thường là gif , jpg, png mà khi các bạn mở trình duyệt internet và gõ địa chỉ link ảnh vào thì nó hiện ra duy nhất một cái ảnh ,để lấy linh ảnh cần sử dụng thì các bạn kích chuột phải trên cái ảnh đó rồi chọn

properties phía dưới cùng lúc này thì các bạn đã thấy đường link của ảnh rồi đó

nếu các bạn đang dùng theme tìm được trên mạng thì tốt nhất các bạn nên xóa nó đi và bắt đầu lại bằng các dòng lệnh sau để cho đỡ rối đầu hoặc nếu các bạn đọc và hiểu thì thùy biến nó thành cái theme của mình cũng được các bạn chỉ cần chú ý đến việc thay link ảnh thôi ,các bạn nhớ là khi sử dụng những dòng lệnh bên giới thì thay thế các đường link ảnh bởi các dòng chữ "link ảnh thay vào đây hoặc những chữ có nội dung tương tự như

vậy nha mỗi cụm câu lệnh nhớ enter 5, 6 lần cho nó cách xa nhau ra 3 -> tổng hợp code cho thiết kế blog :(nhớ là coppy đầy đủ các dòng chữ màu vàng)

code cho nền blog :

body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date , body.blog_archives_all,

Trang 2

body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list,

body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow,

body.photo_upload_pc, body.photo_upload_gallery {background:#80c6c6 url(link ảnh nền

thay vào đây) repeat fixed center;}

và đây là các đường link ảnh nền mà các bạn có thể sử dụng nó đẹp tuyệt vời đấy không tin trước khi

sử dụng các bạn cứ kich vào xem thử:

chọn được rồi thì bôi đen mà coppy nha bà con

http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring 15.jpg

Trang 3

http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring jpg

http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring25.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring3.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring4.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring5.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring6.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring7.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring8.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring9.jpg http://i977.photobucket.com/albums/ae252/vanhoai212/nen/Digital_composite_spring.jpg

code cho các nền tiêu đề Module tức là cái nền của những dòng chữ 'bình luận mới nhất" "bài mới nhất, thư mục riêng:

col-150 rc_bd rc_bc hd titlebar hd, col-150 rc_bd rc_bc hd titlebar,

.col-600 rc_bd rc_bc hd titlebar hd, col-600 rc_bd rc_bc hd titlebar,

.row-920 rc_bd rc_bc hd titlebar hd, row-920 rc_bd rc_bc hd titlebar{background:transparent url( linhk ảnh);}

những ai muốn nó trong suốt thì cứ xóa link ảnh và nhớ để lại hai cái dấu móc

code cho nền và màu chữ module:

col-150 rc_bd rc_bc bd, col-600 rc_bd rc_bc bd, row-920 rc_bd rc_bc bd

{background:transparent url(link anh);color:#000;}

xóa link ảnh nếu muốn trong suốt nhớ để lại hai dấu móc

code cho tất cả đường viền

#friend-list rc div, #friendlist_module rc div, rc div, #subscribe_highlight rc div, #mod-tagged-frd-article rc div {background:transparent url(duong vien phia tren) repeat-x right

Trang 4

#friend-list rc, #friendlist_module rc, rc, #subscribe_highlight rc, #mod-tagged-frd-article

.rc {background:transparent url(duong vien goc ben trai) no-repeat left top;}

#friend-list rc_bd div.rc_bc, #friendlist_module rc_bd div.rc_bc, rc_bd div.rc_bc,

#subscribe_highlight rc_bd div.rc_bc, #mod-tagged-frd-article rc_bd div.rc_bc

{background:transparent url(duong vien ben phai) repeat-y right top;}

#friend-list rc_bd, #friendlist_module rc_bd, rc_bd, #subscribe_highlight rc_bd, #mod-tagged-frd-article rc_bd {background:transparent url(duong vien ben trai) repeat-y left top;}

#friend-list rc_ft div, #friendlist_module rc_ft div, rc_ft div, #subscribe_highlight rc_ft div,

#mod-tagged-frd-article rc_ft div {background:transparent url(duong vien ben goi) repeat-x

right top;}

#friend-list rc_ft, #friendlist_module rc_ft, rc_ft, #subscribe_highlight rc_ft, #mod-tagged-frd-article rc_ft {background:transparent url(duong ven goc ben phai) no-repeat left

bottom;}

sau đây là một số đường viền các bạn có thể sử dụng các bạn sử dụng duy nhất một link

ảnh cho cụm câu lệnh trên cũng được

http://i977.photobucket.com/albums/ae252/vanhoai212/10.gif

http://i977.photobucket.com/albums/ae252/vanhoai212/1_002.gif

http://i977.photobucket.com/albums/ae252/vanhoai212/8-1.gif

http://i977.photobucket.com/albums/ae252/vanhoai212/9-1.gif

các bạn cứ cop lần lượt các đoạn code đó vào phần CSS mỗi đoạn cho nó cách xa một chút nha

đây chỉ là bài viết mang tính chất tổng quát cho những bạn đang bước đầu làm quen với chỉnh sửa blog bởi vậy các link ảnh đưa ra ở trên đều có sẵn rồi nếu sau này bạn đã thạo rồi thì tốt nhất là vào kho ảnh động của vanhoai tìm lấy cho mình một bộ riêng trong đó có

rất nhiều ảnh đẹp bạn tha hồ lựa chọn nhé

Trang 5

cuối cùng chúc anh chị em thành công và hẹn gặp lại vào phần trang trí blog lần sau

kích vào đây nếu vẫn chưa hiểu ra vấn đề

chào thân ái : vanhoai1984

Định dạng
Số trang	5
Dung lượng	72 KB