Hướng dẫn thay đổi giao diện blog Violet

Hướng dẫn tạo giao diện (Theme) Violet
LỜI NÓI ĐẦU
Blog là công cụ hữu ích giúp các cư dân mạng chia sẻ các thông tin, đối với một cư dân mạng
không thể không sở hữu một vài blog trên các trang khác nhau. Bạn cũng như tôi đều muốn có một
blog để có thể chia sẻ những hiểu biết của mình đối với bạn bè, thông qua blog để giao lưu học hỏi
thu thập nhiều kiến thức: Xã hội, Kinh tế, Chính trị, Công nghệ thông tin, …
Có rất nhiều trang web cho phép các thành viên tạo blog miễn phí, nhưng là một giáo viên có
lẽ tạo blog trên Violet là gần gũi và dễ dàng thực hiện nhất, hơn nữa nó đáp ứng được nhu cầu giao
lưu học hỏi các kinh nghiệm trong soạn giáo án, và thiết kế bài giảng. Nói như vậy thì bạn hãy cùng
tôi cùng bắt tay thiết kế một blog cho riêng mình nhé. Trước hết các bạn hãy tạo cho mình một tài
khoản trong Violet.vn, sau đó trong thông tin cá nhân bạn hoàn thành đầy đủ và chính xác, và cuối
cùng là nhờ người xác thực. Sau khi thông tin được xác thực, bạn truy cập vào trang Violet.vn và
chọn chức năng “Tạo trang riêng”. Và bạn bắt đầu từ một giao diện mặc định của blog do trang chủ
cung cấp, cũng từ đó bạn sẽ có rất nhiều việc phải làm để blog của bạn thêm phong phú về nội dung,
bắt mắt về hình thức, … Với vốn kinh nghiệm ít ỏi (Từ 9/2010

12/2010) học được từ việc suy luận,
mày mò thông qua các hướng dẫn sơ bộ trên nhiều trang khác nhau. Tôi xin phép được mạo muội
hướng dẫn các bạn cách tạo giao diện đặc trưng chỉ có ở blog của mình, mang phong cách của bạn
…
I. CÔNG VIỆC CHUẨN BỊ:
1) Bạn cần có 3 tài khoản cần thiết (miễn phí):
+ Tài khoản gửi dữ liệu (mọi dữ liệu): Tạo miễn phí trên trang www.mediafire.com
+ Tài khoản gửi dữ liệu ảnh: Tạo miễn phí trên trang www.photobucket.com
+ Tài khoản Hosting: Tạo miễn phí trên trang www.webng.com hoặc
www.110MB.com hoặc www.opendriver.com
2) Bạn cần có 4 công cụ tạo hiệu ứng cho blog:
Các công cụ này bạn có thể tải về theo đường link trong mục “Giới thiệu phần mềm” trên
blog: Violet.vn/dangquocthu.
+ Phần mềm chỉnh sửa ảnh: PhotoShop 7.0 (Phù hợp với máy cấu hình thấp)
+ Phần mềm tạo ảnh động xuất file cực nét: Easy GIF Animator

+ Phần mềm tạo các swf quảng cáo, banner tích hợp menu: Sothink SWF Quicker
+ Phần mềm tạo banner, .. : Aleo Flash Intro Banner Maker
II. BẮT TAY VÀO THỰC HIỆN:
Trước hết bạn tạo ra 1 file có định dạng css bằng cách: Click Start góc trái màn hình  Chọn
AllProgram  Acsicess  Note Pad
Trong trình soạn thảo của Note Pad bạn chèn đoạn code sau:
/*Design By: Dang Quoc Thu
Phone: 0982.843.718
Email: */
h2{font-size:16px}
#posts{width:100%;overflow-x:hidden;}
#posts li{
padding-bottom:10px;
height:auto !important;
height:124px;
min-height:124px;
background:#FFFurl(Đường dẫn ảnh nền liên kết bài giảng tư liệu) top left no-repeat;
}
#smallposts li{
Đặng Quốc Thư – GV THCS Yên Đồng, Ý Yên, Nam Định
Blog: Violet.vn/dangquocthu
Email:
1
Hướng dẫn tạo giao diện (Theme) Violet
padding-bottom:10px;
height:auto !important;
height:54px;min-height:54px;
background:#fff url(Đường dẫn ảnh nền bài giảng tư liệu) top left no-repeat;
}
.title{font-size:13px;font-weight:bold;margin:0;text-transform:uppercase;overflow:hidden;}

.title a:link,
.title a:visited{color:#000000;}
.by{font-size:10px;margin:0 0 2px 0;color:#00CC00;text-transform:uppercase;}
.txt,
.blue{color:#00CC00;}
.txt{font-style:italic;font-size:12px;padding-left:170px;}
.pic{float:left;margin:7px 18px 7px 7px;}
#smallposts .pic{margin:5px 18px 7px 5px;}
.pos1{clear:both;}
#letters{line-height:2;padding-bottom:2px;}
.size1{font-size:10px;}
.size2{font-size:12px;}
.size3{font-size:15px;}
.size4{font-size:17px;}
.size5{font-size:22px;font-weight:bold;}
.pager{float:center;clear:both;width:100%;padding:10px 10px 10px 10px;}
.pager .float-right{float:left;}
.float-left{float:left;}
.float-right{float:right;margin-right:20px;}
.comments{padding:0px;width:528px;_width:100%;color:#000000}
.comments .navigator{color:#000000;font-size:11px;margin:0px 0px 0px 0px;float:left;}
.comments .comment2{width:100%;border:#000000;margin:0px 0px 10px 0px;padding:10px 10px 10px
10px;float:left;text-color:#00ef6b;}
.comments .comment1{width:100%;background-color:#000000;border:#FFFFFF;margin:0px 0px 10px
0px;padding:10px 10px 10px 10px;float:left;text-color:#00EF6B;}
.comments .avatar{width:50px;height:50px;border:1px solid #008600;background:#fff no-repeat
top;padding:3px 3px 3px 3px;margin:5px 5px 5px 5px;text-align:center;float:left;}
.comment-edit{text-align:left;}
.comment-author{text-align:right;}
.document li{display:block;text-align:center;float:left;background-color:#000000;margin:0px 0px 5px

0px;padding:0px 0px 0px 0px;width:174px;height:150px;cursor:pointer;background:url(Đường dẫn ảnh nền
liên kết bài giảng tư liệu) no-repeat;background-position:center 0px;overflow:hidden;}
.document .over{background:transparent url(Đường dẫn ảnh nền bài giảng tư liệu) no-repeat center 0px;}
.document a,
.document a:visited{color:#000000;text-decoration:none;}
.document a:hover{text-decoration:underline;cursor:pointer;}
.document li label{text-align:center;line-height:1em;font-size:0.8em;margin:4px 12px 2px
12px;display:block;}
.document li img{
display:block;
background-color:#000000;
text-align:center;
margin:10px auto 0px auto;padding:0px 0px 0px 0px;
cursor:pointer;}
.shortdesc{width:259px;float:left;text-align:center;padding:10px 0px 0px 0px;}
.shortdesc img{float:left;margin-right:10px;}.shortdesc h3{padding:0px;margin:0px;font-size:12px;line-
height:normal;}
Đặng Quốc Thư – GV THCS Yên Đồng, Ý Yên, Nam Định
Blog: Violet.vn/dangquocthu
Email:
2
Hướng dẫn tạo giao diện (Theme) Violet
.docgroup, .entrygroup, .entry, .doc {
font-family:Tahoma; font-size:12px;
background: url(Đường dẫn ảnh nền thân khối chính ) ;
}
.docgroup h2, .entrygroup h2, .entry h2, .doc h2 {
background: url(Đường dẫn ảnh nền tiêu đề khối chính) repeat-x;
margin: 0px 0px 0px 0px; padding-left:8px;width:550px; height:70px;
line-height:30px;

text-align:center;
font-family:Tahoma;
font-size:12px;

}
.docgroup .content, .entrygroup .content, .entry .content, .doc .content {
background: transparent url(Đường dẫn ảnh nền chân khối chính) no-repeat bottom left;
}
#side h2{_width:190px;margin: 5px 0px 0px 0px;padding-left:4px;font-size:13px; text-align:center;font-
family: Arial, Helvetica, sans-serif;height:50px;line-height:50px;color:#427DD6;text-
transform:uppercase;background:url(Đường dẫn ảnh nền tiêu đề khối chức năng) repeat-
x;float:center;width:190px;height:70px;}
#side .content{_width:190px;margin:-10px 0px 0px 0px;display:block;padding:10px;padding-
bottom:10px;color:#000000;background:#f5efe4 url(Đường dẫn ảnh nền thân khối chức năng) repeat-y; text-
align:left;font-size:11px;border:0px solid #C6B598;min-height:40px;}
#side .bottom{_width:190px;margin:-5px 0px 0px 0px;background:url(Đường dẫn ảnh nền chân khối chức
năng ) repeat-x; float:centrt;width:190px; height:30px;
}
.selected {
background:#FFFFFF;
font-family:Verdana;
font-size:12px;
}
#side, h2 a:link {
color: #000000;
text-decoration: none;
}
#side, h2 a:visited {
color: #000000;
text-decoration: none;

}
#side, h2 a:hover {
text-decoration: underline;
}
#side, h2 a:active {
text-decoration: none;
}
.leftmenu {
line-height:14px;
Đặng Quốc Thư – GV THCS Yên Đồng, Ý Yên, Nam Định
Blog: Violet.vn/dangquocthu
Email:
3
Hướng dẫn tạo giao diện (Theme) Violet
margin-bottom:0px;
font-family:Verdana;
font-size:12px;
}
.leftmenu ul {
padding: 0px;
margin: 0px;
}
.leftmenu li {
display:block;
padding: 0px;
margin: 0px;
border-bottom: 0px;
}
.leftmenu a span {float:none;}
.leftmenu a:hover {

text-align:left;
display: block;
text-decoration: none;
font-weight: normal;
background: #FFFFFF;
padding-left: 8px;
}
.leftmenu a:link {
color: #000000;
text-decoration: none;
}
.leftmenu a:visited {
color: #000000;
text-decoration: none;
}
.leftmenu a:hover {
text-decoration: underline;
}
.leftmenu a:active {
text-decoration: none;
}
.menutop{display:block;
width:100%;
float:center;
border: 0px solid #ABB8C3; /*NT*/
font-family: Arial, Helvetica, sans-serif;font-size:15px;
border-bottom:0px solid #ABB8C3; /*NT*/
background:url(Đường dẫn ảnh nền menu) repeat-x;
}
.menutop a:hover {

background:url(Đường dẫn ảnh nền menu khi chuột di chuyển đến) repeat-x center center;
}
.menutop a {
background:url(Đường dẫn ảnh nền menu con) repeat-x center center;
border-RIGHT: 1px solid #ABB8C3; /*NT*/
}
Đặng Quốc Thư – GV THCS Yên Đồng, Ý Yên, Nam Định
Blog: Violet.vn/dangquocthu
Email:
4
Hướng dẫn tạo giao diện (Theme) Violet
.menutop li {
border-right: 1px solid #29DB39;
}
#top a:link {
color: #FFFFFF;
}
#top a:visited {
color: #FFFFFF;
}
.top a:hover {
text-decoration: underline;
}
.top a:active {
text-decoration: none;
}
#welcome a {
background: #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.dropmenudiv {
font:Tahoma;
font-size:12px;
line-height:15px;
font-weight:none;
background-color:#FFFFFF;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
}
.dropmenudiv ul {
border: 0px solid #FFFFFF;
}
.dropmenudiv a {
font-size: 11px;
color: #000000;
font-family:Verdana;
background:#73AAF7;
}
.dropmenudiv li {
font-family: Verdana;
font-size:12px;
border-bottom: dotted 1px #FFFFFF; /*THEME CHANGE HERE*/
}
.dropmenudiv a:hover { /*THEME CHANGE HERE*/
background:#9CC3F7;
font-weight:normal;
font-family:Verdana;
font-size:12px;
text-decoration: underline;
}
Đặng Quốc Thư – GV THCS Yên Đồng, Ý Yên, Nam Định

Blog: Violet.vn/dangquocthu
Email:
5