May 18, 2013

Tùy chỉnh giao diện Dynamic View của Blogspot

Bài viết đang được hoàn thiện

Dynamic View được Blogspot hỗ trợ rất là lâu. Tuy nhiên, sau một thời gian dài không đụng đến em ý. Giờ đây, mình lại thấy sự tiện dụng và linh hoạt của giao diện này. Dưới đây là một số tùy chỉnh hay ho mà mình góp nhặt được. Nó có thể giúp blog trở nên lung linh lấp lánh ánh sao mai

Tất cả các thao tác trên được thực hiện ở phần Mẫu - Tùy Chỉnh - Nâng cao - Thêm CSS

  1. Tùy biến thanh tìm kiếm: Danh sách các kết quả sự hiện trước tiếp, như một combobox ở khung tìm kiếm

    #header input#search {
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    #header input#search:focus {
      width: 450px;
    }
    
  2. Xóa hiệu ứng viền, đổ bóng của các ảnh được chèn trên phần nội dung bài blog
    .entry-content img{
    box-shadow: none !important;
    padding: 0px !important;
    border: 0px !important;
    }
    
  3. Tuy biến thanh sidebar bên trái

    #sidebar:hover 
    { 
       width: 350px; 
    } 
    #sidebar 
    { 
      -webkit-transition: width 500ms ease-in; 
      z-index: 99; 
    }
    
  4. Hiện thông tin ngày giờ đăng bài trong phần nội dung

    .sidebar .article .article-header .date, .ss 
    {
      display: block !important;
    }
    
  5. Thêm phần "Read more" vào chế độ hiển thị magazine.
    .magazine .summary:after, .ss{
    content: "Đọc thêm ..." !important;
    color: red !important;
    }