Góc BLog

Hôm nay chủ nhật
ngồi nghe nhạc nên tiện viết entry này cho mọi người xem,có mấy you hỏi
tớ làm sao để chèn hình nền phần đầu và cuối cho modun bài viết như ở
trong blog của tớ nên tiện đây tớ sẽ hướng dẫn các bạn trang trí cho
mudun bài viết luôn,tổng hợp tất cả những gì tớ trang trí cho modun bài
viết luôn

[You must be registered and logged in to see this link.]....Làm trong suốt module
bài viết

[You must be registered and logged in to see this link.]

#article_list_module .rc_bd .rc_bc .hd .titlebar
.hd,#article_list_module .rc_bd .rc_bc .hd .titlebar,
#article_list_module .rc_hd, #article_list_module .rc_hd div,
#article_list_module .rc_bd, #article_list_module .rc_bc,
#article_list_module .rc_ft, #article_list_module .rc_ft div,
#article_list_module .rc_bc .bd, #article_list_module
.mod-alist-searchbox input.btn, .cmt-mod-alist .comments-listing .hd,
#comment_container li, #bd .rte_toolbar, .mod-trackback
#trackback-listing, .mod-trackback ul, #article_list_module
.pagination, #yui-main table.data thead
th{background:transparent;border-style:none;}/*olympia41124*/

#article_list_module .mod-alist-searchbox
input.ipt{background:transparent;}*vietnam360plus.com*/

.cmt-mod-alist .comments-listing .bd, .mod-trackback
.bd{background:transparent !important;}/*olympia41124*/

Nếu
you nào làm mà chưa trong suốt modun bài viết thì xem bài này :sửa
lỗi modun bài viết không trong suốt

[You must be registered and logged in to see this link.]...Chèn ảnh vào phần trên và cuối cùng của
modun bài viết như trong blog của tớ :

Code chèn ảnh cho
phần trên cùng :

[You must be registered and logged in to see this link.] :

#article_list_module .rc_hd {background:transparent url(Link hình)
no-repeat center bottom;height:Apx;}/*olympia41124*/

Code chèn ảnh vào
phần cuối modun bài viết :

[You must be registered and logged in to see this link.]

#article_list_module .rc_ft {background:transparent url(Link hình)
no-repeat center top;height:Apx;}/*olympia41124*/

Tùy chỉnh :

link hình : bạn
thay link hình của bạn
A
:chiều cao của hình bạn muốn chèn

Vậy là được phần trên và cuối modun bài
viết rồi nha,chưa xong,còn phần giữa của modun bài viết nữa,trong blog
của tớ không sử dụng code này nhưng nếu ai thích thì làm nha,sao cho nó
phù hợp với theme là được :

Code làm nền cho modun
bài viết :

[You must be registered and logged in to see this link.] :

#article_list_module .rc_bd .rc_bc .hd .titlebar,#article_list_module
.rc_bd .rc_bc .bd {background:transparent url(Link hình) repeat-y
center;}/*olympia41124*/

Bạn thay link hình cho phù hợp màu sắc với
theme của bạn là được,lý do blog của tớ không dùng code này vì nền blog
của tớ màu trắng nên tớ để nền bài viết cũng màu trắng luôn

[You must be registered and logged in to see this link.]...Thay hình ngăn dòng
bài viết :

Để làm đẹp
hơn cho modun bài viết cũng như để rõ ràng lành mạch giữa các bài viết
ta nên chèn hình ngăn dòng cho nó phải không nào ,sử dụng code sau :

[You must be registered and logged in to see this link.]
:

.mod-alist .rc_bd .bd .more-posts .mod-alist-manage ul li,.mod-alist
.rc_bd .bd .more-posts .folder-icons .icon ul li
{background:none;}/*olympia41124*/
.mod-alist .rc_bd .bd .more-posts ul li{background:transparent
url(Link hình) no-repeat bottom
center;border-style:none;}/*vietnam360plus.com*/

Các
bạn thay link hình ngăn dòng bài viết mà bạn muốn vào,vấn đề link
hình ngăn dòng bài viết thì chọn ở đây nha : [You must be registered and logged in to see this link.]

[You must be registered and logged in to see this link.].Về vấn đề hiệu ứng cho
modun bài viết :

1...Hiệu ứng hiện hình
nền,phát sáng khi rê chuột vào modun bài viết :

[You must be registered and logged in to see this link.] :

#article_list_module
.rc_bd .rc_bc .bd UL LI:hover {BORDER-RIGHT:#5f433a 1px
dashed;BORDER-TOP:#5f433a 1px dashed;BACKGROUND:url(Link hình) top
right;BORDER-LEFT:#5f433a 1px dashed;BORDER-BOTTOM:#5f433a 1px dashed;}

Trong
đó : Link hình : bạn thay link hình của bạn vào,ở đoạn code trên
mình đã sử dụng cả boder đường viền và code trên cũng có tác dụng làm
hiện hình nền khi rê chuột vào phần comment trong blog của bạn

2. Hiệu ứng nút ấn cho modun bài viết :

Trong blog của tớ,tớ sử dụng code gộp chung cho tất cả các
modun,tức là khi rê chuột vào tất cả các modun đều hiện lên một
hình....đó là hình bướm bay...có rất nhiều người hỏi xin tớ cái code
này,hôm nay tớ share lên luôn cho mọi người dùng nè :

Code làm bướm bay khi rê chuột vào các modun,trong
đó có cả modun bài viết :

[You must be registered and logged in to see this link.]
:

.col-150 .rc_bd .rc_bc .bd:hover, .col-600 .rc_bd .rc_bc .bd:hover,
.row-920 .rc_bd .rc_bc .bd:hover, .row-760 .rc_bd .rc_bc .bd:hover{
background:transparent
url(https://2img.net/r/ihimizer/img521/333/buombay.gif);}

Trong đó
:https://2img.net/r/ihimizer/img521/333/buombay.gif là link hình bướm
bay,nếu ai không thích có thể thay link hình khác vào,chẳng hạn tuyết
rơi,hoặc trái tim bay chẳng hạn,sao cho phù hợp với blog và không chá
mắt là được

Chú ý nè : Tất cả
những code mình đã share ở trên các bạn copy và paste vào css trong blog
của các bạn nhé,tớ phải nói điều này vì nhiều you khi đọc xong chẳng
biết chèn vào đâu trong blog cả

Trên đây là toàn bộ những gì tớ đã trang trí trong modun bài
viết của tớ, mong rằng mấy you sau khi đọc xong bài này có thể làm được
như tớ...Hãy thanks tớ một cái nếu thấy bài này có ích nha

để tớ thích còn tiếp
tục viết bài chớ

Đề nghị ghi rõ nguồn css và nguồn bài viết
khi copy về nhà bạn nha

Nguồn
css :[You must be registered and logged in to see this link.]