"Hiển thị bài viết giống trang dantri.com.vn"

(Traidatmui.com) – Mình đã từng giới thiệu đến các bạn một số thủ thuật liên quan đến việc hiển thị bài viết cho blogspot. Hôm nay mình cũng xin chia sẻ thêm các bạn một thủ thuật hiển thị bài viết giống với trang Dân Trí. Mình thấy cách hiển thị bài viết này cũng khá đẹp và nó có thể áp dụng cho blogspot nên mình sẽ hướng dẫn bạn thực hiện thủ thuật này dành cho blogspot. Cách hiển thị bài viết này có một hiệu ứng đó là bình thường thì các label có liên quan sẽ ở trạng thái ẩn, nó chỉ hiển thị khi bạn rê chuột vào bài viết.

Hình ảnh minh họa
1. Đăng nhập vào tài khoản blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">function Hovercat(q){$("#neocat-"+q+" ul.dpost").find("li").show()}
function Outcat(q){$("#neocat-"+q+" ul.dpost").find("li").hide();$("#neocat-"+q+" ul.dpost").find("li:eq(0)").show()}
</script>

4. Tiếp theo bạn chèn code css bên dưới vào trước thẻ ]]></b:skin>
.summerypost a {
color:#000099;
font-weight:bold;
}
.summerypost a:hover {
color:#403c3d;}

.summerypost {
font-size:12px;
color:#000;
font-family:arial;}

.readm a{
color:#1f2f56;
font-size:12px;
margin-right:10px;
margin-top:8px;}
.readm a:hover{
color:#766162;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#000066;
background:url(http://lh3.ggpht.com/_BTztXRwC9ik/TQTcuSwh4nI/AAAAAAAAFf8/XLYhDCO3IEs/icon.png) no-repeat left;
padding-left:10px;}
.repost a:hover{
color:#bf9798;}

.tab {
font-size:13px;
padding:0px 5px 5px 5px;
width:550px; /*độ rộng của bài viết*/
}
.dpost a{
padding:0 2px;
font: 11px/22px Arial;
color:#000;
float:left;
height:20px;}

.dpost li{
float:left;
height:20px;
overflow:hidden;}

.dpost li.active{
background:url(http://lh4.ggpht.com/_BTztXRwC9ik/TQOckR-fKwI/AAAAAAAAFfc/tOQVyt0M6Nc/a1.png) right no-repeat; /*màu nền của chủ đề chính */
position:relative;
top:1px;
}
.dpost li.active a{
font-size:10px;
font-weight:bold;
color:#fff;
text-transform:uppercase;
padding-right:25px;}

.iframpost{
background:url(http://lh4.ggpht.com/_BTztXRwC9ik/TQOckRMTKeI/AAAAAAAAFfg/MvZ7NhbCrOY/a2.png) no-repeat; /*màu nền của tiện ích*/
height:25px;
}

*{margin:0;padding:0px 0px 0px 0px;}

Phần css này cũng không phức tạp bạn tự điều chỉnh, tuy nhiên bạn chỉ nên chỉnh lại các phần chính như độ rộng, hình ảnh nền... còn các phần khác bạn không nên chỉnh sửa nhiều. Nếu bạn không thành thạo về css mà can thiệp nhiều có thể xảy ra lỗi.
5. Bây giờ bạn hãy save template lại.
6. Trở về phần tử trang, thêm 1 HTML/Javascript
7. Thêm code bên dưới vào HTML/Javascript vừa thêm ở trên.
<div class="tab" id="neocat-1" onmouseover="Hovercat('1')" onmouseout="Outcat('1')">

<div class="iframpost">
<ul class="dpost">
<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>
</div>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "";
bgTD = "";

imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 12 // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "no";

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE
poston = "Ngày đăng :";

summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 3; //số bài viết hiển thị trong phần bài viết liên quan
label = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
</script>
<script src="http://data-traidatmui.appspot.com/scripts/dpost.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/related_dpost.js" type="text/javascript"></script>
</div>

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu tím đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu tím nhạt).

8. Cuối cùng là save tiện ích lại

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

Xem khác cùng chủ đề

27 nhận xét | Viết lời bình

12/13/2010 01:51:00 SA Trả lời

bai nay that do cho copy nhe

12/13/2010 05:59:00 CH Trả lời

hay lắm bạn à, chúc bạn ngày càng pro hơn nữa

12/13/2010 07:04:00 CH Trả lời

Nếu chọn phong cách này cho trang chủ thì quá tuyệt rồi,nhưng nếu đã chèn các widget hiển thị bài post theo Label khác thì dễ bị xung đột,không hiển thị hình ảnh hoặc tiện ích # bị lỗi :<

12/14/2010 03:47:00 SA Trả lời

cam on ban nhieu lam, minh lam duoc roi ,ban vao xem thu va gop y giup minh nhe

12/14/2010 08:18:00 SA Trả lời

vào blog của bạn hoành tráng quá. không biết chủ nhân bỏ ra bao nhiêu time và công sức nữa + trình độ siêu đẳng.
bạn ơi có thể giúp mình cái code để khi click vào một bài viết thì nhảy sang trang mới vì blog của mình mỗi khi click nó nhảy sang trang khác thì không nghe nhạc đc.
doctorkillerhp_2010
anhtranphuong@rocketmail.com

Admin
12/15/2010 12:50:00 SA Trả lời

Bạn chỉ việc thêm lệnh target="_blank" vào thẻ <a> khi tạo link là được bạn ah.

12/15/2010 02:03:00 SA Trả lời

Help me!
Bác xem giúp thủ thuật này nhé >>>http://img574.imageshack.us/img574/1516/demo.gif Tớ muốn hiển thị thêm hàng cho vừa khớp với Thumnail ảnh như minh họa thì chỉnh lại ở thuộc tính nào ?

Admin
12/15/2010 02:11:00 SA Trả lời

Bạn hãy cho biết bạn đã thực hiện theo thủ thuật nào thì mình mới biết được thuộc tính nào?Khi muốn biêt hay thắc mắc về thủ thuật nào thì bạn nên comment đúng bài viết đó để mình dễ dàng kiểm soát và biết rỏ điều bạn hỏi nhe.

12/15/2010 03:37:00 SA Trả lời

ban oi cho minh hoi ,blog minh bi cai gi ma no chay nhu rua ah, co cach nao khac phuc ko vay ,

12/15/2010 03:54:00 SA Trả lời

Do trong Template có sẵn nên tớ cũng không rõ nằm trong chuyên mục nào, có thể thuộc nhóm " Tạo Read more " hoặc cách thể hiện bài viết

12/16/2010 05:34:00 SA Trả lời

Chào bác, làm sao để ẩn widget khi click vào Link,nếu tạo widget ở phần Header thì khi click vào Link dẫn đến trang khác nhưng các widget ở trên chiếm khá nhiều vị trí

Admin
12/16/2010 05:44:00 SA Trả lời

Bạn có thể tham khảo bài viết Tại đây

12/19/2010 05:23:00 CH Trả lời

Chào pak, làm sao để hiển thị giờ/phút/giây bài viết ?Thủ thuật trên mở rộng được ngày đăng

4/13/2011 11:34:00 SA Trả lời

em đã pót câu hỏi bên kia nhưng sang bên này hỏi chuẩn hơn,nếu có chưa hiểu thì em nói rõ hơn nha,tức là khi em đưa chuột vào tab thì chữ hiện nhưng khi đưa chuột ra khỏi tạp đó thì chữ ẩn đồng thời ảnh+đoạn trích bị dịch chuyển,vì điều đó mà khi di chuyển xuống gần cuối tab thì chữ và ảnh dich chuyển như cào cào bay ý(cái này xuất hiện với trình duyệt firefox)nếu có thể fix dùm em thì tốt quá hì hì. trăm sự nhờ anh:D

4/13/2011 01:13:00 CH Trả lời

cho em hỏi tiếp là vì em mới làm blog nên em ko biết chỉnh căn lề như thế nào,em chia 3 cột nhưng vì ko biết căn lề(tức là khoảng trống giữa các cột quá lớn tốn diện tích quá,vì vậy em muốn hỏi là em muốn làm lề giảm đi thì em phải tìm ở thẻ nào.cám ơn anh nhiều....h phải đi ngủ mong rằng anh có thể reply sớm cám ơn anh nhiều

Admin
4/13/2011 06:39:00 CH Trả lời

Em có thể chỉnh sửa thuộc tính Margin hay Padding, em có thể tìm hiểu tại đây

5/20/2012 09:53:00 SA Trả lời

Mình đang thử mẫu này but cũng bị lỗi chạy ảnh, lệch đoạn trích và các label con bị một đường sọc cắt ngang như QUANG Sáng! Fix sao đây?

Admin
5/21/2012 01:31:00 SA Trả lời

Có thể là trong template bạn đã bị trùng biến với một số script bài viết mới trước đây, do đó khi chèn vào nó sẽ xung đột.

Thời gian tới mình sẽ cập nhật lại bài viết này, giảm file JS và chỉnh biến lại và cách để có thể lặp lại tiện ích cho từng nhãn ở trang chủ.

5/21/2012 09:26:00 SA Trả lời

Rất mong là TDM sớm cải thiện thủ thuật này để khắc phục lỗi như mình nói! Cảm ơn TDM nhiều\
lleu

Admin
5/21/2012 09:37:00 SA Trả lời

Ngày mai là bài viết có thể xuất rồi bạn ah.hj

7/19/2012 02:58:00 SA Trả lời

làm theo hướng dẫn rồi mà k hiệm thị bài viết là sao

Admin
7/19/2012 07:34:00 SA Trả lời

Bạn hãy kiểm tra xem tên nhãn và tên miền Blog đã chính xác chưa và nguồn cấp Feed đã ở dạng Full chưa nhé.

7/19/2012 07:51:00 SA Trả lời

Admin cho hoi van de ngoai van de mot chut. ta lam cach nao de su dung ten mien de tao ra trang demo giong Website minh nhi...

Admin
7/19/2012 08:04:00 SA Trả lời

Việc đó thì bạn tự thiết kế cho mình 1 Blogger và dùng tên miền của mình để cài đặt cho blogger đó, và đăng code demo. Nó tương đối phức tạp vì phải loại bỏ bớt code không cần thiết để nó trở thành 1 hosting free chạy trên nền tảng blogger được.

7/19/2012 08:15:00 SA Trả lời

thanks nha. no co ap dung cho ten mien mien phi k admin.

Admin
7/19/2012 08:21:00 SA Trả lời

Được bạn ah, nếu bạn biết cách cấu hình tên miền free đó về blogger thì áp dụng bình thường thôi bạn.

7/19/2012 08:23:00 SA Trả lời

minh lam thanh cong roi. thanks admin nhe...............

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang