Logo liên kết

Thư mục

Điều tra ý kiến

Bạn thấy mã HTML-Code của trang web đã đáp ứng đủ chưa?
Rất đủ không cần thêm
Đủ, nhưng cần phát triển thêm
Không đủ
Không thể biết vì chưa hiểu về mã HTML-Code
Ý kiến khác

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    0 khách và 0 thành viên

    Welcome to

    Gốc > Thủ thuật (Bài viết) >

    Thiết Kế Theme (giao diện) Blog toàn tập! ...đầy đủ nhất...

    Đã gần 1 tháng rồi ko lên mạng do nhà bận bán hàng tết,rồi đi chơi tết,mất mạng...mong mọi người thông cảm!

    sau khi mở nick,vào Blog thấy rất nhiều comment hỏi về thiết kế Theme (giao diện) Blog mà ko trả lời hết đc,áy náy quá!vì vậy hôm nay làm 1 entry hướng dẫn các bạn mới tập làm Blog cách tạo cho mình 1 giao diện như ý...chỉ giao diện (theme)  thôi nhé!

    Nói về thiết kế giao diện (theme) của Website nói chung và Blog nói riêng thì thực ra nó chỉ cơ bản là cách sắp xếp các bức ảnh vào vị trí thích hợp,kết hợp chúng với nhau trên bề mặt trang,cùng với màu chữ,các hiệu ứng để tạo 1 giao diện như ý! (đẹp hay ko là ở mỗi người)

    Theme Blog cơ bản chia làm khoảng 3 loại (chưa biết bao giờ có loại tiếp theo????):

     1: Theme thông thường

     2: Theme 2 mảnh

     3: Theme 3 mảnh

    +>Theme thông thường: là kiểu theme bao gồm hình nền và các module (lúc mới tạo Blog bạn đã có rồi!) vấn đề là thiết kế kiểu gì là hợp lí nhất?

    cách thiết kế loại theme này cực nhanh và đơn giản,thịnh hành nhất là thay 1 hình nền thật đẹp,nghệ thuật (nên ít chi tiết và màu sắc để tránh làm rối mắt) và làm ảnh nền các module hoặc làm trong suốt,trong mờ các module cho lộ hình nền ra...bạn sử dụng các Code sau:

    *Trong suốt module: 

    .col-150 .rc_bd .rc_bc .bd {background:transparent;}
    .col-600 .rc_bd .rc_bc .bd {background:transparent;}
    .row-920 .rc_bd .rc_bc .bd {background:transparent;}

     

    -Nhưng tôi khuyên các bạn chỉ nên làm trong suốt module phụ (150) & module rộng (920) còn cột chính rộng (600) thì nên dùng trong mờ bằng cách: nháy vào Thiết kế,kéo xuống module bài viết,nháy vào chữ sửa ở góc phải trên cùng module, trong đó có phần trong suốt,bạn kéo thanh trong suốt về bên trái khoảng 1/3 chiều dài thanh...hoặc tùy bạn (lưu ý rằng chữ sẽ mờ theo nền module)

    -nếu ko làm trong suốt cột chính (600) bạn bỏ dòng giữa của đoạn code trên =>

    .col-150 .rc_bd .rc_bc .bd {background:transparent;}
    .row-920 .rc_bd .rc_bc .bd {background:transparent;}

    -Nếu thích thì thử tiếp:

    + Tiêu đề module

    Code:

    .col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
    .col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
    .row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;}


    Kết quả: Nền bài viết trong suốt,nền module và tiêu đề module trong suốt,viền của module thì có màu trắng
    + .Làm trong suốt thêm viền Module:
    Có 2 cách: Vì cái viền của module thực chất là ảnh,ta có thể thay bằng ảnh trong suốt,hoặc xoá cái viền này đi
    1.Thay bằng ảnh trong suốt
    2. Xoá viền Module

    #friend-list .rc div, #friendlist_module .rc div, .rc div,.col-150 .rc div {background:transparent ;}
    #friend-list .rc, #friendlist_module .rc, .rc,.col-150 .rc {background:transparent ;}
    #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc,.col-150 .rc_bd {background:transparent ;}
    #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd,.col-150 .rc_bd div.rc_bc {background:transparent ;}
    #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, .col-150 .rc_ft div {background:transparent ;}
    #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, .col-150 .rc_ft {background:transparent ;}

    =>Đến đây thì Blog gần như trong suốt hoàn toàn,còn cái Blast ai muốn trong suốt nữa thì chèn code sau

    #blast .rc_bc .bd{background:transparent;}

    #blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;}

    #blast .rc div {background:transparent ;}

    #blast .rc {background:transparent ;}

    #blast .rc_bd div.rc_bc {background:transparent ;}

    #blast .rc_bd {background:transparent ;}

    #blast .rc_ft {background:transparent ;}

    #blast .rc_ft div {background:transparent ;}

    *.Lúc này Blog ta gần như trong suốt hoàn toàn,vần còn một số vấn đề như sau:

    .Làm trong suốt nền comments (khung bình luận của bài viết)

    Code

    .cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background:none;}
    .alist-comment #comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist #comments-listing .alist-comment {background:none;}

    +. Tổng số trang

    .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent}

    +.Trong suốt Module Tâm trạng

    #mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}

    +.Phần xem thêm,module hình ảnh

    #photo_highlight .ft {background:transparent} 11.Module tên Blog
    #blog_title .bd{background:transparent}

    *Các bạn đừng lạm dụng hết các Code trên,hãy dùng theo nhu cầu và ý tưởng của mình,dùng nhiều cưa chắc đã đẹp!

    *chèn ảnh nền cho module:(hơi nâng cao,có thể ko dùng vì rất rắc rối)

    Ảnh nền Bảng tin nhắn
    Code:
    BODY.guestbook {BACKGROUND:url(URL ảnh) #000000 fixed;}
    Ảnh nền của bộ đếm Statistic
    Code:
    #statistic .bd {background:#FFFFFF url(URL ảnh);}
    Ảnh nền của phần comments
    Code:
    #comment_new .bd {background:#FFFFFF url(URL ảnh);}
    Ảnh nền của phần Thư mục
    Code:
    #folder .bd {background:#FFFFFF url(URL ảnh);}
    Ảnh nền của phần lịch
    Code:
    #calendar .bd {background:#FFFFFF url(URL ảnh);}
    Ảnh nền của trang Profiles
    Code:
    BODY.profile_view {BACKGROUND:url (URL ảnh) #000000 fixed;}

    /* Chèn hình nền cho cái module thông tin cá nhân bao gồm avartar */

    #profile_highlight_module .rc_bd .rc_bc {background:url( URL hình) #FFFFFF top right repeat;}

    #profile_highlight_module .bd {background:url( URLhình ) #FFFFFF bottom right no-repeat;}

    /* Chèn hình nền cho module fiendlist */

    #friendlist_module .rc_bd {background:url( URL Hình) #FFFFFF top right repeat;}

    #friendlist_module .bd {background:url(URL Hình) #FFFFFF bottom right no-repeat;}

    /* Chèn hình nền cho module Bài Mới */

    #article_new .rc_bd .rc_bc {background:url(URL Hình) #FFFFFF top right repeat;}

    #article_new .bd {background:url(URL Hình) #FFFFFF bottom right no-repeat;}

    /* Chèn hình nền cho module Thư Mục Riêng*/

    #folder .rc_bd .rc_bc {background:url(URL Hình) #FFFFFF top right repeat;}

    #folder .bd {background:url(URL HÌnh) #FFFFFF bottom right no-repeat;}

    /* Chèn hình nền cho module Comment mới*/

    #comment_new .rc_bd .rc_bc {background:url(URL Hình) #FFFFFF top right repeat;}

    #comment_new .bd {background:url( URL Hình ) #FFFFFF bottom right no-repeat;}

    /* Chèn hình nền cho module Thống Kê của plus*/

    #statistic .rc_bd .rc_bc {background:url(URL Hình) #FFFFFF top right repeat;}

    #statistic .bd {background:url(URL Hình) #FFFFFF bottom right no-repeat;}

    /* Chèn hình nền cho module Blog yêu thích*/

    #subscribe_highlight .rc_bd .rc_bc {background:url(URL Hình) #FFFFFF top right repeat;}

    #subscribe_highlight .bd {background:url(URL Hình) #FFFFFF bottom right no-repeat;}

     

    /* Chèn hình nền cho module Lịch*/

    #calendar .rc_bd .rc_bc {background:url(URL HÌnh) #653e16 top right repeat;}

    #calendar .bd {background:url(URL HÌnh) #653e16 bottom right no-repeat;}

    Chèn hình nền vào Module tự tạo

    -Các Module tự tạo sẽ có số từ 10001->10010,tuỳ theo đó là Module thứ mấy mà các bạn điền số thích hợp.

    VD:

    /* Chèn hình nền cho module Online (cái module tự tạo thêm có số 10001 -> 10010)*/

    #user_mod_10001 .rc_bd .rc_bc{background:url(URL HÌnh) #FFFFFF top right repeat;}

    #user_mod_10001 .bd {background:url(URL Hình) #FFFFFF bottom right no-repeat;}

    Lưu ý: Các bạn thay cái URL hình bằng đường dẫn ảnh của bạn
    *Chèn hình nền (background) cho toàn Blog...bạn nên chọn hình cỡ lớp,khoảng 1024 trở lên,nên chọn để hình tĩnh,ko cuộn theo module bằng Code sau:
     
    BODY.blog_my {BACKGROUND:url(URL hình nền) #000000 fixed;}
     
    =>Vậy là cơ bản giao diện Blog của bạn đã hoàn thành,bạn có thể xem 1 số Blog có giao diện kiểu này rất đẹp: VD: Nguyên Hỏa  , ken's , De'light , Tracy Truong ...
    +> Theme có thanh cuộn 2 mảnh theo kiểu có 2 ảnh nền trên dưới (Top - Bottom)
    các bạn chỉ quan tâm ở phần này là phần thanh cuộn,ảnh trên dưới,ảnh nền,ngoài ra những cái khác tham khảo ở phần trên!...
    -Bạn cần 2 ảnh có chiều rộng 920, 1 ảnh trên, 1 ảnh dưới,1 ảnh nền toàn Blog(ko quan trọng lắm vì sẽ bị che khuất nhiều,nên dùng ảnh động để cho Blog thêm sinh động)...còn việc lựa chọn và thiết kế ảnh sao cho phù hợp xin bạn tự nghiên cứu!
     
    CODE:
    BODY.blog_my {BACKGROUND:url(URL hình nền) #000000 fixed;}

    #doc2, #doc{background:#cc99ff url(URL Ảnh trên(top)) no-repeat center top;}
    /* mau nen cua theme va link hinh top-theme nay thay doi duoc*/

    #bd{background:transparent url(URL Ảnh dưới (bottom)) no-repeat center bottom;}
    /* mau nen cua theme va link hinh bottom-theme nay thay doi duoc*/
    /* Luu y: mau nen cua 2 hang tren phai dong nhat mot ma mau voi nhau theo mau nen cua code theme */

    =>thế là xong!

    VD: đây là blog bạn JackyJohn009

    đây là ảnh trên (top)

    đây là ảnh dưới (bottom)

    -Còn màu nền ở giữa bạn ấy dùng màu đen!

    =>và đây là kết quả  ngoài ra bạn ấy còn kết hợp với việc làm trong suốt module phụ và chền hình nền cho nền tiêu đề các module tạo ra 1 Blog rất sống động!

    -Ngoài ra giao diện của blog co0ll0ve (một Blog nổi tiếng) cũng la loại theme này!

    +> Theme thanh cuộn 3 mảnh (tương tự như 2 mảnh nhưng có thêm 1 ảnh ở giữa 2 ảnh trên và dưới,ảnh này được lặp lại theo chiều dài Blog hoặc bài viết còn 2 ảnh trên và dưới thì vẫn cố định! bạn có thể xem Demo (giao diện kiểu này) tại chính Blog của tác giả (Blog Lớp 12A4) tại đây! hoặc tại Blog của người đầu tiên tôi thấy sài loại Theme này (ko biết có phải hắn phát minh ra ko??) nhoc khỉ và 1 cao thủ nữa Kem

    *Cách Làm đây!

     - Các bạn làm một bức ảnh rộng 920 (nếu làm theme 3 cột) hoặc rộng 760 nếu làm theme 2 cột như Blog của Lớp tôi ...làm sao để nhìn rõ 3 phần: trên, giữa, dưới ,phần giữa làm sao để khi bị lặp ko phân biệt được (mép trên hòa hợp với mép dưới!. Nếu các bạn làm đường viền ngăn cách phần module phụ và module chính thì chiều rộng của modul phụ khoảng 150px nhé.bạn xem ở đây sẽ hiểu!

    Khi đã có ảnh rồi thì các bạn lại cắt bức ảnh đó ra làm 3 phần nhé! Tôi cắt bức ảnh trên như sau:

    Ảnh trên (top):tôi tận dụng làm baner luôn

    Ảnh giữa (middle): Cái ảnh này sẽ lặp lại vì vậy mep tren và mép dưới ghép phải khit nhau!

    Ảnh dưới (Bottom)-có thể tận dụng đăng các thông điệp,bản quyền...

    Còn đây là CODE CSS:

    /*background*/
    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:#ma_mau url(link ảnh nền toàn trang) repeat  fixed center;}
    /*Ban nen chon anh dong nhu blog 12a4*/

    /*thay anh da cat vao theme*/
    body{background:#FFFFFF; font-family:Tahoma;font-size:12px;font-weight:normal;font-style:normal;}
    #head {background:transparent url(link ảnh trên) no-repeat center top;height:Apx;}/*A là chiều cao ảnh*/
    #doc2, #doc   {background:transparent url(link ảnh giữa ) repeat center;}
    #bd{background:transparent url(link ảnh dưới) no-repeat center bottom;}
    /*end*/

    Bạn thêm đoạn code này vào nữa để làm trong suốt tên Blog

    /*trong suot ten blog*/
    #blog_title .rc_bd  .rc_bc .bd ,#blog_title .bd{background:transparent;}
    /*end*/

    Bạn nào thích trong suốt  Blass nữa thì thêm đoạn code này:

    /*trong suot blass*/
    #blast .rc div {background:transparent;}
    #blast .rc {background:transparent;}
    #blast .rc_bd div.rc_bc {background:transparent ;}
    #blast .rc_bd {background:transparent ;}
    #blast .rc_ft {background:transparent ;}
    #blast .rc_ft div {background:transparent ;}
    #blast .rc_bc .bd{background-color:transparent}
    /*end*/

    Thêm cái này nữa để làm trong suốt nền các module nhé!

    /*transparent_background_module*/
    .col-150 .rc_bd  .rc_bc .bd {background:transparent;}
    .col-600 .rc_bd  .rc_bc .bd {background:transparent;}
    .row-920 .rc_bd  .rc_bc .bd {background:transparent;}

    Ngoài ra còn phải xóa viền Module thì mới hợp Mốt!

    #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent;}
    #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent;}
    #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;}
    #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent;}
    #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;}
    #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent;}

    Như vậy là cơ bản đã hoàn thành!việc còn lại là còn tuy vào tài chỉnh sửa ảnh và con mắt nghệ thuật của bạn.

    Nếu bạn nào ko biết dùng Photoshop thì bạn hãy vao Photobucket.com tạo cho mình 1 tài khoản và up ảnh lên đó,sau đó sẽ có chữ Edit để bạn chỉnh sửa ảnh trực tuyến khi nháy vào (máy mình cấy hình thấp nên ko tiện cài photoshop,Blog lớp mình làm hoàn toàn trên đó,rất dễ sử dụng)

    Đây là thành quả !ok chứ???? chúc các bạn thành công,có gì cứ Comment tại đây nhé!

      p/s: 

     Bài viết có tham khảo trên mạng trong quá trình tự thiết kế Blog!

    Thực ra về Design Blog thì tôi không phải là 1 cao thủ ,mà chỉ hiểu sơ qua về CSS của nó mà thôi...những điều tôi biết về Blog cũng là mầy mò trên mạng mà có cả...đa số các Designer đều như vậy

       Tất nhiên là có những cao thủ thực sự,những tác giả thật đó thì quả thật phải gọi là ẩn sĩ! vì họ sáng tạo ra cho mọi người dùng nhưng rất ít người biết đến do họ ko phô trương thanh thế như những Designer rởm,những kẻ biết cách ăn cắp rồi đi quảng cáo là của mình...tôi cũng là 1 kẻ biết cách ăn cắp,nhưng tôi ko công bố cho ai là tôi viết ra nó (vì đâu phải là của tôi?) ,tôi cũng nhờ những lần ăn cắp đó mà hiểu dần về Code CSS, rồi sau đó cũng có thể tự tạo ra những cái nho nhỏ thực sự là của mình.Quả thật vấn đề bản quyền ở VN còn quá đơn giản,nhưng ko sao!vì có lẽ các Designer thực sự cũng đâu quan tâm? họ làm ra là cho mọi người...phải có những người như vậy thì thế giới mạng mới phát triển được!

      Những cao thủ mà tôi biết đến đầu tiên mà khiến tôi bái phục trên Plus chỉ có : Nhóc Khỉ , Kem , Nguyên Hỏa... => 3 người trong nhóm Classic four, đặc biệt là Nhóc Khỉ, trên Plus này những kiểu Theme mới, tiên tiến nhất tôi đều thấy cậu ta sở hữu đầu tiên như:Theme 2 mảnh kiểu Top- Bottom, theme 3 mảnh như Blog của tôi chẳng hạn, các Designer Rởm toàn cop hết CSS của họ về để sửa chữa link ảnh mà thôi,thậm chí họ còn làm đẹp hơn vì họ xử lí ảnh tốt hơn! (ở đây tôi chỉ nói về CSS) ngoài ra tay Nhóc Khỉ này lấy ở đâu thì...tôi chịu!

      Sửa chữa hay lấy CSS của người khác ko phải là sai hay điều gì xấu (vì tôi cũng làm vậy!) nhưng họ xấu ở chỗ là đi công bố CSS đó là của mình làm ra mà ko hỏi gì tác giả, Thậm chí viết bài hướng dẫn như là của mình ý!

     Thôi kệ họ!chẳng liên quan tới mình,thấy bất bình thì nói thôi!

           ...I'm NDK...


    Nhắn tin cho tác giả
    Nguyễn Trọng Quang @ 14:04 08/12/2009
    Số lượt xem: 12905
    Số lượt thích: 0 người
     
    Gửi ý kiến