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: quangthu05@gmail.com*/ 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{ Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 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;} Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 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; Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 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*/ } Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 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; } Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 5 Hướng dẫn tạo giao diện (Theme) Violet .dropmenudiv a:link { color: #000000; font-weight:normal; font-size:12px; font-family:Verdana; text-decoration: none; } .dropmenudiv a:visited { color: #000000; font-weight:normal; font-size:12px; font-family:Verdana; text-decoration: none; } .dropmenudiv a:hover { text-decoration: underline; } .dropmenudiv a:active { text-decoration: none; } #wrap3{background:mã màu nền toàn trang;border:0.5px solid #fff;border-width:0 5px;overflow-x:hidden; font-family: Tahoma;font-size:12px;} #wrap4{width:100%;min-height:1050px;overflow-x:hidden;background: mã màu nền toàn trang;} .comments .comment2 { font-family:Tahoma; font-size:12px; background:#FFFFFF; } .comments .comment1 { font-family:Tahoma; font-size:12px; background:#FFFFFF; } body { background:#D6FFCE;/*NN*/ } Chú ý: Các bạn thay chủ yếu ở phần chữ màu đỏ, ngoài ra các bạn có thể thay giá trị của 1 vài thông số khác như độ cao, rộng, màu, cỡ chữ, phông chữ, …(các bạn tự tìm hiểu thêm) Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 6 Hướng dẫn tạo giao diện (Theme) Violet Sau khi chỉnh sửa tạo ra file “giaodiencuatoi.css” bạn gửi lên tài khoản miễn phí trên 1 số hosting (đã nêu ở phần chuẩn bị). Công việc còn lại là tạo ra một khối cột chức năng và chèn vào nội dung khối cột đoạn mã sau: <link rel="stylesheet" type="text/css" media="screen" href= "Đường link file css của bạn">Thông tin giao diện<br> Design By: Đặng Quốc Thư<br> Điện thoại: 0982 843 718 <script language="JavaScript1.1" type="text/javascript"> function right(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert('.:Wellcome To Website - Design By Themes: Đặng Quốc Thư:.'); return false; } return true; } document.onmousedown=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; </script><center><br> <a href="#"><img src= "http://ulsasontay.edu.vn/Images/icon/icon_top.gif"></a></center> Nếu ngại chỉnh sửa và thích giao diện trên blog của tôi thì chèn đoạn code sau: <link rel="stylesheet" type="text/css" media="screen" href= "http://kin651402.110mb.com/hayhon.css"> <script language="JavaScript1.1" type="text/javascript"> function right(e) { if (navigator.appName == 'Netscape' && (e.which == 2 || e.which == 1)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert('.:Wellcome To Website - Design By Themes: Phạm Sa Kin:.'); return false; } return true; } document.onmousedown=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; </script><center><br></center> <a href="#"><img src= Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 7 Hướng dẫn tạo giao diện (Theme) Violet "http://t0.gstatic.com/images? q=tbn:ANd9GcQ83Uoh6wx072sMMDro5jskHxMOQH5AL5uSZD6W8k-37gatP0OB"></a> Chúc các bạn thành công ! Phạm Sa Kin – GV THCS Cát Hiệp-Phù Cát- Bình Định Blog: http://violet.vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 8 . 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. 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:. Định Blog: http:/ /violet. vn/Sakin402 Email: KingTHCSCatHiep@yahoo.com.vn Có tham khảo tư liệu đồng nghiệp- Đặng Quốc Thư 6 Hướng dẫn tạo giao diện (Theme) Violet Sau khi chỉnh sửa tạo ra file “giaodiencuatoi.css”