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

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, 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_spring15.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring12.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring16.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring18.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring19.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring2.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring20.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring21.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring22.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring23.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring24.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring25.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring3.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring4.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring5.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring6.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring7.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring8.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring9.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring.jpg
http://i977.photobucket.com/albums/ae252/vanhoai212/nen/nen2/Digital_composite_spring1.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 bottom;}
#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/2_002.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/3.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/4.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/5_002.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/6.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/7.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/8-1.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/9-1.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/8.gif
http://i977.photobucket.com/albums/ae252/vanhoai212/9.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é

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ững bài viết cùng chủ đề của :vanhoai

  dành cho người mới làm blog           giới thiệu tổng quát

 tạo đường viền       code trang trí 1.

 chèn nhạc tiếng    chèn clip. lưu trữ ảnh   

 tạo nền bài viết kho ảnh tạo nền.    rút gọn tên miền cho blog.

 tổng hợp code 2           code tạo icon tạo mudule mới

 code phần module tự tạo    cách phối màu cho blog

làm biểu tượng welcome...    tổng hợp code làm trong suốt blog