Home » TTNC
Thứ Sáu, 25 tháng 11, 2011
Hiển thị bài viết trong cùng một nhãn (kiểu 1)
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....
<div class="codeview"><code>
<style type="text/css">
.fl{float:left}
.fr{float:right}
.folder{width:630px; 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:350px; padding-right:10px}
.folder-othernews{width:250px}
.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://dunghennessy.blogspot.com/search/label/N%C3%82NG%20CAO">Thủ thuật nâng cao</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/C%C6%A0%20B%E1%BA%A2N">Thủ thuật cơ bản</a> | <a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/TRANG%20TR%C3%8D%20BLOG">Trang trí Blogspot</a> | <a class="link-subfolder" href="http://www.dunghennessy.blogspot.com/search/label/Template">Giao diện Blogspot</a> | </div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="javascript">
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
homepage = "http://dunghennessy.blogspot.com/";
label = "NÂNG CAO";
</script>
<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript">
</script></div>
</div>
</code></div>
Tags:
ThuthuatBlog, Thuthuatcoban, TTNC
Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.
<div class="codeview"><code>
<style type="text/css">
.fl{float:left}
.fr{float:right}
.folder{width:630px; 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:350px; padding-right:10px}
.folder-othernews{width:250px}
.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://dunghennessy.blogspot.com/search/label/N%C3%82NG%20CAO">Thủ thuật nâng cao</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/C%C6%A0%20B%E1%BA%A2N">Thủ thuật cơ bản</a> | <a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/TRANG%20TR%C3%8D%20BLOG">Trang trí Blogspot</a> | <a class="link-subfolder" href="http://www.dunghennessy.blogspot.com/search/label/Template">Giao diện Blogspot</a> | </div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="javascript">
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
homepage = "http://dunghennessy.blogspot.com/";
label = "NÂNG CAO";
</script>
<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript">
</script></div>
</div>
</code></div>
Bây giờ, bạn thay đổi các đường link màu xanh (http://www.dungheineken.blogspot.com/search/label.......) là địa chỉ trang nhãn mà bạn muốn hiển thị, thay đổi các số màu đỏ theo ý muốn của bạn:
* Width: 630px (chiều rộng của tiện ích).
* Folder-topnews (width: 350px-chiều rộng của cột bên trái)
* Folder-othernews (width: 250px-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)
* Folder-topnews (width: 350px-chiều rộng của cột bên trái)
* Folder-othernews (width: 250px-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)
* Home_page: địa chỉ blog của bạn
* Label: Tên nhãn muốn hiển thị
* Numposts2=5: Số bài muốn hiển thị (kể cả bài có hình và bài hiển thị dạng List)
* SummaryPost=230: Số ký tự phần giới thiệu bài viết mới nhất.
và bấm LƯU lại là xong
Theo http://dunghennessy.blogspot.com/2011/11/hien-thi-cac-bai-viet-trong-cung-mot.html
You may also...
Hot
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator...
-
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm...
-
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ...
-
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà...
-
Phần mềm tiện lợi trong việc vẽ các sơ đồ mạch điện công nghiệp, được hỗ trợ đầy đủ các kí hiệu của các thiết bị dùng trong công nghiệp như...
-
1 CÁC LỆNH VÀO / RA OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không ...
-
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn...
-
( Traidatmui.com) – Hôm nay xin chia sẻ cùng các bạn thủ thuật tạo Slideshow cho hình ảnh, thủ thuật này mình có thêm hiệu ứng Sroll với 2...
-
[FD's BlOg] - Một vài lệnh đơn giản từ CSS kết hợp với tiện ích " Recent posts " sẽ tạo cho bạn 1 thanh tin tức đơn giản. Do...
-
Giáo trình Máy điện - Khí cụ điện trình bày cơ bản về các nguyên lý và cấu tạo của các loại máy điện như: Máy biến áp; Máy điện không đồng b...
Comments[ 0 ]
Đăng nhận xét