Chào các bạn, nếu bạn đang cảm thấy chán nản với giao diện của các website ví dụ như youtube, facebook hay website nào đó (bạn không quản lý) nhưng bạn lại muốn đổi giao diện trang đó, thường thì các bạn thường tải các extension có sẳn rồi chọn theme thôi đúng không ? Cách này khá là nhanh gọn, nhưng sẽ hơi bị gò bó, với lại cái này hầu như chỉ cho những trang lớn như facebook, youtube,.. còn những trang khác hầu như là không có. Trong hôm nay mình sẽ hướng dẩn các bạn cách thay đổi giao diện website khác đơn giản. Cái này cần đòi hỏi 1 tý kiến thức về CSS, nếu bạn không biết 1 chút gì về CSS thì cũng có thể chọn theme sẳn.
Thay đổi giao diện website bất kì đơn giản với Stylish
Hình Minh Họa

Các Bước Thực Hiện

Bước 1: Cài Extension Stylish tại đây
Bước 2: Vào trang bạn cần chỉnh sửa, trên thanh các công cụ bạn click chọn biểu tượng logo của Stylish → Ba chấm → Create New Style
Bước 3: Bước này là bước quan trọng nhất, các bạn chỉ cần nhập CSS cần sửa của các bạn vào trong ô Code 1, sau khi sửa xong các bạn ấn Save để lưu lại giao diện.
Thay đổi giao diện website bất kì đơn giản với Stylish
Hình minh họa

Thay đổi độ lớn khung sửa code của Blogger

Nếu bạn là một người thường xuyên chỉnh sửa template bằng khung sửa code live trên Blogspot một thời gian lâu thì thấy sẽ hơi khó chịu, gò bó vì khung không được hiển thị hết vì bị các phần tử khác chiếm diện tích. Nên mình đã vận dụng thủ thuật thay đổi giao diện trên để ẩn đi các phần tử không đáng hiển thị, và kéo dài khung code ra. Nếu các bạn cần thì có thể lấy đoạn code bên dưới.

header.gb_Xa{display:none}
#blogger-app{background: #fff;}
.rb .K3JSBVB-i-m{padding-top:0}
.K3JSBVB-lb-f{display:none}
.K3JSBVB-lb-e{top:25px!important}
.K3JSBVB-lb-l, .K3JSBVB-lb-e{right: 18px;}
.K3JSBVB-j-a{bottom: -38px;}
.CodeMirror{border: 1px solid #c3c3c3;}
.editor .composeBox{max-width:90%}
#postingComposeBox{width:80%; }

Thay đổi giao diện website bất kì đơn giản với Stylish
Trước khi chỉnh sửa
Thay đổi giao diện website bất kì đơn giản với Stylish
Sau khi chỉnh sửa

Lời Kết

Sau khi xem xong bài viết này thì chắc hẳn trong đầu các bạn nảy ra nhiều ý tưởng mới lắm nhỉ :)) Ngoài ra Extension còn rất nhiều ứng dụng hay nữa, nhưng mình sẽ để cho các bạn tự mày mò :)) Mày mò thế chắc sẽ thú vị hơn đấy. Như vậy là mình vừa hướng dẫn xong các bạn cách thay đổi giao diện website bất kì đơn giản với Stylish. Nếu các bạn có theme nào hay thì đừng quên share cho anh em cùng sử dụng nhé!
Chúc các bạn thành công!

CHIA SẺ BÀI VIẾT

- - 83 bình luận
CHUYÊN MỤC

BÌNH LUẬN (83)

  1. Icon này anh làm sao vậy ? "→", nhân tiện :v post hay lắm !

    Trả lờiXóa
    Trả lời
    1. Thanks ♥ Icon đó nằm trong bảng ký tự đặc biệt trên thanh công cụ viết blog mặc định của blogspot nhé!

      Xóa
    2. Đây nha https://i.imgur.com/Yo4Kq0y.png

      Xóa
    3. Star Nhân hỏi, Trịnh Đăng An vào rep, và cuối cùng Hà Huy Hoàng vào cảm ơn @@

      Xóa
    4. thật ra là cùng 1 người nhé, ko tin click vào tên tôi trong comment và trịnh đăng an đi :v

      Xóa
    5. Là 2 người cha nội à -_-

      Xóa
    6. 1 người mà:v, click vào profile để xem á

      Xóa
    7. Star Nhân IT đâu, không tính à :))

      Xóa
    8. :v đọc comment của mấy thánh nhân trên trời xuống không hiểu gì

      Xóa
  2. Hay. Đang sài J2S mỗi tội chỉ edit được Fb & YTB

    Trả lờiXóa
    Trả lời
    1. Vậy thì chuyển sang dùng cái này ngay và luôn đi, xài dễ hơn nhiều đấy ^^

      Xóa
  3. À hóa ra đây là lí do gửi 2 cái ảnh hồi chiều :))

    Trả lờiXóa
  4. Hữu ích lắm anh, cái này em thấy giờ đang là trào lửu rất hot <3

    Trả lờiXóa
  5. ra bài về cách chặn f12 đi :v

    Trả lờiXóa
  6. cái stylish biết lâu rồi khoảng lớp 4 5 gì đấy ngồi nghịch theme facebook... còn code thì mới biết được 1 2 năm thôi :v nên hồi đó chả biết nghịch css

    Trả lờiXóa
  7. Cái stylish này tôi biết lâu rồi còn code thì chưa giỏi lắm dù gì cũng cám ơn ông đã share nhé

    Trả lờiXóa
    Trả lời
    1. Okay, nếu nghịch được cái gì hay thì share cho mn với nha ^^

      Xóa
    2. Đã test và thấy có sự thay đổi :v

      Xóa
    3. Nghịch cái stylish của ông ý Blogger =))

      Xóa
    4. Nghịch cái nào :v nghịch cái làm lớn phần edit code hả?

      Xóa
    5. đúng rồi nghịch cái làm lớn edit code cho tiện đó :3

      Xóa
  8. Viết CSS cũng là 1 vấn đề anh Cường ạ :3

    Trả lờiXóa
    Trả lời
    1. Thì đối với ae chơi blogspot thì ít ra cũng biết một vài thuộc tính CSS đơn giản chứ :))

      Xóa
  9. em vừa test fb xong rất tiện ích thank a đã share :3

    Trả lờiXóa
    Trả lời
    1. Chắc thú vị lắm nhỉ =)) cái này mà có thêm add HTML thì khỏi nói :3

      Xóa
  10. tuấn anh ơi chỉ tôi làm khung chứa code được k vậy

    Trả lờiXóa
    Trả lời
    1. Khung này đơn giản mà, nếu cần thì view ra đi mà lấy, còn không biết view thì nói để mình gửi luôn css nhé :)

      Xóa
  11. xàm xí đú - có khác nhiêu đâu - bình thường đã rất đẹp trai rồi :v

    Trả lờiXóa
    Trả lời
    1. Khác nhiều hay ít phụ thuộc vào kiến thức + độ thông minh của người css cho trang đó :v

      Xóa
  12. Hay quá anh nhỉ :))
    Nay em mới biết

    Trả lờiXóa
  13. Oke anh
    À mà cho em cái lk đi anh nhỉ ^_^

    Trả lờiXóa
  14. [img]https://4.bp.blogspot.com/-IwGmHLGHXvE/WxZtSZW2fVI/AAAAAAAAPrQ/PV4mRowGkeoVTG9YPHE3OnHOjXei-eaCQCK4BGAYYCw/s1600/thumbnail.png[/img]

    Trả lờiXóa
  15. Trả lời
    1. Có thêm ý tưởng gì cho cái trang edit của blogger đó không ? Làm cho nó khác giao diện đi chẳng hạn =))

      Xóa
    2. Định edit nó thành darkmode luôn code cho đỡ đau mắt hihi

      Xóa
    3. Giờ nó chà bá lửa luôn rồi, code lòi mắt @@
      https://i.imgur.com/yTPxT4S.png

      Xóa
    4. Hay đó, để thử làm giống xem :3

      Xóa
    5. nếu làm sang được darkmode thì nhớ share nha :v

      Xóa
    6. Nay mai sẽ có trên bacsiwindows.com :3

      Xóa
  16. quá hay ! cho em xin được đặt liên kết ạ
    Tên hiển thị:Quốc Bảo Blog
    Mô tả:Tâm sự - chia sẻ
    Link blog: https://quocbaoblogit.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Hiện tại có 6 bài viết và 12 bình luận. Font của template còn lỗi ...

      Xóa
  17. [img]https://4.bp.blogspot.com/-IwGmHLGHXvE/WxZtSZW2fVI/AAAAAAAAPrQ/PV4mRowGkeoVTG9YPHE3OnHOjXei-eaCQCK4BGAYYCw/s1600/thumbnail.png[/img]

    Trả lờiXóa
  18. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  19. Bác cho em hỏi ngoài lề tí được không ạ? Làm thế nào để được hình thumb bao gồm cả máy tính, điện thoại, Ipad vậy bác? Giồng như hình trên của bác đó nhưng là test luôn blog của mình hiện trên đó vậy?
    Không biết diễn tả như vậy bác hiểu ko nhỉ? Đại loại thế này chắc dễ hiểu là mình có thấy trên 1 site bán theme blogger, theme này được giới thiệu là responsive với các thiết bị màn hình và có chụp 1 hình thumb tên blogger đó hiển thị trên hình thumb đó? Mình hỏi là cách nào làm được điều đó vậy, sau đó chụp cái hình về dán lên site của mình đó.
    Cảm ơn bạn nhé....

    Trả lờiXóa
    Trả lời
    1. Bạn thử vào trang http://responsivedesignchecker.com/ xem sao.

      Xóa
    2. Hoặc muốn giống thumbnail template của mình thì dùng trang này cũng được : http://ami.responsivedesign.is/

      Xóa
  20. Cảm ơn bạn đã hiểu ý mình, chỉ sợ mình diễn tả không ai hiểu, mình không rành về cái này lắm. Cả 2 trang trên bạn đưa sao nó không được đối với kênh youtube nhỉ? Nhưng mình thử site của bạn thì được. Nhưng làm sao để lấy hình đó về hả bạn?

    Trả lờiXóa
    Trả lời
    1. Sử dụng với kênh youtube là như thế nào nhỉ ? Muốn lấy hình về thì bạn chụp màn hình và cắt ảnh ra bằng photoshop hay paint gì đó là được.

      Xóa
  21. Tức là mình đưa link của 1 kênh youtube vào để test thì nó không hiển thị gì hết, nhưng thử với các website khác thì bình thường VD: site của bạn chẳng hạn.

    Trả lờiXóa
    Trả lời
    1. Chắc là mấy trang này không hỗ trợ cho trang Youtube hay Youtube chặn gì đó. Mà bạn làm trang bán template thì cần gì đến kênh youtube nhỉ.

      Xóa
  22. Không, mình làm video bên youtube thôi chứ không phải bán temp đâu.

    Trả lờiXóa
  23. hjhj add lại fb tui bác fb kia bị rjp oi` fb.com/faye2710

    Trả lờiXóa
  24. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  25. có stylish cho facebook ko anh ?

    Trả lờiXóa