Hướng dẫn đổi giao diện Blog Opera - Phần 1
Monday, 6. August 2007, 02:57:07
Cách đây 1 năm, khi rove vừa bước vào opera, cũng chỉ là 1 con gà, vì ngôn ngữ lập trình css rất khó, trong trường ko có dạy, chạy wa, chạy lại blogs mọi người, xem học hỏi, tự view source bằng plugin của maxthon mà xem css, mày mò từng dòng code, hiểu ra rất nhiều điều, đó là 1 quá trình rất khó khăn, nhưng thành quả cũng có 1 tí, rất vui, hôm nay chia sẽ toàn bộ source của mình, hy vọng bạn nào ko biết sẽ hiểu thêm tí
Đầu tiên thì ... có 3 lựa chọn khi thay đổi giao diện, bạn vào My account >>> Design >>> custom style sheet
Nó ra 1 bảng để bỏ code vào là Enter CSS, đây là nơi bạn viết code. Và ở dưới có 3 tùy chọn để check bạn xem đây
- Use my custom style sheet together with the current theme <<< bạn dùng code opera nhưng có 1 vài chỉnh sửa của mình ... rove dùng cái này, vì rove chưa đủ khả năng viết từ đầu
- Only use my custom style sheet <<< code bạn viết từ đầu đến cuối luôn, ko dùng code opera
- Do not use my custom style sheet <<< bạn đang dùng skin của opera thì check vào đây
Còn đây là code của rove nà
/* Body */
body {
background:#000 url('http://files.myopera.com/rove2012/Style/bg.gif'); /* Link của cái hình nền nà */
color:#316ac5; /* Màu chữ toàn blogs */
font-family:'tahoma',times new roman,arial,'trebuchet ms',helvetica,sans-serif; /* font chữ toàn blogs */
CURSOR: url(http://files.myopera.com/rove2012/Style/mouse.ani); } /* code thay đổi chuột */
/* Background hinh hoa la */
#wrap0 {
background:none; } /* Bỏ đi cái background hình hoa lá hẹ của themes Leaves */
/* Thanh Login tren cung */
#topbar1, #toplogin {
background:none;
width:920px; /* Làm cho thanh Login trên cùng nó bằng với chiều dài ở dưới */
margin:0 auto;
padding:0; }
#topbar1 a:link, #topbar1 a:visited, #topbar1 a:active {
color:#fff;
font-size:12px;
text-decoration:none; }
/* banner */
#top {
background:#000 url('http://files.myopera.com/rove2012/Style/RoveFantasy.jpg'); /* Link của banner Fantasy */
border-bottom:1px solid #000; }
/* Menu */
#menu a:hover {
color:#00FF00;
background:url('http://files.myopera.com/rove2012/Style/chicken11.gif') repeat-y; } /* Con gà vàng */
#menu a#selected {
color:#00FF00;
background:url('http://files.myopera.com/rove2012/Style/chicken10.gif') repeat-y; } /* Con gà trắng khi đưa chuột vào */
#menu_blog a:before {
margin-left:12px;
content:"Rove 's "; /* Thêm chữ Rove trước chữ Blogs */
visibility:visible; }
#newcomment h2:after { /* Thêm ^^ sau chữ write a comments khi post bài */
content:" ^^"; }
/* The */
a {
text-decoration:none; } /* Bỏ gạch dưới mấy cái liên kết */
a:link, a:visited, a:active {
color:#999999;
font-size:12px;
text-transform:none; }
/* Sticky */
.sticky {
display:none; /* Bỏ chữ sticky post đi */
background: none; }
/* Ngay thang */
.postdate {
color:#999999; /* Màu chữ cho ngày tháng năm */
text-transform:none; }
/* Tags */
.tags {
display:none; /* Bỏ tên Tags đi, chỉ để lại hình */
background: none; }
/* Chieu dai Comments */
#message {
height:120px; } /* Chiều dài của khung đánh comments trả lời */
/* Logo */
#getopera {
display: none; } /* Bỏ logo giới thiệu của oprea đi */
/* Fonts */
#wrap1 {
font-family:'tahoma',times new roman,arial,'trebuchet ms',helvetica,sans-serif; } /* Giúp blogs bạn hiển thị tiếng việt */
#content {
font-family:'tahoma',times new roman,arial,'trebuchet ms',helvetica,sans-serif;
font-size:14px; }
/* Mau cua Tags ben phai Slidebar */
#side a:link, #side a:visited {
color:#FFFFFF; }
/* Kich co chu cua Tags ben phai slidebar */
.size1, .size2, .size3, .size4, .size5 {
font-size:12px; }
/* Chu Blog, Chat, Lastest Comment ben slidebar */
#side h2, #side h2 a:link, #side h2 a:visited, #side caption {
color:#FEA201;
text-transform:none; }
#side caption a:link, #side caption a:visited, #top2 a {
color:#FEA201;}
/* Hinh nen cua chu About, Photos ben phai slidebar */
#side h2, #side caption {
background:none; }
/* Shoutbox */
#shoutbox a:link {
color:#FFFFFF; } /* Là cái mục chat của bạn đó */
/* Mau cua nick name tren bang Lastest Comments */
#newcomments a:link {
color:#CCCCCC;
font-size:12px; }
#newcomments a.username:link, #newcomments a.username:visited {
color:#FFFFFF;
font-size:12px;
text-transform:none; }
/* Tieu de bai post - the cua tieu de va cua Tags */
.title a:link, .title a:visited, .tags a:link, .tags a:visited {
color:#FEA201;
font-size:18px; }
/* Links o ben phai slidebar */
.sidelinx li {
padding:1px 0; }
.sidelinx a:link {
font-size:12px; }
/* Vach ngan giua 2 bai post */
.post, .pagenav {
CLEAR: both;
POSITION: relative;
padding:0px 0 40px 0;
margin-bottom:10px;
overflow:hidden;
border-top:none;
background: url('http://files.myopera.com/rove2012/Style/FF_Chocobo_Rove.jpg') bottom center no-repeat; } /* Cái hình chặn giữa 2 bài viết nà */
#firstpost {
background:url('http://files.myopera.com/rove2012/Style/FF_Chocobo_Rove.jpg') bottom center no-repeat; }
#lastpost {
background:none;}
/* Calendar */
#calendar {
color:#FFFFFF;
border-bottom:none;
background:none; } /* Ở đây bạn đưa link tấm hình có kích thước 230 x 154 vào sẽ rất đẹp */
#calendar tr:first-child {
empty-cells:show; }
#calendar th {
border:none;
font-size:10px;
line-height:18px;
height:18px;
text-align:center; }
#calendar td {
border:none;
line-height:16px;
text-align:center;
font-size:12px; }
#calendar tfoot td {
text-align:left;
border:none;
height:16px;
padding:2px 3px; }
#calendar td.l {
background:none; }
#calendar td a {
font-size:12px;
color:#FFFFFF;
font-weight:normal; }
#calendar td#today {
background: none; }
#calendar caption {
padding:0; }
#nextmonth, #prevmonth {
font-size:14px;
padding:4px 1px;
width:48%; }
#nextmonth {
font-size:14px;
text-align:right; }
-----------------------
Kiến thức hạn hẹp, chỉ giúp được vài điều, nhưng có thắc mắc xin cứ hỏi, rove sẽ giúp thêm nếu có thể ... rove









« Previous 1 2 3
saihukaru # 26. June 2008, 14:39
(Xí được cái comment 101)
noobiitaa # 26. June 2008, 15:39
rove2012 # 27. June 2008, 16:07
Bạn view source lên mà xem nó nằm trong <Tag> nào nhé, sau đó bạn viết css cho <Tag> đó, và thêm dòng giống vầy nà
>>> background:#000 url('http://files.myopera.com/rove2012/Style/RoveFantasy.jpg');
Còn về vụ ngày tháng năm làm khác đi thì rove cũng ko biết nữa, chắc ý bạn là nằm dọc hay làm gì khác ^^!, nhưng rove cũng ko giỏi lắm về mấy cái này, trình độ chỉ tới đây thôi, bạn thông cảm nhen
blueskypro # 29. June 2008, 00:33
"my account" nó nằm ở đâu thế anh? sao em ko tìm thấy.
noobiitaa # 29. June 2008, 07:08
rove2012 # 29. June 2008, 11:13
còn nobitaa ^^! khách sáo rồi
Sword Laker # 1. December 2008, 11:28
rove2012 # 2. December 2008, 02:30
Sword Laker # 2. December 2008, 06:46
rove2012 # 2. December 2008, 07:13
Sword Laker # 2. December 2008, 07:40
rove2012 # 3. December 2008, 07:48
Sword Laker # 3. December 2008, 08:59
Rất vui được quen bạn, mong sau này sẽ được bạn giúp đỡ
rove2012 # 4. December 2008, 08:52
00hoangsang00 # 17. December 2008, 05:00
00hoangsang00 # 17. December 2008, 05:33
em thay link hinh nen khac ma ko dc anh a.
badboy1986 # 17. December 2008, 07:02
phungtu90 # 17. December 2008, 07:48
rove2012 # 18. December 2008, 02:41
Còn badboy nếu lấy hết code của rove thì search trong code có chữ rove hem thì bạn đổi lại, ko thì nó là tấm hình á, bạn tìm mấy cái link hình ảnh trong code đó, xem nó là tấm nào, rùi vẽ 1 tấm khác thay vào nè ^^!
phungtu: ráng lên em
nh0ck0nljn3 # 10. March 2009, 02:09
rove2012 # 16. March 2009, 10:13
ManhCFA # 4. June 2009, 02:59
rove2012 # 27. July 2009, 01:56
baotuyentran93 # 21. August 2009, 01:36
baotuyentran93 # 21. August 2009, 01:37
baotuyentran93 # 21. August 2009, 01:37
rove2012 # 15. September 2009, 04:14
september17 # 15. September 2009, 09:01
rove2012 # 15. September 2009, 09:15
september17 # 20. September 2009, 02:00