Hướng dẫn tùy biến giao diện Blogger.com bằng Stylish tuyệt đẹp!
/ lúc / 18 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Chào các bạn, chào mừng các bạn quay trở lại với Bác Sĩ Windows Blog - bacsiwindows.com/blog.
Như đã giới thiệu ở bài viết trước về tiện ích mở rộng Stylish trên trình duyệt web. Thì bài viết này mình sẽ chia sẻ cho các bạn tất cả CSS mà mình viết để chỉnh sửa giao diện trang Blogger.com lại cho đẹp mắt hơn, tiện dụng hơn và đặc biệt là hoàn toàn bằng CSS!

Xem trước [Demo]


Những thay đổi mới

  • Xóa bỏ thanh top menu và một số thứ không cần thiết.
  • Thu gọn thanh menu bên trái thành dạng trượt (slide menu).
  • Mở rộng khung code và khung đăng bài viết.
  • Chỉnh sửa các nút (button) cho đẹp mắt hơn.
  • V..v... đang cập nhật.

Cách thực hiện

Bước 1. Cài đặt Extension Stylish (xem tại đây). Nếu cài đặt rồi thì bỏ qua bước này.
Bước 2. Click chuột vào biểu tượng Stylish kế bên thanh địa chỉ, tiếp tục click vào nút 3 dấu chấm, chọn Create New Style
Bước 3. Dán toàn bộ CSS bên dưới vào khung code hiện ra.
/* Developed by BacSiWindows.com */
header.gb_Xa,.K3JSBVB-i-p{display:none}
#blogger-app{background:#fff}
.rb .K3JSBVB-i-m{padding-top:0}
.K3JSBVB-lb-f,.K3JSBVB-i-C .blogg-tab-separator,button.blogg-menu-button .blogg-disclosureindicator{display:none}
.K3JSBVB-lb-e{top:25px}
.K3JSBVB-lb-l,.K3JSBVB-lb-e{right:18px}
.K3JSBVB-j-a{bottom:-38px}
.CodeMirror{border:1px solid #ededed}
.editor .composeBox{max-width:100%}
#postingComposeBox{width:95%}
.K3JSBVB-kb-l{left:70px;right:10px}
.K3JSBVB-kb-e{left:70px;right:10px;top:40px!important}
.rb .K3JSBVB-i-C{background:#fff}
.blogg-tab .K3JSBVB-r-e{float:right;font-size:20px;width:36px;height:35px;text-align:center;border-radius:100px;background:#ccc;line-height:36px}
.blogg-tab.selected .K3JSBVB-r-e{background:#7577a9;color:white}
.K3JSBVB-r-f{padding:0 0 0 15px;transition:.5s}
.rb .K3JSBVB-i-B{left:-14%;z-index:99999;transition:.5s}
.rb .K3JSBVB-i-B:hover{left:0;box-shadow:0 0 50px rgba(0,0,0,.15)}
.rb .K3JSBVB-i-B:hover .K3JSBVB-r-f{padding:0}
.blogg-menu-popup{z-index:99999999999999;box-shadow:0 0 50px rgba(0,0,0,.15)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#ccc}
::-webkit-scrollbar-thumb:active{background:#888}
.K3JSBVB-i-m{padding-left:75px}
.blogg-tab .K3JSBVB-A-c{padding:10px 18px}
.K3JSBVB-i-j button .blogg-menu-button-content,.K3JSBVB-i-n,.blogg-menu-button-content .K3JSBVB-i-n{width:100%!important;max-width:100%!important;text-transform:capitalize}
.blogg-menu-popup .popupContent{border:0}
.K3JSBVB-i-j button{background:transparent!important;text-transform:none!important;color:#444!important;font:500 16px Roboto!important}
button.blogg-button,button.blogg-button:hover,button.blogg-button.selected,button.blogg-button.selected:hover,button.blogg-button:active{border:0;outline:0;box-shadow:none;border-radius:100px;background:#f2f3f5;font-size:12px;color:#666;text-transform:uppercase;font-family:Roboto,sans-serif}
Bước 4. Bấm vào nút Specify, chọn URLs on the domain, điền vào blogger.com rồi bấm Add.
Cuối cùng đặt tên và bấm Save là xong!

Tổng kết

Đây là phiên bản đầu tiên do vậy nên có thể chưa hoàn thiện 100%, mình sẽ thường xuyên cập nhật các style mới nhất tại bài viết này, hãy lưu bài viết hoặc chia sẻ để được cập nhật bài viết mới nhất nhé! Chúc bạn thành công.

BÌNH LUẬN VỀ BÀI VIẾT (18)

avatar
Star Cường IT ­

Đỉnh?

TRẢ LỜI
avatar
Trường Nguyễn

Dink kout! =))

TRẢ LỜI
avatar
Administrator

pro vãi

TRẢ LỜI
avatar
Trường Nguyễn

Thank you! :3

TRẢ LỜI
avatar
Lê Hồng Nam

đỉnh của pro

TRẢ LỜI
avatar
Trường Nguyễn

Thank you! ;)

TRẢ LỜI
avatar
Nhân Hữu

Trước giờ em chỉ có thấy người ta dùng stylish cho facebook này nọ...đây là lần đầu tiên em thấy sử dụng được trên blogspot. Bác Pro quá

TRẢ LỜI
avatar
Hà Huy Hoàng

pro :v vãi

TRẢ LỜI
avatar
Việt Hưng

không làm được :(

TRẢ LỜI
avatar
Trường Nguyễn

Stylish có thể dùng trên tất cả các trang web nhé, không ngoại trừ trang nào cả !!

TRẢ LỜI
avatar
Trường Nguyễn

Thank you bro!

TRẢ LỜI
avatar
Trường Nguyễn

Bị lỗi gì mà k làm được?

TRẢ LỜI
avatar
Việt Hưng

À không , làm được rồi tại bài viết không nói turn on stylish nên không bật ! :)

TRẢ LỜI
avatar
Trường Nguyễn

Mặc định khi cài là nó tự bật chứ nhỉ!? :D

TRẢ LỜI
avatar
Minh Nhựt Nguyễn

Bị lỗi bác êi
https://i.imgur.com/z0BXyZy.png

TRẢ LỜI
avatar
Trường Nguyễn

Không phải lỗi, nó như vậy đó.

TRẢ LỜI
avatar
Trường Nguyễn

Đây là phiên bản đầu tiên do vậy nên có thể chưa hoàn thiện 100%, mình sẽ thường xuyên cập nhật các style mới nhất tại bài viết này, hãy lưu bài viết hoặc chia sẻ để được cập nhật bài viết mới nhất nhé! Chúc bạn thành công.

TRẢ LỜI
avatar
Trường Nguyễn

!!~

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.