Hot News
Loading...

Tạo “Recent Post” từng Label cho HomePage

Trước đây, phattrien@so cũng mày mò và kết hợp tiện ích “Recent Post” của AnhVo để sắp xếp hiển thị các bài viết theo từng chuyên mục giống các trang tin điện tử như vnexpress.net hoặc trang tin247.com, nhìn cũng tạm được và rất thuận tiện cho người đọc

Tuy nhiên do không được pro trong lĩnh vực thiết kế và code nên cách hiển thị nhì hơi cứng. Sau khi tham khảo các trang thủ thuật đã tìm được một cách tương tự của Fandung. Thủ thuật cũng giống miêu tả ở trên, sẽ tạo các chuyên mục ngoài trang chủ, mỗi chuyên mục tương ứng với 1 nhãn. Bài viết mới nhất của nhãn đó sẽ hiển thị có kèm ảnh thumbnail, các bài viết khác sẽ hiển thị dạng list, có kèm hiệu ứng mô tả bài viết. Nhưng với Fandung, code được sắp xép và viết lại nên hiển thị đạp mắt hơn, chuyên nghiệp hơn.

1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HMTL
4. Dán code CSS bên dưới vào trước dòng code ]]></b:skin>


.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota:hover{
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}


5. Save template.
6. Tạo widget HTML/Javascript, và dán code bên dưới vào:


<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";


imgw = 130;
imgh = 130;

imgwidth = 60;
imgheight = 60;

fntsize = 12;
fontsize = 18;
fontsizecm = 11;

acolor = "#000";
titlecolor = "#f00";
aBold = true;
icon = " » ";

text = "Nhận xét";

showPostDate = true;
poston = "Ngày đăng :";

minisummaryPost= 200;
summaryPost = 350;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 8;
sobaiviet = 10;
label = "Love";
nhan= "Tình Yêu";
home_page = "http://fandung.blogspot.com/";

</script>

<script src="http://fandung.110mb.com/label-tin247/a-label.js" type="text/javascript"></script>
<script src="http://fandung.110mb.com/label-tin247/b-label.js" type="text/javascript"></script>


Để có thể hiểu rõ và tùy chỉnh code theo ý mình thì các bạn xem hình minh họa bên dưới:


Một vài thiếu sót của thủ thuật : do mình không rành về việc chỉnh sửa code javascript, nên thủ thuật này không hoàn hảo cho lắm :

+ Chưa thực hiện được việc bài viết mới nhất (đầu tiên) không cho phép hiển thị ở list, vì thế phải dùng tới 2 file javascript.
+ Chưa áp dụng được hiệu ứng mô tả bài viết bằng javascript (như của trang tin247.com) vào thủ thuật này.

Nếu bạn nào có dự định lấy bài viết từ 1 blog khác, cái này rất đơn giản, bạn chỉ việc thay link(code màu xanh) trong code home_page = "http://fandung.blogspot.com/"; thành URL của blog mà bạn muốn lấy bài vết.

Tuy nhiên để chi tiết hơn về vấn đề này, mời bạn tham khảo thêm bài viết: Thủ thuật yêu cầu : Hiển thị bài viết ngoài trang chủ giống như trang tin247.com

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

Ngoài ra, để tránh trường hợp như thời gian vừa qua gặp phải với host Samba, xin gửi bạn đường link để sao lưu 2 file .js sử dụng trong thủ thuật này, phòng trường hợp 110mb.com bị lỗi, các bạn có thể upload nó lên 1 host free nào đó để dùng.

File 1 -  http://fandung.110mb.com/label-tin247/a-label.js download (tại đây)

File 2 -  http://fandung.110mb.com/label-tin247/b-label.js download (tại đây)

phattrien@so theo Fandung blog

Share on Google Plus

About Bit Shrimp

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

11 nhận xét :

  1. rất hoanh nghênh việc anh chu đáo up file JS lên host ziddu.

    Hiện thời thì 110mb.com chưa có vấn đề gì, nhưng về sau chắc có, ngòai việc host die ta còn phải quan tâm tới vấn đề bandwith nữa.

    Hiện thời host của em, tuy chưa có nhiều người dùng chung file JS, nên chưa có tình trạng hết bandwith, nhưng theo tháng trước, bandwith đã hết gần 1/2. Cứ theo đà này thì host ko die cũng sẽ hết bandwith.

    Vì thế, khuyến cáo các Blogger, hãy up file lên host nào đó để dùng riêng.

    Mình có thể gợi ý cho các bạn dùng host của google, đó là sites.google.com , tuy trang này ko cho ta up file JS lên, nhưng ta có thể đổi đuôi nó lại thành file text (tức là từ .js thành .txt), như thế file JS vẫn chạy được

    ReplyDelete
  2. Cam on FD nhieu, em la pro nhat ma anh gap day.

    ReplyDelete
  3. anh Chính cứ nói thế, em ko dám nhận. Khi nào em vững kiến thức về Javascript như Anhvo thì may ra em còn dám nhận, hihi :D

    ReplyDelete
  4. Cái này do Phan Dũng thiết kế phải không bác phattrien@so?
    Hay phải không bác.
    http://tmtvietnam.co.cc

    ReplyDelete
  5. @tmtvietnam: anh da noi' ro~ ma`: Sau khi tham khảo các trang thủ thuật đã tìm được một cách tương tự của Fandung.

    ReplyDelete
  6. Chào anh, sao em áp dụng cái thủ thuật này vào blog nó lại không theo ý muốn nhỉ. Anh vào blog của em xem giúp em với( http://obamavn-tmt.blogspot.com). Em tạo mục " Văn hóa- Xã hội" đó, trông chán quá. Em muốn tạo từng Label như blog của anh thì làm thế nào ạ, tức là cái thanh menu cho Label đó. Làm sao giống menu của anh: Văn hóa Âm nhạc Điện ảnh Mỹ thuật đó.
    Nhờ anh hướng dẫn em làm với nhé.
    Cảm ơn anh.

    ReplyDelete
  7. Bai nay lam kho qua , em lam hoai ma khong duoc ! :(

    ReplyDelete
  8. cảm ơn bạn nhiều nha! ^^

    ReplyDelete
  9. cái phần numpost, các tiêu đề bài viết khác bên dưới mình giới hạn số ký tự thế nào vậy bạn? vd: "Yêu đơn giản chỉ là" sẽ thành "Yêu đơn giản chỉ..." chỉ mình nha

    ReplyDelete
  10. chỉ dùm mình trên này nha

    ReplyDelete


♦ Mời bạn gửi Nhận xét của mình. Bạn có thể nhận xét bằng cách chọnComment asTên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.

♦ Bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.

♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét của bạn cho biết Bạn là ai? Là người như thế nào?.