Rút gọn bài viết có ảnh thumbnails ngoài trang chủ blogspot bằng CSS - No JavaScript

Hôm nay Jakub BB sẽ giới thiệu với các bạn một cách rút gọn bài viết bằng CSS mà không hề đụng đến JavaScript, mà blog của mình đang sử dụng nó.

Bước 1:  

Vào Mẫu > Chỉnh sửa HTML

Bước 2:

Click vào code vào sử dụng phím Ctrl + F để tìm kiếm

Bước 3: 

Copy dòng bên dưới và dán vào ô tìm kiếm:

<b:includable id='post' var='post'>

Tìm toàn bộ code có trong thẻ <b:includable id='post' var='post'>...</b:includable> và thay thế nó bằng code sau:

 
  

    
      
        


            
          
        

    
    


        
          
            
          
            
              
                
              
                
              
            
              
            
          
        
          [Untitled]
        
      


          
        
          
            
          
            
              
            
              No content.
            
          
        
      



        


            
               
              
                
              
                
              
              
            
           
          
             
          
           
          
            
              
                
              
            
          
          
        


            
               
                ,
              
            
        
          
        

    

Bước 4:  Tìm dòng sau: (Ctrl + F để tìm kiếm)

]]></b:skin>

Tiếp theo chúng ta thêm CSS cho nó. Dưới đây là 3 mẫu cho các bạn:

Kiểu 1: Ảnh thumbnails bên trái hình tròn

Xem demo

CSS: 

.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after {  content:" "; display:block;clear:both;}
.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfWlq0iqXy2k1WuBWXQZoSA3qrujGVZDspG9fAO7VWOOIHP5D5_JXtBHrUJUsivNS-Ud_hhb6KYfylNQ_PtZkQARAt0PcwPZHEv-HN5Q_xMF6CfVzeLuOzMQ_QqWbU0_ow79JVE3lDpGlq/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}
.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}

Kiểu 2: Ảnh thumbnails bên trái hình vuông

Xem demo

CSS:

.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfWlq0iqXy2k1WuBWXQZoSA3qrujGVZDspG9fAO7VWOOIHP5D5_JXtBHrUJUsivNS-Ud_hhb6KYfylNQ_PtZkQARAt0PcwPZHEv-HN5Q_xMF6CfVzeLuOzMQ_QqWbU0_ow79JVE3lDpGlq/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}

Kiểu 3:  3 cột, thumbnails top

Xem demo

CSS:

#blog-pager {clear: both;}
.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height: 405px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}
.blogger-post:after {  content:" ";  display:block;  clear:both;}
.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}
.blogger-post-title a{color: #777;}
.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfWlq0iqXy2k1WuBWXQZoSA3qrujGVZDspG9fAO7VWOOIHP5D5_JXtBHrUJUsivNS-Ud_hhb6KYfylNQ_PtZkQARAt0PcwPZHEv-HN5Q_xMF6CfVzeLuOzMQ_QqWbU0_ow79JVE3lDpGlq/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;}
.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}
.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}
.blogger-post-footer a{color: #888;}
.blogger-post-item,
.blogger-post-static_page {width:auto;}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}

Bước 5: Tìm dòng sau:

 <b:widget id='Blog1'

Gộp nó lại đến khi thấy thẻ đóng của nó  </b:section>

Chèn đoạn code sau vào dưới thẻ  </b:section> để size lại ảnh và rõ hơn.

Chèn giống như trong hình là ok.

Bước 6: Lưu Template lại và xem kết quả

Vì các thẻ class của code đã bị thay đổi nên muốn sửa thỉ phải tìm theo class mới của nó.

Trước kia khi bạn muốn thêm một cái gì đó dưới chân bài viết, bạn phải tìm kiếm dòng sau:

<div class='post-footer'>

 Hoặc:

<div class='post-header-line-X'/>

Thì từ bây giờ bạn phải tìm kiếm dòng này:

<footer class='blogger-post-footer'>

Nếu bạn muốn thêm một cái gì đó ở tiêu đề của bài viết hoặc thêm code trên nó thì tìm kiếm dòng này:

<div class='blogger-post-body'>

Lúc trước code mặc định thì nó có dạng:

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

Lưu ý: Đối với những người mới tìm hiểu về blogger hay HTML CSS thì ko nên sửa chúng vì có thể nó sẽ thay đổi bố cục tổng thể. Nếu muốn edit nó thì các bạn nên backup lại template và luôn giữ một bản copy.

Các phương pháp sử dụng ở đây đã được thử nghiệm trong sửa đổi Blogger đơn giản. Đối với các mẫu Blogger khác mà bạn có thể cần phải điều chỉnh hơn và có thể điều chỉnh độ rộng của blog của bạn để phù hợp với phong cách bố trí báo (kiểu 3).

Tham khảo tại helplogger.blogspot.com

Chúc các bạn thành công!

Jakub BB