Ðăng Ký
slideNote Demo

Untitled Document
Gửi bài mớiTrả lời chủ đề này
 Follow me at TwitterMaxF Movies FeedburnerRss  Add to Digg Add to Technorati Add to Delicious Add to Reddit Add to Yahoo Add to Google Add to Facebook Add to Twitter Add to FriendfeedAdd to Stumbleupon Add to Blinklist Add to Live Add to Slashdot Buzz Up  
 
Cách Design blog từ A đến Z cho những ai biết Photoshop
 
avatar
Huy Chương Huy Chương :

Points Points : 3035
Posts Posts : 1365
Thanked Thanked : 49
Giới tính Giới tính : Nam Ngày sinh Ngày sinh : 15/12/1987
Age Age : 29
Đến từ Đến từ : Long Cung (Watertown city)

Tài Sản Của Tôi
.:

 
 

Love Channel - Trang 2
Bạn Đang Là:

Ứng Dụng:
Shop Online - Nơi mua, bán tài sản và thú nuôi | Nơi tổ chúc các cuộc thi - Game show và trò chơi | Cửa sổ tình yêu online - Nơi tư vấn tình yêu, giới tính, hôn nhân và gia đình | Xem Truyền Hình Online

Thông Tin Cá Nhân
Liên Hệ: Xem lý lịch thành viên

Bài gửiTiêu đề: Cách Design blog từ A đến Z cho những ai biết Photoshop

Phần 2 : Thiết kế nền entry cho Blog.

Về phần Entry này mình sẽ nói rõ hơn vì nó rất là quan trọng để tạo ra ngôi nhà đẹp hơn cho các bạn, vì phần này chúng ta thiết kế phải phù hợp với màu sắc của Theme..Về màu sắc phải phối hợp màu sao cho phù hợp với Theme..với mình thì những Theme được làm màu sáng thì nên chọn màu sáng và những Theme được làm màu tối thì nên chọn màu tối một chút cho nền Entry...Tùy vào cách thiết kế của mỗi người, nói chung chúng ta nên phối màu sao cho dễ nhìn một chút và dao diện dễ thuyết phục với khách ghé thăm, hình ảnh dễ nhìn , bài viết dễ đọc đó cũng sẽ tạo ra một Blog đẹp cho các bạn rồi...Với theme này mình sẽ chọn tiếp màu trắng và viền xám để làm nền cho Entry...

Kích thước khi xem Blog ngoài trang chủ chuẩn nhất cho nền entry này là 620px,nhưng khi vào xem thì nó sẽ Full ra 750px.. Nên phần này bạn lưu ý một chút về Code...nên 2 Code này sẽ phần nào giúp bạn trong thiết kế chuẩn hơn ..Các bạn có thể thay kích thước tùy ý của mình để phù hợp với kích thước của Entry...

TÙY CHỈNH ĐỘ RỘNG CHO NỀN ENTRY
.mod-alist-summary, .mod-alist-brief, .mod-alist-full {float:left;padding:10px 10px 10px 0px;width:620px;}
#friend-list {width:620px;}

THAY ĐỔI KIỂU HIỂU THỊ BÀI VIẾT
.col-600 .mod_all .rc_bd .rc_bc{width:600px;padding:0px 0px 0px 20px;}


Và cũng như cách cắt Theme , các bạn cắt ra làm 3 phần cho Theme.

Nền Entry đầu :

Nền Entry giữa :


Nền Entry cuối:


Code chung cho chúng ta sữ dụng :

#article_list_module .rc_hd {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}
#article_list_module .rc_bd {background:transparent url(link ảnh) repeat scroll center;}
#article_list_module .rc_ft {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}

Code chung cho phần Nền Entry khi lick vào xem bài viết :

#single_post #article_list_module .rc_hd {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}
#single_post #article_list_module .rc_bd {background:transparent url(link ảnh) repeat scroll center;}
#single_post #article_list_module .rc_ft {background:transparent url(link ảnh) no-repeat scroll center top;height:Xpx;}

Thay link ảnh vào chữ màu đỏ
Thay kích thước chiều cao vào X màu xanh

Phần 3 : " Thiết kế nền Module "

Với phần thiết kế module nhỏ này cũng là phần quan trọng để trang trí cho ngôi nhà của mình...vẫn là với thiết kế theo 3 mảnh.

Nền đầu module :

Nền giữa Module

Nền cuối module


Code Thay cho phần nền module :

Code giữa module :

.col-150 .rc_bd,
#friendlist_module .rc_bd ,
#statistic .rc_bd,
#update_date .rc_bd ,
#folder .rc_bd ,
#calendar .rc_bd ,
#search_module .rc_bd ,
#article_new .rc_bd ,
#user_mod_1000x .rc_bd ,
#comment_new .rc_bd {background:transparent url(link ảnh) repeat-y top center;}

Code cuối module :

.col-150 .rc_ft,
#friendlist_module .rc_ft ,
#statistic .rc_ft ,
#update_date .rc_ft ,
#folder .rc_ft ,
#calendar .rc_ft ,
#search_module .rc_ft ,
#article_new .rc_ft ,
#comment_new .rc_ft ,
#user_mod_1000x .rc_ft {background:transparent url(linkảnh) no-repeat center top;height:Xpx;}

Code đầu module :

Code cho tất cả các module :

.col-150 .rc_hd ,
#article_new .rc_hd ,
#folder .rc_hd ,
#calendar .rc_hd ,
#statistic .rc_hd ,
#friendlist_module .rc_hd ,
#comment_new .rc_hd ,
#profile_highlight .rc_hd {background:transparent url(linkảnh) no-repeat center top;height:Xpx;}

Code cho từng phần đầu module :

.col-150 .rc_hd ,
#article_new .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#folder .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#calendar .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#statistic .rc_hd {background:transparent url(link ảnh) no-repeat center btop;height:Xpx;}
#friendlist_module .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#comment_new .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}
#profile_highlight .rc_hd {background:transparent url(link ảnh) no-repeat center top;height:Xpx;}


Thay link ảnh vào chữ màu xanh

X là giá trị chiều cao của ảnh .
#user_mod_1000x : thay X bằng giá trị từ 1-10..

Thế là chúng ta đã hoàn thành phần chính của Blog rùi... Và tiếp tục đến với những phần nhỏ và phần phụ của Blog..Tất cả bây giờ là các bạn phải hoàn chỉnh trong Code Blog của mình .

Về phần trong suốt chúng ta sữ dụng code này nhé :

TRONG SUOT TRANG CHINH{}
.col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar, .col-150
.rc_bd .rc_bc .bd,
.col-600 .rc_bd .rc_bc .hd .titlebar .hd, .col-600 .rc_bd .rc_bc .hd .titlebar, .col-600
.rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft,
.row-760 .rc_bd .rc_bc .hd .titlebar .hd, .row-760 .rc_bd .rc_bc .hd .titlebar,
.row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft,
.row-920 .rc_bd .rc_bc .hd .titlebar .hd, .row-920 .rc_bd .rc_bc .hd .titlebar,
.row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft,
.cmt-mod-alist .comments-listing .hd,
#comment_container li,
#bd .rte_toolbar, .mod-trackback
#trackback-listing, .mod-trackback ul,
#blog_title .rc_bd .rc_bc .bd,
#blast .rc_bc .bd,
#blast .tail, .pagination,
#article_list_module .mod-alist-searchbox input.ipt,
#search_module input.textfield
{background:transparent;}
.rc_hd, .rc_hd div, .rc_bd, .rc_bd .rc_bc, .rc_ft, .rc_ft div,
.captchaContentBox{background:transparent;border-style:none;}
.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}

TRONG SUOT TRANG PHU {}
Trang profile
#profile_info .bd,
#profile_info th{background:transparent !important;}

Trang Album {}

#gallery_list .rc_bc .bd,
#gallery_list .rc_bc .bd .actionbar,
#gallery_list .rc_bc .bd .actionbar .bd,
#gallery_list .rc_bc .bd .actionbar .hd,
#gallery_list .rc_bc .bd .actionbar button,
#gallery_list .rc_bc .hd .titlebar .hd select {background:transparent;}

Trang Xem Hình Trong Album {}

#photo_enlarge .rc_bc .bd,
#photo_enlarge .ft,
#blog_compose .rc_bd .rc_bc .bd .actionbar .bd button,
#photo_enlarge
#photo_comment_list,
#photo_enlarge
#photo_comment_list .bd,
#photo_enlarge .rte_fieldset,
#photo_enlarge .photo-comment
{background:transparent;}

TRANG BAN BE {}

#friend-list .mod-tag-friend-list,
#friend-list .mod-tag-friend-list .ft,
#friend-list .mod-tag-friend-list .bd{background:transparent !important;}


TRONG SUOT VIEN MODULE TU TAO {}

#user_mod_10001 .rc_hd div,
#user_mod_10001 .rc_hd,
#user_mod_10001 .rc_bd,
#user_mod_10001 .rc_bd div.rc_bc,
#user_mod_10001 .rc_ft,
#user_mod_10001 .rc_ft div,
#user_mod_10002 .rc_hd div,
#user_mod_10002 .rc_hd,
#user_mod_10002 .rc_bd,
#user_mod_10002 .rc_bd div.rc_bc,
#user_mod_10002 .rc_ft,
#user_mod_10002 .rc_ft div,
#user_mod_10003 .rc_hd div,
#user_mod_10003 .rc_hd,
#user_mod_10003 .rc_bd,
#user_mod_10003 .rc_bd div.rc_bc,
#user_mod_10003 .rc_ft,
#user_mod_10003 .rc_ft div,
#user_mod_10004 .rc_hd div,
#user_mod_10004 .rc_hd,
#user_mod_10004 .rc_bd,
#user_mod_10004 .rc_bd div.rc_bc,
#user_mod_10004 .rc_ft,
#user_mod_10004 .rc_ft div,
#user_mod_10005 .rc_hd div,
#user_mod_10005 .rc_hd,
#user_mod_10005 .rc_bd,
#user_mod_10005 .rc_bd div.rc_bc,
#user_mod_10005 .rc_ft,
#user_mod_10005 .rc_ft div,
#user_mod_10006 .rc_hd div,
#user_mod_10006 .rc_hd,
#user_mod_10006 .rc_bd,
#user_mod_10006 .rc_bd div.rc_bc,
#user_mod_10006 .rc_ft,
#user_mod_10006 .rc_ft div,
#user_mod_10007 .rc_hd div,
#user_mod_10007 .rc_hd,
#user_mod_10007 .rc_bd,
#user_mod_10007 .rc_bd div.rc_bc,
#user_mod_10007 .rc_ft,
#user_mod_10007 .rc_ft div,
#user_mod_10008 .rc_hd div,
#user_mod_10008 .rc_hd,
#user_mod_10008 .rc_bd,
#user_mod_10008 .rc_bd div.rc_bc,
#user_mod_10008 .rc_ft,
#user_mod_10008 .rc_ft div,
#user_mod_10009 .rc_hd div,
#user_mod_10009 .rc_hd,
#user_mod_10009 .rc_bd,
#user_mod_10009 .rc_bd div.rc_bc,
#user_mod_10009 .rc_ft,
#user_mod_10009 .rc_ft div,
#user_mod_10010 .rc_hd div,
#user_mod_10010 .rc_hd,
#user_mod_10010 .rc_bd,
#user_mod_10010 .rc_bd div.rc_bc,
#user_mod_10010 .rc_ft,
#user_mod_10010 .rc_ft div
{background:transparent;color:none;border-width:0px;}

TRONG SUOT NEN MODULE TU TAO {}

#user_mod_10001 .rc_hd,
#user_mod_10001 .rc_bd,
#user_mod_10001 .rc_ft,
#user_mod_10002 .rc_hd,
#user_mod_10002 .rc_bd,
#user_mod_10002 .rc_ft,
#user_mod_10003 .rc_hd,
#user_mod_10003 .rc_bd,
#user_mod_10003 .rc_ft,
#user_mod_10004 .rc_hd,
#user_mod_10004 .rc_bd,
#user_mod_10004 .rc_ft,
#user_mod_10005 .rc_hd,
#user_mod_10005 .rc_bd,
#user_mod_10005 .rc_ft,
#user_mod_10006 .rc_hd,
#user_mod_10006 .rc_bd,
#user_mod_10006 .rc_ft,
#user_mod_10007 .rc_hd,
#user_mod_10007 .rc_bd,
#user_mod_10007 .rc_ft,
#user_mod_10008 .rc_hd,
#user_mod_10008 .rc_bd,
#user_mod_10008 .rc_ft,
#user_mod_10009 .rc_hd,
#user_mod_10009 .rc_bd,
#user_mod_10009 .rc_ft,
#user_mod_10010 .rc_hd,
#user_mod_10010 .rc_bd,
#user_mod_10010 .rc_ft
{background:transparent no-repeat center bottom;}

XOA BO TIEU DE MODULE TU TAO{}
#user_mod_10001 h2{display:none;}
#user_mod_10002 h2{display:none;}
#user_mod_10003 h2{display:none;}
#user_mod_10004 h2{display:none;}
#user_mod_10005 h2{display:none;}
#user_mod_10006 h2{display:none;}
#user_mod_10007 h2{display:none;}
#user_mod_10008 h2{display:none;}
#user_mod_10009 h2{display:none;}
#user_mod_10010 h2{display:none;}

Trong suot noc nha{}
#ygmatop, #ygmabot, .ysearch, .ysearch #ygmasrchfrm, #ygmasrchfrm fieldset, .yuimenubar .hd, .yuimenubarnav .yuimenubaritem, .yuimenubaritemlabel, #blogsearch form, #blogsearch .hd b, #blogsearch .hd u, #blogsearch .hd i{background:transparent;border-style:none;}
.yuimenubar{border-style:none;}
#ygmasrchfrm input, #blogsearch input{background:transparent;}
#ygmatop, #ygmabot, .blog_dummyselect {display:none;}
.yuimenubar .bd ul.first-of-type #yui-gen0{background:transparent;}
.yuimenubar{padding:35px 40px;width:480px;background:transparent;}
.yuimenubarnav .yuimenubaritem{border:none;}
#blogsearch {display:none;}
#ysm_bottom {display:none;}
#ygma{background:transparent;height:0px;}

.yuimenubarnav .yuimenubaritem {border-right:none;border-color:#f105bc;}
.yuimenubaritemlabel {border:none;}
.first-of-type a, #ygmatop a, .ygmabg, #ygmasrchbtn{color:#ffffff;}
.first-of-type li:hover{background:transparent;}
.blog_dummyselect .bd div, .blog_dummyselect .bd, .yuimenu .bd {background:transparent;}
.first-of-type a:hover{color:#020467;text-decoration:none;}
.menu .bd, .yuimenu ul{border-style:dashed;border-color:#ffffff;}


#ygmatop, #ygmabot, .blog_dummyselect {display:none;}
.yuimenubaritemlabel-selected a{color:#7e00ff!important;}
.rc_hd, .rc_hd div, .rc_bd, .rc_bd .rc_bc, .rc_ft, .rc_ft div{background:transparent;border-style:none;}
.blog_dummyselect .bd div, .blog_dummyselect .bd, .yuimenu .bd {background:transparent url(http://cA4.upanh.com/10.777.14916202.FXN0/trongsuot.png);color:#ff0054;}
#blogsearch span.btn .ygmasrchbtn {display:none;}
.ygmasrchquery {display:none;}

TRONG SUOT PHAN PROFILE{}
#profile_highlight
#profile_nav{background:none;}
#profile_highlight .yui3-menuitem-active,
#profile_highlight .yui3-menu-label-active,
#profile_highlight .yui3-menu-label-menuvisible{background:none;}

Demo :


Đến đây các bạn đã hoàn chỉnh Theme của mình rồi, còn một số Code trang trí phụ các bạn tự tìm hiểu và tham khảo nhé... Chúc các bạn thành công và có một ngôi nhà đẹp .

Bài viết được cảm ơn :
Hãy cảm ơn bài viết của binhminh bằng cách bấm vào "Nút Thanks " nhé!!!
-‘๑’- Tài Sản Của binhminh -‘๑’-
 
 
 
Chữ ký của binhminh


Cách Design blog từ A đến Z cho những ai biết PhotoshopXem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang
Trang 1 trong tổng số 1 trang

.::Host up ảnh miễn phí: Click here! hoặc Click here! - Hướng dẫn sử dụng 4r: Click here! ::. Chọn kiểu gõ : Tắt VNI Telex Viqr Tổng hợp
Permissions in this forum:Bạn không có quyền trả lời bài viết
Diễn đàn Thiên Môn Hội :: -‘๑’- Blog - Mạng Xã Hội - Góc thủ thuật tổng hợp -‘๑’- :: ♠ Thế Giới Yahoo 360 Plus ♠ :: ♠ Theme for Blog,Hình Nền Đẹp Cho Blog Của Bạn ♠-
|
Bookmarks
Đại Gia Đình Thiên Môn Hội»[X]«
»»--Vì một thế giới online lành mạnh--««

:::»+ Mời bạn đăng nhập tại đây+«:::

»++Chưa có tài khoản? Bạn bấm vào đây để Đăng Ký+«


Hộp tin nhắn Gửi tin nhắn Friends & Foes Tùy chọn cá nhân Bạn chưa đăng nhập Hiển thị tốt nhất trên Firefox, Google Chrome
Menu Các Ứng Dụng Forum
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a free blog