Skip navigation.

Hướng dẫn đổi giao diện Blog Opera - Phần 1

Vừa cập nhật ngày 2.12.07 :D

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 :frown:. Tùy chọn này tùy theo cái kiểu giao diện mà bạn chọn ở My account >>> Change design nữa nha, nó lấy cái giao diện đó, và chỉnh sửa lại 1 tí từ đó nà :D ... của rove là Leaves
- 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

Kể về người em của tôiCrt Z

Comments

saihukaru 26. June 2008, 14:39

hì hì. đùa thôi mà..p: CSS không được bảo vệ nên lấy rất dễ
(Xí được cái comment 101)

noobiitaa 26. June 2008, 15:39

Thanks bạn ^^

rove2012 27. June 2008, 16:07

bạn Nobita ơi, rove giúp bạn tí nhé, bạn xem thử nhé, muốn làm background cho chữ readmore thì đầu tiên bạn phải tìm được là chữ readmore nằm thuộc <Tag> html nào nà

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

anh rove oi em làm ko đc na`?
"my account" nó nằm ở đâu thế anh? sao em ko tìm thấy.

noobiitaa 29. June 2008, 07:08

thanks bạn nhiều ^^, tình hình là mình phải thêm đoạn .readmore {} vì tìm hoài ko thấy ^^. Nhưng lại ko thay đổi vị trí của chữ "readmore" mặc định được +_+

rove2012 29. June 2008, 11:13

em login vào thì sẽ thấy My account ở góc trên cùng bên trái màn hình đó em

còn nobitaa ^^! khách sáo rồi

Sword Laker 1. December 2008, 11:28

Theme ấn tượng thật đấy!! Có phải của bạn tự làm không vậy??!

rove2012 2. December 2008, 02:30

:D tat nhien minh tu lam roi, thiet tinh

Sword Laker 2. December 2008, 06:46

Thế mình đoán bạn học mỹ thuật hay kiến trúc gì đó, đúng không nhỉ? p: Bạn hay thật, giỏi cả vẽ vời thật lẫn kiến thức web :x

rove2012 2. December 2008, 07:13

:D minh` ha, minh la ky thuat viet lap trinh web, ve viec my thuat minh chi biet so so thoi, tai dam me Final Fantasy nen minh moi lam themes nay

Sword Laker 2. December 2008, 07:40

Oh, vậy bạn cho mình hỏi mấy bức fan art kia là do bạn vẽ tay rồi scan hay sử dụng phần mềm gì? Mình cũng thích vẽ vời, trước cũng hay nghịch Artist's Sketchbook trong Opera nhưng gần đây thì lại bị lỗi và nó cũng không được tiện cho lắm.

rove2012 3. December 2008, 07:48

vậy sao :D, mình thì ko phải dân Art đâu, chỉ lùng sục web của Fantasy, do các fan hâm mộ vẽ đó, mình chỉ xử lý photoshop sao cho dễ nhìn thôi à ^^!

Sword Laker 3. December 2008, 08:59

Oh, ra là vậy p:

Rất vui được quen bạn, mong sau này sẽ được bạn giúp đỡ :smile:

rove2012 4. December 2008, 08:52

:D rove cung ga lam, ko co biet nhieu dau

00hoangsang00 17. December 2008, 05:00

em moi lap blog ma ko hieu lam ve lam hinh nen anh a anh co the viet ro hon dc ko anh

00hoangsang00 17. December 2008, 05:33

anh oi giup em voi em van ko hieu nhung gi anh noi?
em thay link hinh nen khac ma ko dc anh a.

badboy1986 17. December 2008, 07:02

hic, tui lười biếng chỉnh code, phang lun cái của revo vào, giờ blog của tui lại có chữ revo' blog, giờ sao chỉnh lại được, help me!!!!

phungtu90 17. December 2008, 07:48

em cũng phải thử mới dc :smile:

rove2012 18. December 2008, 02:41

Em hoangsang mà muốn chỉnh hình thì em phải biết 1 chút kiến thức về tin học nà, và để làm themes cho riêng mình em phải biết css :D

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 :D

nh0ck0nljn3 10. March 2009, 02:09

anh oi lam sao ma blog anh ben phai co chia cac cot nhu : game poll , tag gi nua ah , lam sao giup em voi , nick em la: thatlonganhchiyeuem3112 chi dum em, em kum on anh nhieu

rove2012 16. March 2009, 10:13

:D em vào My Accout, rồi vào phần slide and menu á :D, em check cái nào thì nó có cột ấy ở ngoài này thui à

ManhCFA 4. June 2009, 02:59

rat chi la duoc day :D

rove2012 27. July 2009, 01:56

^^!

baotuyentran93 21. August 2009, 01:36

rove photoshop minh vo web nao za

baotuyentran93 21. August 2009, 01:37

minh thi hok bik chut nao ve css ca

baotuyentran93 21. August 2009, 01:37

nen dang hoc hoi chi cho minh chut it nha rove

rove2012 15. September 2009, 04:14

vietphotoshop.com nhe ban :D

september17 15. September 2009, 09:01

Anh Rove hình background của trang galamusic độ phân giải là bao nhiêu vậy mà làm sao kiếm được mấy hình đó (google search hình lớn cũng chỉ ở độ phân giải làm hình nền thôi, em muốn tìm một hình xe hơi nào đó). Em đang làm một website để nộp nè nên sau này chắc làm phiền anh nhiều.

rove2012 15. September 2009, 09:15

em len google tim` thi nhieu lam, hinh galamusic la hinh suu tap o cac dien dan thiet ke web :D

september17 20. September 2009, 02:00

Anh rove chỉ cách chèn slideshow như trong trang gala của anh đi. Nếu được thì anh lập luôn một post mới đi. Thằng em gà trông đợi cả vào anh đó.:D