Fandung đã chính thức giới thiệu với các bạn Pro TabNews mang phong cách của VnExpress, bạn có thể click vào link để đọc bài gốc. Bài viết này giới thiệu với các bạn cách thực hiện với thủ thuật trên của Fandung để có được các Tab News theo từng danh mục chuyên biệt gồm các chuyên mục chính (parentMenu), và các chuyên mục phụ (subMenu).

Trong đó, bài viết hiển thị trên Tab News là các bài viết thuộc chuyên mục chính.

☼ Các bước thực hiện:

1. Vào Bố cục -> Chỉnh sửa code HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

Code

Hoặc code: (đã chỉnh độ rộng theo như trang Blog Huunghi-t78.blogspot của tôi, và có căn hàng 2 bên đẹp hơn)

Code

3. Save template

4. Tạo widget HTML/Javascript rồi dán code bên dưới vào :

Code

<<div class="folder"> <div class="folder-title"> <div class="folder-activeleft fl"></div> <div class="folder-active fl"><a class="link-folder" href="http://huunghi-t78.blogspot.com/search/label/thuthuat-vitinh?max-results=7">Thủ thuật vi tính</a></div> <div class="subfolder fl"> <a class="link-subfolder" href="http://huunghi-t78.blogspot.com/search/label/thu%20thuat%20blog?max-results=7">Thủ thuật Blog</a>

</div>
<div class="folder-titleright fr"></div> </div> <div class="folder-content" id="tdHomeFolder2"> <script type="text/javascript"> document.write(rdlabels[index]); </script> <script language="JavaScript"> imgr = new Array(); imgr[0] = "https://sites.google.com/site/vietlao2003/home/nothumbnail.gif"; showRandomImg = true; aBold = false;
summaryPost = 750;
sumPost = 147;
numposts = 7;
label="thuthuat-vitinh"
home_page = "http://huunghi-t78.blogspot.com/"; </script> <script src="http://vietlao2014.googlecode.com/files/VnE-recent.js" type="text/javascript"></script> </div> <div class="folder-bottom"></div>

Các bạn chỉnh sửa Danh mục chính (màu đỏ) và các chuyên mục phụ (màu xanh) tương ứng với các label của Blog. Với nhiều Danh mục chính tương ứng với tạo nhiều widget HTML/Javascript bạn chỉ cần thực hiện công việc (Bước 3 ở trên 1 lần duy nhất).

Chúc các bạn THÀNH CÔNG.

Chú ý quan trọng:

1*. Khi sử dụng bài viết này, các bạn sẽ thấy rằng khi click vào link bài viết thì các widget vẫn xuất hiện, không bị ẩn đi. Lúc đầu tôi cũng không hiểu tại sao, hóa ra ta phải kết hợp bài viết sau nữa thì mới đạt kết quả theo ý muốn.

Bài viết:

Hiển thị Widget chỉ ở trang chủ hoặc trang riêng biệt

2*. Tôi cũng đã tham khảo các bài viết của cùng 1 chủ đề này ở các Blog khác nhau, tuy nhiên code ở một số Blog không hoạt động. Lí do là Blog của Fandung, hay của một số người khác thay đổi tên miền làm cho các file js không hoạt động. Để cho đảm bảo chắc chắn, bạn nên tự mình up lên các Host của riêng mình, tránh trường hợp sau này Blog của họ thay đổi hay xóa đi thì Blog của mình cũng bị ảnh hưởng. Tham khảo bài viết sau:

Bài viết:

Dùng Google Code,Google Site làm host chứa file js
Update:

Tôi có đọc Blog http://www.itechplus.info thấy có bài viết hay, chỉnh sửa gắn gọn, xin giới thiệu cho các bạn cùng biết:

Bài viết: Style mới cho tiện ích VNE Recent Posts

Ở bài viết trước, iTechPlus đã giới thiệu đến bạn đọc tiện ích Recent Posts mang phong cách VNExpress, nằm trong bộ sưu tập những Style Recent Posts mang phong cách báo chí.

Nhận thấy đây là một style rất hay và chính iTechPlus cũng từng sử dụng nó cho một Blog cá nhân của mình với một số tùy chỉnh. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích trông bắt mắt hơn, thân thiện hơn với các SE, nên hôm nay iTechPlus sẽ chia sẻ đến các bạn một “biến thể” của style này.

Những nét mới :

Giao diện : bắt hơn so với style cũ
Khả năng SEO : thân thiện hơn với các SE do chèn thêm thuộc tính Alternate cho Images
Cài đặt đơn giản hơn
Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh

Hình minh họa :

Style cũ

Style mới

Thực hiện :

Rất đơn giản, bạn chỉ cần tạo một widget HTML\JavaScript và chèn vào đó đoạn code bên dưới :

<style type="text/css">
.fl{float:left}
.fr{float:right}
.folder{width:516px; 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:500px; 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:312px; padding-right:10px}
.folder-othernews{width:168px}
.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://itechplus.info/search/label/OSystem?&max-results=8">Hệ điều hành</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://itechplus.info/search/label/OSystemK?&max-results=8">Kiến thức</a> | <a class="link-subfolder" href="http://itechplus.info/search/label/OSystemT?&max-results=8">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?&max-results=8">Công cụ</a> | <a class="link-subfolder" href="http://www.itechplus.info/p/question.html">Hỏi - Đáp</a></div></div><div class="folder-content" id="tdHomeFolder2">
<script language='javascript'>
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
homepage = "http://itechplus.info/";
label = "OSystem";
</script>
<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript"></script>
</div></div>

Thay các dòng code in đậm cho phù hợp với Blog của bạn. Chi tiết bố cục và ý nghĩa các thông số các bạn xem lại bài viết cũ tại đây.

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

Nguồn: iTechPlus

Tôi có một số chỉnh sửa độ rộng lớn hơn so với ban đầu và căn hàng bên phải ở phần topnews và othernew cho thẳng (giống Blog huunghi-t78.blogspot.com). Những Blogger mới sẽ khó khăn trong việc này. Các bạn có thể tham khảo code:

Rất đơn giản, bạn chỉ cần tạo một widget HTML\JavaScript và chèn vào đó đoạn code bên dưới :

<style type="text/css">
.fl{float:left}
.fr{float:right}
.folder{width:625px; 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:625px; 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:400px; padding-right:10p; text-align: justify}
.folder-othernews{width:180px; padding:0px 11px; text-align: justify}
.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://huunghi-t78.blogspot.com/search/label/phan%20mem?max-results=10">Phần mềm</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://huunghi-t78.blogspot.com/search/label/Internet?max-results=7">Internet</a> | <a class="link-subfolder" href="http://huunghi-t78.blogspot.com/search/label/office?max-results=7">Office</a> | <a class="link-subfolder" href="http://huunghi-t78.blogspot.com/search/label/System%20Tool?max-results=7">System Tool</a>
</div>
</div></div><div class="folder-content" id="tdHomeFolder2">
<script language='javascript'>
imgr = new Array();
showRandomImg = true;
summaryPost = 600;
numposts2 = 6;
homepage = "http://huunghi-t78.blogspot.com/";
label = "phan mem";
</script>
<script src="http://vietlao2014.googlecode.com/files/VnE-rc-newstyle.txt" type="text/javascript"></script>
</div>

Chúc thành công! (huunghi-t78.blogspot.com)

Thứ Năm, 24 tháng 3, 2011

Tạo Tab News theo phong cách báo chí chuyên nghiệp

Hiển thị Widget chỉ ở trang chủ hoặc trang riêng biệt

Dùng Google Code,Google Site làm host chứa file js
Update:

Bài viết: Style mới cho tiện ích VNE Recent Posts

0 nhận xét:

Đăng nhận xét

có thể bạn quan tâm

Thống kê truy cập

Liên kết

Giới thiệu về IT VIỆT 365

Thứ Năm, 24 tháng 3, 2011

Tạo Tab News theo phong cách báo chí chuyên nghiệp

Hiển thị Widget chỉ ở trang chủ hoặc trang riêng biệt

Dùng Google Code,Google Site làm host chứa file jsUpdate:

Bài viết: Style mới cho tiện ích VNE Recent Posts

0 nhận xét:

Đăng nhận xét

có thể bạn quan tâm

Thống kê truy cập

Liên kết

Giới thiệu về IT VIỆT 365

Contact us

Theo dõi tin tức mới

Dùng Google Code,Google Site làm host chứa file js
Update: