Trình diễn bài viết trong cùng một nhãn (Kiểu 2)

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị trong một khung hình chữ nhật được chia thành 2 cột, cột bên trái là hình đại diện và một số dòng giới thiệu của bài viết mới nhất, cột bên phải sẽ hiển thị hình đại diện và tiêu đề bài viết thứ hai, số còn lại sẽ hiển thị theo dạng List. Ngoài ra, ở trên cùng của khung còn hiển thị một số Tab để các bạn có thể theo dõi các nhãn khác....

Mời các bạn bấm vào xem thử

Ảnh minh họa

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn Bố Cục

Bước 4: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào

<style type="text/css">
    .fl{float:left}
    .fr{float:right}
    .folder{width:550px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
    .folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(http://goo.gl/CyQBL) repeat-x}
    .folder-active{height:24px; padding:4px 10px; background:url(http://goo.gl/EgxmY) repeat-x; font-weight:bold}
    .link-folder:link, .link-folder:visited{color:#fff}
    .subfolder{height:24px; padding:5px 5px 0 15px; background:url(http://goo.gl/Z29yN) no-repeat}
    .folder-content{width:620px; background:#fff url(http://goo.gl/qy9iZ) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
    .folder-content p{margin:0}
    .folder-content ul{list-style:none; margin:0; padding:0}
    .folder-content li{padding:0 0 4px 6px; background:url(http://goo.gl/4OvNo) no-repeat 0 8px}
    .folder-topnews{width:270px; padding-right:10px}
    .folder-othernews{width:240px}
    .other-folder{margin:0}
    .img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
    .img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
    .xemthem{float:right; display:block; margin:0; padding:5px}
   
</style>

<div class="folder">
<div class="folder-title">
<div class="folder-active fl">
<a class="link-folder" href="http://cdqtkd5a.blogspot.com">Kiến Thức KD</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Khoinghiep">Khởi Nghiệp</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Marketing">Marketing-Sales</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/ChienLuoc">Chiến Lược</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Kynangmem">Kỹ Năng Mềm</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Nhansu">Nhân Sự</a></div>
</div>
<div class="folder-content" id="tdHomeFolder2">

<script language="javascript">
    imgr = new Array();
    showRandomImg = true;
    summaryPost = 170; /* số ký tự phần giới thiệu bài viết mới nhất*/
    numposts2 = 5; /*số bài muốn hiển thị*/
    homepage = "http://cdqtkd5a.blogspot.com/"; /*thay thành địa chỉ blog bạn*/
    label = "Nhansu"; /*thay thành nhãn của bạn*/
   
</script>

<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript">
</script></div>
</div>

Các bạn thay đổi các số màu đỏ theo ý muốn của bạn:

* Width: 550px (chiều rộng của tiện ích).

* Folder-topnews (width: 270px-chiều rộng của cột bên trái)

* Folder-othernews (width: 240px-chiều rộng của cột bên phải)

* Img-subject (chiều cao và chiều rộng của hình đại diện bên trái)

* Img-other (chiều cao và chiều rộng của hình đại diện bên phải)

và bấm LƯU lại là xong

LƯU Ý:

 - Nếu thay đổi chiều rộng của tiện ích thì các bạn phải thay đổi đồng thời chiều rộng của cột bên trái và bên phải luôn.

- Các bạn phải điền thật chính xác địa chỉ trang nhãn của bạn ở các dòng màu xanh và ở Label, nếu không nó sẽ bị lỗi và không hiển thị được.

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

Theo: dunghennesy