Trang chủ Blog | Các câu hỏi thường gặp | Yahoo! Việt Nam

      Bài mới nhất

      Sửa Đóng
      Bài viết Tìm bài viết:
      Trích dẫn Báo cáo

      Một số thứ linh tinh với 360 Plus.

      Thư mục: IT |
      Quan trọng
      Đăng ngày: 05:21 29-04-2008
      Author: m3Noa - 28 April, 2008 - Copyright © 2008.
        *Please ask for permission before copying this.

      #Cập nhập và bổ sung dần dần. Viết cho vui...| -- Note --
      Local Links:


      1. Ảnh nền tĩnh:
      Ảnh nền ko di chuyển khi cuộn trang:
      Tại phần CSS của Custom theme trong phần Bố trí, chèn thêm đoạn code:               
      body.blog_my {background-attachment:fixed;}

      Nếu dùng hiệu ứng này tốt nhất dùng thêm đoạn code ngăn việc lặp lại ảnh nền:
      body.blog_my {background-repeat:no-repeat;background-attachment:fixed;}

      2. Thiết lập ảnh nền cho từng trang:
      Code:

       body.blog_my
      {background:url(<      image_link>);
      background-color:<      Hex_code>;
      background-repeat:no-repeat;background-attachment:fixed;}

      Muốn thiết lập nền cho trang nào thì thay tên tương ứng.
      Một số trang hay sử dụng:
      - body.blog_my: trang blog mặc định, ngay đầu tiên.
      - body.profile_view:  trang xem thông tin cá nhân của một blogger.
      - body.comment_list: trang Friends List.

      Mấy trang khác ít đụng đến hoặc ko đáng chú ý:
      • body.blog_my_index,
      • body.comment_listing,
      • body.trackback_listing,
      • body.blog_archives_folder,
      • body.blog_archives_date,
      • body.blog_archives_all,
      • body.post_rte,
      • body.post_doodle,
      • body.guestbook,
      • body.subscribe_list,
      • body.post_gb,
      • body.gallery,
      • body.photo_big,
      • body.slideshow,
      • body.photo_upload_pc,
      • body.photo_upload_gallery
      3.Chèn ảnh vào blog mà ko bị mất hình khi ảnh quá lớn:
      360Plus có vẻ hơi bị lạm dụng thẻ Div, do vậy khi chèn ảnh vào bài viết mà có kích cỡ lớn hơn khoảng 600px là coi như sẽ bị "ăn bớt". Để khắc phục tình trạng này, tức khiến cho bức ảnh có thể hiển thị đầy đủ, thì chỉ còn cách thu nhỏ kích cỡ hiển thị của bức ảnh (ko ảnh hưởng đến kích thước thật).VD: Đầu tiên khi chèm 1 ảnh vào bài:



      Sau đấy chuyển qua chế độ HTML code, tìm đến đoạn code của ảnh vừa mới chèn cho thêm đoạn code thiết lập kích thước vào, chỉ cần kích thước chiều dài là đủ:
       <img src="{link_image}" width="{xxx}">
      Để ảnh ko bị mất hình khi hiển thị thì width nên nhỏ hơn hoặc bằng 575, hoặc cách đơn giản nhất là width=100%, khi đấy ảnh sẽ đúng bằng chiều ngang của khung.



      4. Viền khung trong suốt:
      Copy đoạn code này vào CSS:
      Code:

      .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent url(http://nktpro.com/360plus/rc_ne.png) no-repeat right bottom;}
      .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(http://nktpro.com/360plus/rc_nw.png) no-repeat left bottom;}
      .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent url(http://nktpro.com/360plus/rc_e.png) repeat-y right top;}
      .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(http://nktpro.com/360plus/rc_w.png) repeat-y left center;}
      .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(http://nktpro.com/360plus/rc_se.png) no-repeat right top;}
      .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(http://nktpro.com/360plus/rc_sw.png) no-repeat left top;}
      .rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article .rc_bc .bd {background-color:transparent;background-image:url(http://nktpro.com/360plus/transparent_bg.png);}
      #blast .rc_ft {background:transparent url(http://nktpro.com/360plus/blast-sw.png) no-repeat left bottom;}
      #blast .rc_ft div {background:transparent url(http://nktpro.com/360plus/blast-se.png) no-repeat right bottom;}
      --- Credit: http://www.360themes.com/ ---

      5.Thay đổi kích thước module tự tạo:
      Mấy module có sẵn cũng có thể thay đổi đc nhưng ko nên, vì hầu hết chúng đều tự phình ra. Muốn chỉnh độ dài của 1 module tự tạo thì vào CSS gõ đoạn code tương tự như sau:
      Code:
      #user_mod_100X .rc_bd  .rc_bc .bd {height:Ypx;}
      Trong đó X là số thứ tự của module, từ 01 đến 10, còn Y là chiều dài của module tính theo đơn vị pixel.

      6. Thay đổi riêng màu chữ trên blast:
      Nếu có sử dụng nền theme màu tối, chữ các module thường phải màu sáng mới dễ nhìn, nhưng lại nảy sinh vấn đề là khi chỉnh màu chung trong phần thiết kế theme thì nó cũng ảnh hưởng lên màu chữ trên blast, mà blast bình thường lại là nền trắng >> chữ màu sáng rất khó nhìn. Để giải quyết vấn đề này lại mó vào chú CSS chút vậy . Có thể dùng thêm 1 trong 2 hiệu ứng im đậm hoặc chữ nghiêng cho dòng chữ trên blast.

      Đối với các blast thông thường chỉ là đoạn text  ko chèn link:
      Code:
      #blast .rc_bc .bd 
      {
      	font-weight:bold;    /*Chữ im đậm*/
      	font-style:italic;   /*Chữ nghiêng*/
      	color:#xxxxxx;       /*Màu chữ trên blast, là dạng mã hex từ #000000 đến  
      			             #FFFFFF, giá trị càng thấp màu càng tối.*/ 
      }
      Và các blast có chèn link:
      Code:
      #blast .rc_bc .bd a {font-weight:bold;font-style:italic;color:#xxxxxx;}
      Tốt nhất là nên sử dụng cả 2 đoạn code trên cho nó đồng bộ .

      7. Home page button:
      Muốn đường link về trang chủ blog hiện hữu chứ ko phải là một khoảng trống? Click here.

      8.Code hiệu ứng đặc biệt cho bài viết:
      Vốn dĩ chỉ định để sử dụng riêng trên blog này, nhưng giờ thì cũng đã có vài người view code khám phá ra rồi vậy thì ta public luôn . Hiệu ứng thu nhỏ - phóng to kích cỡ bài viết, áp dụng cho các bài viết dài có chứa các đoạn code hay cụ thể như mục đích ra đời của nó là dành để viết Lyrics .

      Hiệu ứng đc sử dụng trong bài viết này: Test Customize CSS và hầu hết các bài viết về sau này.
      Về phần code: --Thêm vào CSS đoạn code này:
      Code:
      #blog_quote{font-size:5px;font-style:italic;color:#FF99FF;background:#000066;}#blog_quote:hover {font-size:12px;font-weight:bold;font-style:normal;color:#CC99AA;background:transparent;}#blog_img img {height:150px;}#blog_img img:hover {height:100%;}

      Sau đấy nếu muốn sử dụng thì trong phần bài viết thêm vào thẻ div để sử dụng lại Style ID này (code bên chế độ HTML):
      Code:
      <div id="blog_quote">Nội dung đoạn text muốn sử dụng hiệu ứng</div>

      Để sử dụng hiệu ứng này cho bức ảnh thì làm tương tự:
      Code:
      <div id="blog_img"><img url="{link_image}"></div>

      9.Thay nền cho phần thông tin cá nhân chứa avatar, calendar:
      Đáng lý là cái này phải nói từ lâu rồi mới phải, có điều nó nhỏ nhặt quá thành ra quên mất, nay thấy có bạn hỏi mới nhớ ra . Để thay nền cho phần khung avatar thì dùng đoạn code sau:

      Code:
      #profile_highlight .bd {background:url([link_image]);}

      Để thay nền cho phần lịch - calendar thì code là:
      Code:
      #calendar .bd {background:url([link_image]);}

      10. Thay nền cho phần tiêu đề các module:
      Đây là đoạn code mình đang dùng, thay thế cho hầu hết tất cả các phần titlebar, nếu ai muốn dùng thì thay phần link ảnh mình muốn vào:
      Code:

      #article_list_module .rc_bd .rc_bc .hd, .hd .titlebar .hd,
      #friendlist_module .hd, .mod-relatives .titlebar,
      .col-150 .rc_bd .rc_bc .hd .titlebar .hd,
      .col-150 .rc_bd .rc_bc .hd .titlebar {
      background:transparent url(http://img55.imageshack.us/img55/5072/modulehdxs6.png) repeat;}

      Còn nếu muốn thay riêng từng phần thì ở đây có một số đoạn code dành cho các phần cơ bản như các module nhỏ dọc hai bên, các module chính nằm giữa bài viết, và cuối cùng là các module nằm ngang trên đầu và bên dưới blog:
      Code:

      .col-150 .rc_bd .rc_bc .hd .titlebar .hd,
      .col-150 .rc_bd .rc_bc .hd .titlebar {
      background:transparent url(-image_link-) repeat;}

      Code:

      .col-600 .rc_bd .rc_bc .hd .titlebar .hd,
      .col-600 .rc_bd .rc_bc .hd .titlebar {
      background:transparent url(-image_link-) repeat;}

      Code:

      .row-920 .rc_bd .rc_bc .hd .titlebar .hd,
      .row-920 .rc_bd .rc_bc .hd .titlebar {
      background:transparent url(-image_link-) repeat;}


      ----
      (Có thể còn tiếp :-" ...)

      Note:
      Bài viết chỉ đề cập đến những thủ thuật về code, là những thứ mà ko phải ai cũng biết, còn những thứ đại loại như các chức năng của blog và cách sử dụng chúng sẽ ko đề cập, đơn giản vì hiện tại dịch vụ blog này đang trong quá trình chỉnh sửa hoàn thiện nên đôi khi những hướng dẫn chức năng ko còn chính xác, thêm nữa là, những chức năng đấy đều có thể tự mày mò tìm hiểu trong quá trình sử dụng =).

      Quay về đầu trang


      Ai thích thì có thể copy, còn việc có dẫn link ghi nguồn hay ko là tùy tâm .
      Trích dẫn (1)
      Tìm tag: Design, Trick, IT, CSS, 360plus, HTML
      Tổng cộng 71 lời bình
      sau (50) sau (50)
      Lời bình mới

      Bài viết về bạn hoặc có tag tên bạn:

      • Chưa có bài nào có liên quan.

      Người đăng ký yêu thích blog này cũng đồng thời thích:

      • Chưa có blog yêu thích nào có liên quan.

      Xem thêm

      Thư mục

      Xem ngày tháng

      <
      2009
      >
      <
      tháng 11
      >
      S M T W T F S
      1 2 3 4 5 6 7
      8 9 10 11 12 13 14
      15 16 17 18 19 20 21
      22 23 24 25 26 27 28
      29 30  

      Bài mới nhất