Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

Hướng dẫn tùy biến giao diện Blogger.com bằng Stylish tuyệt đẹp!

Cập nhật: 01/06/2019 Bởi Duy... - A- A+

Chào các bạn, chào mừng các bạn quay trở lại với Duy 0286.
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!
Hướng dẫn tùy biến giao diện Blogger.com bằng Stylish tuyệt đẹp!

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. 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.
header.gb_Ta,
header.gb_Sa,
.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: 0;
    background: #f2f3f5;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-family: Roboto, sans-serif
}

.K3JSBVB-kb-j {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    font-weight: bold
}
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.

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter