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.
<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>
.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>
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
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.
- 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
Nguồn: Itech Plus
20 nhận xét:
cám ơn bài viết của anh Dũng nha
Không có gì đâu, chúc em đạt được nhiều thành công như ý muốn
Cám ơn bài viết của bạn thật hữu ích.
Anh có thể cho em code như phần xem báo ở http://dungheineken.blogspot.com/
Em vào xem bài "TIỆN ÍCH XEM BÁO KIỂU 2" nha
Bạn ơi cho mình hỏi sao mình lấy nguyên code của bạn để qua thì bình thường nhưng khi mình thay đổi link, đường dẫn label theo blog của mình thì phần cột bên phải lại chạy xuống dưới phần hiện thị bài viết. Vậy là lỗi gì? Mình sửa hoài ko được. Bạn giúp mình lại nhé!
My blog: monngoncuoituan.blogspot.com
My email: monngoncuoituan@gmail.com
Thanks bạn
Bạn thu hẹp lại các thông số chiều rộng của tiện ích, chiều rộng của bên trái và bên phải lại là OK
Mình làm theo hướng dẫn của bạn chỉ nhưng nó cũng bị vậy bạn ơi!!! Bê nguyên si code mẫu của bạn vô thì ko sao? Chỉ sửa link thôi là nó cũng bị vậy ah???
Bạn vô blog mình xem thử.
Bây giờ mình đang để nguyên si code của bạn vô trong blog mình đấy. Nó ko bị lỗi gì cả. Nhưng khi thay đổi đường dẫn là nó bị đẩy các cột bên phải xuống dưới khung bài viết.
Tôi đã vào blog của bạn và không thấy tiện ích này và bạn đã có tiện ích khác khá đẹp rồi!!!
Chúc mừng bạn
Mình đã sửa lại trang bài viết theo hướng dẫn của trai dat mui blog, mình nghĩ chắc nó lỗi ko tương thích cho blog của mình đó.hjhj
Ý kiến thêm: Trang này của mình (http://monngoncuoituan.blogspot.com/search/label/Du%20l%E1%BB%8Bch%20%E1%BA%A9m%20th%E1%BB%B1c), mình muốn nó thể hiện giống trang của Dũng (http://dunghennessy.blogspot.com/search/label/NH%C3%83N) thì làm như thế nào?
Mình có làm theo nhưng các bài viết mặc định của blogger lại nằm ở phía dưới.
Giúp mình nhé! Thanks Dũng
Trang của dunghennessy là do giao diện có sẳn, mình không có chỉnh sửa gì cả (2 cột) vì vậy mình không thể giúp bạn được.
Thành thật xin lỗi
Dunghennessy ơi , cho mình hỏi dunghennessy biết web nào mình up ảnh lên , lấy URL full size của nó được không , muốn làm cái background nhưng lấy full size ko dc
Linlken Nguyễn: Tôi đã kiểm tra lại code trên và không nhận thấy lỗi nào cả, chắc do trang của bạn có một số code nào đó xung đột với code này rồi, cách khắc phục là bạn phải tìm ra code đó và xoá nó đi thì thủ thuật này sẽ hiển thị như cũ mà thôi.
Chúc bạn thành công
Bạn Manor: Bạn chỉ cần chèn ảnh vào blogspot, chờ một chút khi blogspot up ảnh mình lên thành công rồi thì bạn bấm chuột vào ảnh chọn 'KÍCH THƯỚC BAN ĐẦU', tiếp theo bấm thẻ HTML trên góc phải của bài đăng, sau đó lấy code của nó là xong
Chúc bạn thành công
a dũng ơi . nghe bài về quê huong e nè http://tonghop24h.blogspot.com/2012/10/suspicious-activity-in-your-account-we.html
Dũng ơi ! sao mình bỏ code này vào , thay tất cả y như bạn chỉ , mà sao nó chỉ hiện lên khung mà không hiện ra các bài đăng , giúp mình với :)
Đó là do bạn thay địa chỉ trang của bạn không chính xác nên nó sẽ không hiển thị và chỉ có khung nền mà thôi.
Muốn khắc phục thì bạn phải thay chính xác tên nhãn ở các thẻ Label (bạn đọc kỹ phần Lưu ý phía dưới bài đăng nha)
mình thấy code của bạn toàn bị lỗi
http://2.bp.blogspot.com/-4n3eu0MXf3g/UO_qkqwCslI/AAAAAAAAAdo/NKoJ7k5t0Sc/s320/Untitled.png
Lỗi chỗ nào vậy bạn??? Bạn có thể nêu cụ thể để cho mình biết và chình sửa lại nha.
Cám ơn bạn trước...
Đăng nhận xét