Hiệu ứng danh sách bài viết dạng tổng hợp !
Lâu lắc không post bài về thủ thuật blog rồi 
.
1 phần vì không có thời gian nhiều để online , 1 phần thì ngại đụng vào
blog wa' . hihi . Mãi tới hôm nay mới rảnh rỗi viết bài nè .
P/s : Mình chia dạng bài viết này cũng hơi giống với phần tóm tắt bài viết ở trên trang chủ yahoo ! blog nhưng mỗi tội không có java thôi
!
- Và khi rê chuột vào bất kỳ 1 bài viết nào đó nó sẽ như thế này : ▼
Code :
Lưu ý :Ở code này mình chia bố cục blog 1 cột lớn ( chiều rộng = 970px ) , nếu ai để bố cục "2 cột" thì chỉnh 1 chút đoạn code này cho phù hợp với bố cục nhé (dòng thứ 3 của code đó ) :
.
1 phần vì không có thời gian nhiều để online , 1 phần thì ngại đụng vào
blog wa' . hihi . Mãi tới hôm nay mới rảnh rỗi viết bài nè . P/s : Mình chia dạng bài viết này cũng hơi giống với phần tóm tắt bài viết ở trên trang chủ yahoo ! blog nhưng mỗi tội không có java thôi
!▼
- Và khi rê chuột vào bất kỳ 1 bài viết nào đó nó sẽ như thế này : ▼
Không
hiểu sao khi PTS thì hình ảnh demo đẹp lắm mà khi up lên trang hình ảnh
blog tôi thì nó vỡ lung tung khó nhìn quá . hjC hjC !
Code :
Hiệu ứng danh sách bài viết dạng tổng hợp - Hoàng Hùng
<style>
#article-list {float:left;padding:5px 0 5px 5px;}
.article-listing-ft{float:left;width:100%;}
#article-listing .article{float:left;width:316px!important;height:auto;margin:0 4px 4px 0;padding:0px;border:none;overflow:hidden;}
#article-listing .article .trackback-count, #article-listing .article .view-permission, #article-listing .article .actions, #article-listing .article .tag, #article-listing .article .summary-short, #article-listing .article .summary, #article-listing .emotion {display:none;}
#article-listing .article .divider{background:transparent;width:1px;height:1px;margin:0 8px;}
#article-listing .article .date {margin-left:9px;}
#article-listing .img-wrap img{display:block;height:240px!important;max-width:100%;width:310px!important;padding:2px;margin:0px;z-index:99991;border:1px solid #666;}
#article-listing .article .title {position:absolute;top:168px;width:308px;height:auto;line-height:16px;padding:2px 0 3px;margin:0 0 0 3px;font-size:17px;color:#00e5fa;border-bottom:1px solid #999;z-index:99999;}
#article-listing .article .title:hover {color:#FFF;}
#article-listing .article .category {position:absolute;top:205px;width:312px;margin:0 0 0 3px;padding:0px;z-index:99998;}
#article-listing .article .meta {position:absolute;top:160px;width:310px;height:16px;line-height:16px;padding:64px 0 2px;margin:0 0 0 3px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg_article-list.png) repeat;z-index:99997;border-top:1px solid #000;}
#article-listing .article:hover .title {top:60px;z-index:99999;}
#article-listing .article:hover .category {top:97px;z-index:99998;}
#article-listing .article:hover .meta {top:127px;border-bottom:1px solid #999;padding:0 0 4px;z-index:99997;background:transparent;border-top:none;}
#article-listing .article:hover .summary-short {display:block;position:absolute;top:56px;width:302px;height:77px;font-size:13px;color:#FFF;text-align:justify;padding:104px 4px 5px;margin:0 0 0 3px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg_article-list.png) repeat;border-top:1px solid #000;z-index:99992;}
#article-listing .article .more {top:90%;float:right;}
</style>
#article-list {float:left;padding:5px 0 5px 5px;}
.article-listing-ft{float:left;width:100%;}
#article-listing .article{float:left;width:316px!important;height:auto;margin:0 4px 4px 0;padding:0px;border:none;overflow:hidden;}
#article-listing .article .trackback-count, #article-listing .article .view-permission, #article-listing .article .actions, #article-listing .article .tag, #article-listing .article .summary-short, #article-listing .article .summary, #article-listing .emotion {display:none;}
#article-listing .article .divider{background:transparent;width:1px;height:1px;margin:0 8px;}
#article-listing .article .date {margin-left:9px;}
#article-listing .img-wrap img{display:block;height:240px!important;max-width:100%;width:310px!important;padding:2px;margin:0px;z-index:99991;border:1px solid #666;}
#article-listing .article .title {position:absolute;top:168px;width:308px;height:auto;line-height:16px;padding:2px 0 3px;margin:0 0 0 3px;font-size:17px;color:#00e5fa;border-bottom:1px solid #999;z-index:99999;}
#article-listing .article .title:hover {color:#FFF;}
#article-listing .article .category {position:absolute;top:205px;width:312px;margin:0 0 0 3px;padding:0px;z-index:99998;}
#article-listing .article .meta {position:absolute;top:160px;width:310px;height:16px;line-height:16px;padding:64px 0 2px;margin:0 0 0 3px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg_article-list.png) repeat;z-index:99997;border-top:1px solid #000;}
#article-listing .article:hover .title {top:60px;z-index:99999;}
#article-listing .article:hover .category {top:97px;z-index:99998;}
#article-listing .article:hover .meta {top:127px;border-bottom:1px solid #999;padding:0 0 4px;z-index:99997;background:transparent;border-top:none;}
#article-listing .article:hover .summary-short {display:block;position:absolute;top:56px;width:302px;height:77px;font-size:13px;color:#FFF;text-align:justify;padding:104px 4px 5px;margin:0 0 0 3px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg_article-list.png) repeat;border-top:1px solid #000;z-index:99992;}
#article-listing .article .more {top:90%;float:right;}
</style>
Lưu ý :Ở code này mình chia bố cục blog 1 cột lớn ( chiều rộng = 970px ) , nếu ai để bố cục "2 cột" thì chỉnh 1 chút đoạn code này cho phù hợp với bố cục nhé (dòng thứ 3 của code đó ) :
* * *
#article-listing .article{float:left;width:316px!important;height:auto;margin:0 4px 4px 0;padding:0px;border:none;overflow:hidden;}Chúc các bạn thành công !
Nguồn : Hoàng Hùng
Copy xin ghi rõ URL nguồn trích ! Thanks !
Copy xin ghi rõ URL nguồn trích ! Thanks !
