__________Chùm Bài viết Cho NewBlog _________
Dự kiến của mình là hok viết thêm bài viết dành cho các newblogger nữa nhưng tình hình hiện nay là 360 đã đóng cửa blog nên số blog ở bên đó chuyển qua mái nhà Plus của chúng ta sẽ rất nhiều và như vậy sẽ có rất nhiều newbi .Vì lẽ đương nhiên rồi chuyển qua plus giao diện hoàn toàn mới cách thiết kế blog cũng hoàn toàn mới mẻ nên họ đều là newbi .Chính vì vậy bài viết này tôi sẽ hướng dẫn cơ bản nhất về code css dùng để thiết kế blog cho các bạn .Hy vọng rằng sau bài viết này bạn sẽ vận dụng sáng tạo và áp dụng code và trong blog của mình để blog bạn được đẹp hơn
I_Code Css:
- 1_Đầu tiên Cùng LÀm Quen Với Khung Css Nhá .Khung này dùng để paste code thiết kế cho blog vô đó mà ban .Css nằm ở đâu hả ??
Àh _bạn click Thiết Kế > Theme .- Chọn Chế Độ Tự Chỉnh Sửa > Tiếp .
- Bảng Thiết Kế hiện ra, bạn rê chuột kéo thanh trượt đến phần CSS fía dưới nhé !
Phần bên dưới chính là khung Css để dán code vô đó
Cùng Làm thử Với Bài Làm Trong Suốt Blog Hoàn Toàn Nhá .Bài viết này bạn chỉ việc copy tất cả code trong bài đó và dán vào Css thôi
Các code khác trong các bài còn lại có yêu cầu thay link ảnh và chèn mã màu thêm vào code , tôi sẽ hướng dẫn sau .Tạm Thời bạn cứ làm thử bài này xem !
2 _Chèn mã màu cho code như thế nào ???
Trong lúc thiết kế chèn code vào css một số code có đòi hỏi chèn thêm mã màu vào code đó để tăng thêm tính thẩm mỹ cho phần đó .Có rất nhiều bạn hok bít lấy mã màu và hok biết chách chèn mã màu vào code như thế nào .Vì vậy Tôi sẽ hướng dẫn các bạn ngay bây h nhé
Đầu tiên Tôi lấy Ví dụ1 code có chèn thêm mã màu vào nhé
Code thay đổi màu sắc, kích thước các border xung quanh Comment :
.mod-alist-full .alist-comment li {border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:inset;border-right-style:inset;border-bottom-style:inset;border-left-style:inset;border-top-color:#fff;border-right-color:#fff;border-bottom-color: #fff;border-left-color:#fff;} Hoặc code Thêm viền cho mỗi avatar :
#friendlist_module .rc_bd .rc_bc .hd{height:auto;}
#friendlist_module .rc_bd .rc_bc .bd ul li{border-top:2px dotted #fff;border-right:2px dotted #fff;border-left:2px dotted #fff;}
#friendlist_module .rc_bd .rc_bc .bd ul li:hover{border-top:2px dotted #000;border-right:2px dotted #000;border-left:2px dotted #000;}
_Những chỗ đánh dấu màu hồng là ký hiệu của mã màu :#FFF là màu trắng, #000 là màu đen
#friendlist_module .rc_bd .rc_bc .bd ul li{border-top:2px dotted #fff;border-right:2px dotted #fff;border-left:2px dotted #fff;}
#friendlist_module .rc_bd .rc_bc .bd ul li:hover{border-top:2px dotted #000;border-right:2px dotted #000;border-left:2px dotted #000;}
_Những chỗ đánh dấu màu hồng là ký hiệu của mã màu :#FFF là màu trắng, #000 là màu đen
Đầu tiên bạn cứ copy code vào css như bình thường .Muốn lấy mã màu khác cho code ta chỉ việc làm theo cách sau .Tận dụng bảng màu trên Css Đỡ phải đi đâu xa
Dê chuột vào thanh trượt đến vùng màu mà mình thích
Bôi đen ký hiệu mã màu trong khung đó nhấn copy và thay vào code sau dấu # Ví dụ như#FFF thay lại mã màu của bạn Thành #D10RF9 gì gì đó .
Vậy là bạn đã thay đc mã màu cho code rồi nhá .
Một số code của Kuhồn có viết #mã_màu bạn cũng làm tương tự vậy
3_Lấy link ảnh , xem kích thước của ảnh như thế nào ???
Đối với 1 số code thay nền thì bắt buộc phải chèn thêm cả link ảnh vào thì code mới có hiệu nghiêm .Mà 1 số bạn cũng hok biết lấy link ảnh như thế nào để thay vào code Tiện đây tôi cũng hướng dẫn luôn
Đầu tiên tôi cũng lấy ví dụ 1 code có bắt buộc phải chèn link nhá và thay chiều cao nhá
Code thay đổi nền toolbar khi soạn thảo phần comments
.rte_toolbar {background:#d7d7d7 url(link Hinh) repeat-x top;border-left:1px solid #0448f6;border-top:1px solid #0448f6;border-right:1px solid #0448f6;height:Xpx;}
_/*thay X = Chiều cao cua hinh*/_
Link ảnh thì tùy bạn chọn cho mình một ảnh nền phù hợp muốn lấy link ta chỉ việc nhấp chuột phải vào hình chọn
Bảng Properties hiện ra .tại đây hiện thị đường dẫn của ảnh và các thông số chiều cao của ảnh Muốn lấy link ta bôi đen link đó .Chuột phải chọn copy
Khi thay vào code trên ta sẽ đc
.rte_toolbar {background:#d7d7d7 url(http://www.xemanh.net/images/romance/romantic23.jpg) repeat-x top;border-left:1px solid #0448f6;border-top:1px solid #0448f6;border-right:1px solid #0448f6;height:441px;}
Linh ảnh đã đc thay vào code chỗ link Hinh
Xpx đã đc thay bằng đúng kích thước chiều cao thật của hình 441px .từ ví dụ trên mà bạn cũng áp dụng cho các code còn lại như vậy nhá
Lấy thêm ví dụ về code để kết thúc phần này
Code thay nền cho nóc nhà
#blog_masshead{font-size:12px;color:#ccc;background:transparent url(thay link ở đây) repeat-x 0 5px;height:Xpx;}
#blog_masshead a{color:A;text-decoration:blink;}
#blog_masshead a{color:A;text-decoration:blink;}
X : Chiều cao của ảnh ...........
A: Mã Màu Chữ ......
A: Mã Màu Chữ ......
bạn cũng áp dụng như tôi hướng dẫn ở trên
II_Module ;
Di chuyển Module như thế nào ?????
Nhiều bạn hok biết cách di chuyển vị trí của các module sang một vị trí khác .Thực ra thì chuyện này rất đơn giản .đầu tiên bạn kích vào thiết kế _Kéo chuột xuống module cần di chuyển _Nhấp vào giữa thanh tiêu đề ,giữ chuột và dùng tay kéo và thả nó đến vị trí cần bỏ ,nhớ là khéo tay chút bạn nhá .Đơn giản phải hok nào
Tại sao các Module Phụ của tôi bị rớt ???
+Khi người xem duyệt blog bằng trình duyệt IE nếu chèn các link ảnh quá to vào module tự tạo phần Module phụ bên phải màn hình sẽ khiến cho các Module này bị rớt xuống
_Đôi khi bạn chèn một ứng dụng Flash hay 1 video ,1 list nhạc vào Module phụ đó cũng sẽ làm toàn bộ Module bên đó bị rớt . Cách khắc phục chính là bạn phải biết bố trí các module sao cho phù hợp , chèn hình ảnh ,các ứng dụng phim flash sao cho phù hợp đúng kich thước chiều dài cho module này chỉ nên là 150 thôi
2_Hoặc bạn để Module bạn bè bên phải cũng sẽ làm toàn bộ module bên này bị rơi xuống cách khắc phục là bạn nên để nó ở bên trái là tốt nhất để cùng bên với module Profile hoặc có thể để ra module chính
+ Còn đối với Trình duyệt Mozilla Firefox thì mình hok thấy hiện tượng này xảy ra !
Nhưng dù sao bạn cũng nên sắp xếp và bố trí hình ảnh và các module sao cho phù hợp khi người xem blog nào cũng hok thể bị mắc lỗi như trên là tốt nhât
Hy vọng đây là những bài học cơ bản nhất cho các bạn mới thiết kế blog hoặc nó cũng có thể là những mẹo vặt cho bạn trong khi trang trí noc nhà của mình nhá
bài viết thuộc bản quyền
Vui lòng ghi lại Nguồn nếu sử dụng lại entry này bạn nha !
Chúc Vui !
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét