• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tiện ích Bài viết mới nhất có ảnh đại diện

5
17/12/2010

Lấy cảm hứng từ tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnail widget) đặt ở cuối bài viết, tôi điều chỉnh một chút về code để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện đặt trên sibebar hoặc lowerbar. Tiện ích này hiển thị những bài viết mới nhất cho toàn blog hoặc cho một nhãn nào đó gồm ảnh đại diện và tiêu đề bài viết với hiệu ứng đổi màu khi rê chuột vào liên kết bài viết.

Xem Demo.

Để cài đặt tiện ích này, bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là OK.

<script type="text/javascript">
// Recent Posts with Thumbnails widget by Huynh Nhat Ha
function eliminatetags(cual,longitud){
var summary = cual.split("<");
for(var i=0;i<summary.length;i++){
if(summary[i].indexOf(">")!=-1){
summary[i] = summary[i].substring(summary[i].indexOf(">")+1,summary[i].length);
}
}
summary = summary.join("");
summary = summary.substring(0,longitud-1);
return summary;
}

function showrecentposts(json) {
var numposts = 12;
var entry, posttitle,posturl,postimg,postcontent,postcategory,postdate;
var output;
for (var i = 0; i < numposts; i++) {
entry = json.feed.entry[i];
posttitle = entry.title.$t;
if (i == json.feed.entry.length) { break; }
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://3.bp.blogspot.com/_XwhCottp9-E/TQojRmhc-AI/AAAAAAAAACE/zRkG92VAzKI/s1600/sumpostsnoimage.png";
}
output = "<div class='recent_summary3'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "</div>";
document.write(output);
}
document.write('');
}
</script>
<style type="text/css">
.recent_summary3 {border:1px solid #555;float:left;height:55px;margin:1px;padding:5px;width:250px;}
.recent_summary3 a {color:#a52a2a !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3 img {height:46px;width:46px;float:left;}
.recent_summary3 h6 {float:right;height:45px;margin:0;width:180px;}
.recent_summary3 a:hover {color:#ffffff !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #338, #33F);background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');border:1px solid #33F;}
</style>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
<div style="clear:both;"></div>

Chú ý đoạn CSS ở trên sử dụng cho sidebar có bề rộng lớn hơn 250px, bạn cần chỉnh các tham số width:250px và width:180px cho phù hợp với bề rộng sidebar trong blogspot của bạn. Điều chỉnh số trong dòng max-results=7 để hiển thị số bài viết được hiển thị trong tiện ích. Nếu muốn sử dụng tiện ích cho một nhãn nào đó thì sử dụng code:

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Label Name?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Thay Label Name bằng tên nhãn và đừng quên thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé.

{5 bình luậnAdd yours ?}

17:29:00, 4 thg 2, 2011

em sử dụng tiện ích này trên 2 nhãn ( thủ thuật và Software )trên tab 1 và tab 2 menu "Tạo tab menu cơ bản sử dụng jQuery UI" của anh hướng dẫn tại http://huynh-nhat-ha.blogspot.com/2010/10/tao-tab-menu-co-ban-su-dung-jquery-ui.html nhưng nó phát sinh lỗi một điều là cả 2 nhãn nó lại hiện lên hết ở Tab thứ nhất còn Tab thứ 2 thì nó trống trơn không hiển thị gì hết anh giúp em với:((

Reply
12:16:00, 1 thg 4, 2011

Em muốn khi click chuột vào một bài viết thì trang web sẽ chuyển sang bài đó chớ không phải mờ ra cửa sổ mới trong thủ thuật này thì phải làm sao hả anh?

Reply
13:38:00, 1 thg 4, 2011

Mở link sang cửa sổ mới là giúp tăng traffic rất có ích, nếu muốn bỏ chức năng đó thì e bỏ dòng target='_blank'

thành thế này nè:

output += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";

Reply
08:48:00, 12 thg 4, 2011

hihi
thật là ok đấy
nhờ những thủ thuật này của bạn mà mình học được rất nhiều " thank hà nhé"
mình thấy blog của mình sao nó chạy chậm quá có thể có rất nhiều ứng dụng thì phải "
hà cho mình ý kiến nhé "http:xuanduc17.tk" hoặc " http://xuanduc.co.cc" 2 địa chỉ này đều dến blog của mình
phiền bạn rùi

Reply
23:35:00, 13 thg 8, 2011

@duc.c08cd1 mình thấy blog của bạn sử dụng quá nhiều các tiện ích HTML và Scrip như vậy chậm là điều hiển nhiên, Bạn nên thay đổi giao diện cho các phần đó. Phần ChatBox bạn nên để ở một trang nhất định hoặc chỉ cho hiện ở trang chủ thôi như vậy sẽ cải thiện thời ian loand khá cao. bởi như mình thấy ko có mấy người chát nên không cần thiết phải có mục đó lắm
- Tiếp là phần nge nhạc của bạn. bạn để thang trượt như thế đẹp nhưng vô hình chung làm cho Blog land châm đi. => bạn nên chèn thẳng vào cột của blog và bỏ tiện ích đó đi
- Phần 35 bài viết mới nhất giao diện đẹp nhưng lại là thành phần loand chậm nhất trong trang bạn, nếu để ý bạn có thể thấy blog loand song vài giây thì phần đó mới loand song => bạn nên sử dụng giao diện đơn giản thôi
- Cuối cùng phần bài đăng phổ biến sử dụng hiệu ứng chạy đó cũng làm chậm blog
- nếu bạn sử dụng template mặc định trang của bạn xẽ long nhanh hơn
=>Tổng kết: bạn nên sử dụng hợp lý các tiện ích bạ đưa vào Blog, blog đẹp thu hút được nhiều độc giả nhưng theo mình thấy nhiều khi mọi người khong ngồi chờ trang của bạn loand hết đã tắt đi rồi, và lần sau khi nghe nói tới trang của bạn xẽ ... ai dám vào nữa

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn