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

      Tên blog

      Sửa Đóng

      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

      Theme giống 360 Yahoo thật đơn giản

      Thư mục: [♥Thủ Thuật Y!Plus♥] |
      Quan trọng
      Đăng ngày: 22:05 05-06-2009

      Bài viết dành cho những người mới bắt đầu viết blog 360plus hoặc không có thời gian thiết kế theme cho blog của mình

      Nhằm giúp cho một số bạn mới chuyển nhà qua Yahoo Plus có thể dễ dàng tiếp cận với cách tạo Theme của Yahoo Plus.

       Blog xin bổ xung bài viết hướng dẫn về tạo theme 2 mảnh giống 360 cũ.

      -Mình thấy có một số bạn kêu Plus giao diện kém và xấu,xin thưa với các bạn hoàn toàn không phải vậy, đẹp hay xấu còn phụ thuộc vào từng người và vào khả năng thiết kế.360 cũ hầu như rất ít tuỳ biến nhưng lại có thể up ảnh theme trực tiếp lên Blog.Còn đối với Plus hơi zic zắc một tí.Nhưng không sao, đọc bài này sẽ Ok ngay.

      -Dành cho các bạn muốn sử dụng theme 2 mảnh cũ của 360.

      http://files.myopera.com/co0l.l0ve/Plus/Ple.jpg

      Theme 2 mảnh giống 360 Yahoo 

      body.blog_my, 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.comment_list, body.subscribe_list,
      body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery
      {background:#ma_mau url(Link Anh Nen) no-repeat fixed bottom;}

      ·         -Đoạn code trên giúp bạn trang trí phần nền dưới cùng của Blog.Phần này khi ghép với theme 2 mảnh
      bạn chỉ thấy viền nhỏ ở vòng quang,và khi load Blog thì thấy toàn bộ cái nền này.Bạn có thể để màu sao cho phù hợp với theme,hoặc sử dụng ảnh nền,hoặc
      thay đổi các thuộc tính của dòng dưới cùng.

      ·         -Để cái ảnh nền này tương thích với tất cả các độ phân giải các bạn có thể thay bằng thuộc tình center để nó cân ở giữa,hoặc lặp lại theo chiều thẳng đứng repeat -y,tuỳ theo thiết kế của bạn mà vận dụng hợp lý.

      ·         -Chú ý: Với các máy có độ phân giải thấp 800x600 chẳng hạn,bạn sẽ không nhìn thấy ảnh nền này,bạn cũng nên chú ý thuộc tính center,vì nếu không có nhiều người dùng LapTop sẽ thấy nó bị lệch.

       

      body{background:#FFFFFF;}

      #doc2, #doc{background:#FFFFFF url(Link anh phia tren) no-repeat center top;}

      #bd{background:transparent url(Link anh duoi) no-repeat center bottom;}

      ·         -Phía trên là code hiện thị theme 2 mảnh,cái màu nền background rất quan trọng vì cũng giống như theme của 360 yahoo ở phần giữa 2 theme sẽ có một khoảng
      trống,các bạn phải phối màu làm sao cho như là một ảnh,khi download ở các trang share theme sẽ có phần setting cho bạn biết mã màu ở phần đó,
      hoặc bạn cũng có thể dùng các phần mền để tìm mã màu.
      Linh anh phia tren: Thay bằng ảnh Top
      Link ảnh dưới:Thay bằng link ảnh bottom
      -Bạn có thể sự dụng ngay cái theme của 360 cũ của bạn cũng được

      CÁCH LÀM

      ·         -Các hình ảnh lấy làm theme các bạn có thể sử dụng ảnh theme cũ của mình,hoặc vào các diễn đàn,ví dụ tại TruongTon.net (tại đây) để chọn mẫu thêm.Sau đó lấy link bằng cách bấm chuột phải lên ảnh mà bạn chọn,chọn Properties /URL với IE hoặc Location với FF( Cái dòng có dạng http://i73.photobucket.com/albums/i213/dhquan8x/THEME/design_Top_87a8b8.jpg như náy ý).

      ·         Bạn có thể lấy trực tiếp hoặc copy về,upload lên host riêng của bạn nha,rồi thay cái địa chỉ ảnh vào cái (Link ảnh) trong code.

      ·         -Lưu ý: Các bạn có thể tải ảnh lên photobucket,flicrk,myopera,hoặc bất kì trang nào cho tải ảnh,nếu Blog bạn đông người xem,cũng cần chú ý đến vấn đề bằng thông,như photobucket chẳng hạn,nhanh bị hết băng thông lắm.

      ·        
      -Mã màu là một dãy số và chữ bắt đầu bằng dấu # và 6 kí tự phía saၵ (ví dụ:#FFFFFF << Các bạn có thể vào đây để xem bảng mã màu tại đây
      -Khi đã chỉnh sủa code xong thì vào Thiết kế/Theme/Chế độ tự sửa/CSS rồi chèn code vào đó nha.

       

      3 PHÚT LÀ XONG

      Nói thì dài dòng thế thôi,thực tế bạn chỉ cần (vào đây) để chọn 1 cái theme ưng ý. Sau đó tìm lấy đường link ảnh giống hướng dẫn trên.

      Ví dụ: Mình tìm được cái ảnh Top như này:

      http://i73.photobucket.com/albums/i213/dhquan8x/THEME/design_Top_87a8b8.jpg

      -Ảnh dưới như này:

      http://i73.photobucket.com/albums/i213/dhquan8x/THEME/Sdesign_Bottom_87a8b8.jpg

      -Mã màu: #87a8b8

      Thay vào đoạn code dưới:

      body.blog_my, 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.comment_list, body.subscribe_list,

      body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery

      {background:#FFCC00 url(http://files.myopera.com/co0l.l0ve/Valentine/bg_forum1.jpg) repeat-y center fixed;}

      body{background:#87a8b8;}

      #doc2, #doc{background:#87a8b8 url(http://i73.photobucket.com/albums/i213/dhquan8x/THEME/design_Top_87a8b8.jpg) no-repeat center top;}

      #bd{background:transparent url(http://i73.photobucket.com/albums/i213/dhquan8x/THEME/Sdesign_Bottom_87a8b8.jpg) no-repeat center bottom;}

      .row-920 .rc_bd  .rc_bc .hd .titlebar .hd, .row-920 .rc_bd  .rc_bc .hd .titlebar{background:transparent;}

      .row-920 .rc_bd  .rc_bc .bd {background:transparent;}

      .col-920 .rc_bd .rc_bc .bd {background:transparent url(http://files.myopera.com/co0l.l0ve/PhuongLe/cool-trongsuot.png);}

      .col-150 .rc_bd  .rc_bc .bd {background:transparent;}

      .col-150 .rc_bd .rc_bc .bd {background:transparent url(http://files.myopera.com/co0l.l0ve/PhuongLe/cool-trongsuot.png);}

      .col-150 .rc_bd  .rc_bc .hd .titlebar .hd, .col-150 .rc_bd  .rc_bc .hd .titlebar{background:transparent;}.col-150 .rc_bd .rc_bc .hd .titlebar .hd, {background:transparent;}

      .col-600 .rc_bd  .rc_bc .bd {background:transparent;}

      .col-600 .rc_bd .rc_bc .bd {background:transparent url(http://files.myopera.com/co0l.l0ve/PhuongLe/cool-trongsuot.png);}

      .col-600 .rc_bd  .rc_bc .hd .titlebar .hd, .col-600 .rc_bd  .rc_bc .hd .titlebar{background:transparent;}.col-150 .rc_bd .rc_bc .hd .titlebar .hd, {background:transparent;}

      #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent;}

      #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent;}

      #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent;}

      #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent;}

      #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent;}

      #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent;}

      #blast .rc_ft {background:transparent url(http://files.myopera.com/c4-classical/blastcool/1.png) no-repeat left bottom;}

      #blast .rc_ft div {background:transparent url(http://files.myopera.com/c4-classical/blastcool/2.png) no-repeat right bottom;height:31px;}

      #blast .rc div {background:transparent url(http://files.myopera.com/c4-classical/blastcool/3.png) no-repeat right bottom;height:26px;}

      #blast .rc {background:transparent url(http://files.myopera.com/c4-classical/blastcool/4.png) no-repeat -8px bottom;}

      #blast .rc_bd div.rc_bc {background:transparent url(http://files.myopera.com/c4-classical/blastcool/5.png) repeat-y right top;}

      #blast .rc_bd {background:transparent url(http://files.myopera.com/c4-classical/blastcool/6.png) repeat-y -8px top;}

      #blast .rc_bc .bd{font-weight:bold;font-style:italic;background:transparent url(http://files.myopera.com/c4-classical/blastcool/7.png) right repeat-y;}

       

       

       

      .cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background:none;}

      .alist-comment #comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist #comments-listing .alist-comment {background:none;}

      .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent;}

      #mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}

      #photo_highlight .ft {background:transparent;}

      #blog_title .bd{background:transparent;}

      #folder .bd ul li {background:transparent url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_open.gif) no-repeat center left;border-top:1px dotted #5F04B4;}

      #article_new .bd ul li {background:transparent url(http://dl2.glitter-graphics.net/pub/439/439702yc1s6yyoii.gif) no-repeat center left;border-top:1px dotted #5F04B4;}

      #update_date .rc_bd .rc_bc .bd {background:transparent url(http://dl.glitter-graphics.net/pub/725/725451hqye09hovg.gif)no-repeat center left;border-top:1px dotted #5F04B4;}

      #comment_new .bd ul li {background:transparent url(http://dl9.glitter-graphics.net/pub/726/726619qh3pubk3oa.gif) no-repeat center left;border-top:1px dotted #5F04B4;}

      #footer .ft .provider p, #footer .ft .info p, #footer .ft .rights p, #footer .ft .privacy p, #footer .ft .disclaimer p, #footer .ft .provider h4, #footer a, .rights, #footer {font-size:0px;color:transparent;}


       

      Sẽ cho ta kết quả

      shttp://files.myopera.com/co0l.l0ve/Plus/cool.jpg

      PS:Lưu ý mấy chỗ tô đậm kia thôi,các đoạn code còn lại có tác dụng làm mờ Blog của các bạn,và còn rất nhiều hiệu ứng khác nữa,các bạn cần dần,dần tìm hiểu sau nhé. Chúc thành công!

      Bạn nào chưa làm được thì gửi cho mình 2 link ảnh và mã màu,chỉ 1 phút là bạn đã có 1 Blog như ý
      -Bạn nào trong quá trình làm theme báo lỗi "Invalid data structure" cũng đừng vội lo,có thể có quá nhiều bạn sang Plus lúc này nên bị vậy,bạn cứ nhấn lại 1 vài lần là ok ngay mà.
      Bài viết được cập nhật từ Cool.love's blog
      Trích dẫn (0)
      Tổng cộng 28 lời bình
      Lời bình mới