Xem demo trực tiếp ở đây: (đã fix link demo) http://data.fandung.com/blog/demo/newposts-Description/fix-description.html
Ở bài viết này mình sẽ giới thiệu cho cả tiện ích bài viết mới cho blog, và tiện ích bài viết mới theo từng nhãn.
☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Tạo widget HTML/Javascript và dán code bên dưới vào :
// Code CSS
<style type="text/css">
.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;
}
</style>
// Code Javascript
<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";
imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 6;
label = "Love";
home_page = "http://fandung.blogspot.com/";
</script>
<script src="http://data.fandung.com/blog/demo/newposts-Description/Newposts-label_description.js" type="text/javascript"></script>
- Lưu ý:
a. Phần code CSS: mình sẽ chỉ nói về class .mota:hover span :
- Trước tiên : "không nên thay đổi tên của các id, class " trong code CSS. (do có liên quan tới file JS)
- top: 20px; , left:50px; : đây là code xác định vị trí hiển thị của popup
- width:250px; : độ rộng của popup, còn chiều cao sẽ tự thay đổi tùy vào nội dung hiện thị trong nó dài hay ngắn.
- background:#ccc; : màu nền
- text-align: justify; : tự động căn giữa cho văn bản.
b. Phần code Javascript: mình sẽ chỉ nói các đọan cơ bản, còn những code khác các bạn có thể tự tìm hiểu.
- numposts = 6; : số bài hiển thị
- label = "Love"; : nhãn mà bạn chọn để hiển thị các bài viết.
- home_page = "http://fandung.blogspot.com/"; : địa chỉ URL blog của bạn
- summaryPost = 150; : số kí tự sẽ hiển thị trong popup mô tả.
- Code trên là dùng cho các bài viết theo nhãn, nếu các bạn muốn hiển thị các bài viết mới cho cả blog thì đổi link của file javascript lại thành : http://data.fandung.com/blog/demo/newposts-Description/Newposts_description.js
Chúc các bạn thành công.
Demo có virus FD ơi
Trang này có thể gây hại cho máy tính của bạn!!!!----> demo có virus rồi!!!!!!!
he bai nay` dc do anh Dung dung luk dang can` cai kia cua em noi thanks nha
virus đâu mà virus ~ mấy cha chỉ nói nhảm
quá hay lun
em vừa muốn jwery slide vừa muốn cả hiệu ứng này thì làm seo nhỉ ;;) ;;) (tham wa' :D)
Widget recnet post ngày càng được hoàn thiện hơn. Thanks :)
đúng là kav-kis có báo nhưng ko phải virus đâu mấy bạn...anh em sài vô tư đi
mình chỉ xài bkav thui mà nó cũng báo có virus. trình duyệt Google Chrome 2.0 á, google mà báo thì... :|
anh dũng ơi...anh có thể edit riêng cho em cái này ko..em muốn nó chỉ hiển thị mỗi ảnh của bài viết..khi rê chuột vào thay vì mô tả nội dung thì nó hiện tên bài viết...em muốn áp dụng nó cho blog http://xitin360.blogspot.com của em..
sorry, vi hien tai khong the danh tieng viet dc.
@LouLou: cai nay co the dung ket hop voi jQuery dc.
@share4vnn : cai do dc luon, anh co the edit theo yeu cau nhu cua em.
Co the demo bi nhiem virut, minh se up demo khac len cho moi nguoi. Tu bua minh test thu thuat tag cloud dang flash thi may cua minh da bi nhiem virut, co the minh se phai format lai toan bo o cung. :( . Hien minh khong the truy cap vao bat cu trang web diet virut nao ca, con virut nay qua manh
Sau khi xong viec voi cai may cua minh, minh se tro lai voi blog, cung cac yeu cau cua moi nguoi.
Xin loi moi nguoi ve file demo bi virut
Moi nguoi co the nhap chuot fai vao trang demo cua minh de view source, va xuong duoi cung cua code HTML , fia tren code </body> se thay dong code sau:
<iframe src="..." style="..."></iframe>
dong code nay minh khong the xoa di dc. co the no la code chua virut.
Con cac file javascript thi khong co van de gi, moi nguoi yen tam.
Đã đến mức độ này anh nghĩ FanDung nên tìm cách xử lí mấy con virus đó. Vì các thủ thuật của em đang được rất nhiều anh em blogger tham khảo và sử dụng (có thể lắm anh em nhiễm hội đồng và "đứt hội đông"). Chúng ta vẫn không thể lường hết những rủi ro tiềm ẩn mà kẻ xấu có thể gây ra nếu lợi dụng virus, troijan...
ặc lúc đầu em vào vẫn bìn thường mờ
sao bây h` cái demo lại trỏ về trang singerpicture j` j` đó :-? ? ?!
@LouLou : đúng rồi em, bởi lúc em vào xem demo là lúc anh đã xóa file demo cũ rồi, nhưng chưa thay thế link file demo khác.
Giờ mình đã thay link demo khác rồi, sẽ không còn virut đâu, mọi người an tâm.
Xin anh cho biết chỗ nào chỉ cáh làm recent post (không có thumnail) mà khỏi cần có khung hiện phần mô tả? Em là mem mới, an giúp cho, thanks!
@Oliver: mình sẽ post 1 bài hướng dẫn cho bạn, và bạn hãy theo dõi ở đây nhé:
http://fandung.blogspot.com/2009/05/yeu-cau-thu-thuat-cho-blogspot.html
Khi nào xong mình update link lên đó cho bạn xem.
À, nhắc nhở luôn nhé bạn, sau này khi bạn đọc bài viết nào, mà có ý tưởng hay hoặc yêu cầu thủ thuật nào đó thì có thể vào phần Thủ Thuật Yêu Cầu ở cuối blog của mình để comment ở đó, mình sẽ trả lời, và post bài hướng dẫn nếu mình thực hiện đc.
Thanks bạn đã ghé thăm blog.
Mình trao đổi logo nha.Mình đa add logo của bạn vào blog min hf rùi.bạn có thể vào xem nha.
ccho minh hoi cai the minh muon tao mot thanh gom nhieu mennu thi lam lam sao?
http://kiemtienso1.blogspot.com/
- Sao cái style 1 và 2 nhìn demo thì khác nhưng dán vào nó lại giống nhau thế anh Fandung .
- Tiện đây xin hỏi anh một chút , có thể thay liên kết "Bài đăng mới hơn " và " Bài đăng cũ hơn bằng Page Navigation được không anh.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.