Trang chủ > Thủ thuật blog > Tiện ích bài viết mới có ảnh thumbnail

Tiện ích bài viết mới có ảnh thumbnail

Một thời gian tìm hiểu thì mình đã biết được cách tạo nên tiện ích “Bài viết mới nhất” (Recent Posts) với hiệu ứng jQuery cho blogger. Tiện ích này sẽ hiển thị các bài viết mà bạn mới nhất từ các bài đăng của bạn trên blog, đặc biệt đối với tiện ích mà mình sắp giới thiệu cho các bạn thì nó có ảnh thumbnail rất đẹp mắt. Để ứng dụng tiện ích này cho blog bạn có thể tham khảo bài viết này. Xem demo

Hình minh họa

☼ Bắt đầu thủ thuật
1. Đăng nhập vào blog
2. Vào bố cục và chọn thêm tiện ích chọn HTML/Javascript3. Copy và dán code bên dưới vao HTML/Javascript trên

$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3500;

function removeFirst(){
first = $(‘ul#listticker li:first’).html();
$(‘ul#listticker li:first’)
.animate({opacity: 0}, speed)
.fadeOut(‘slow’, function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = ‘

  • ‘+first+’
  • ‘;
    $(‘ul#listticker’).append(last)
    $(‘ul#listticker li:last’)
    .animate({opacity: 1}, speed)
    .fadeIn(‘slow’)
    }
    interval = setInterval(removeFirst, pause);
    });

    #listticker{
    height:357px;
    width:350px;

    overflow:hidden;
    border:solid 1px #990000;
    padding:0px 0px 0px 0px;;
    background:#00cccc;
    }
    #listticker li{
    border:solid 1px #990000;
    margin:0;
    padding:0;
    list-style:none;
    }
    #listticker li{
    height:60px;
    padding:0px;
    list-style:none;
    }
    #listticker a{
    color:#ff0000;
    margin-bottom:
    }
    #listticker .news-title{
    display:block;
    font-weight:bold;
    margin-bottom:0px;
    font-size:11px;
    }
    #listticker .news-text{
    display:block;
    font-size:11px;
    color:#666666;
    }
    #listticker img{
    float:left;
    margin-right:0px;
    padding:4px 2px 31px 0px;
    border:solid 1px #990000;
    }

    imgr = new Array();

    imgr[0] = “http://lh4.ggpht.com/_TaHzV-QgYq0/SyiguUMSZPI/AAAAAAAAD5o/8OUTDqpiBa0/2BDCAP1Q1FHCAZCRX0VCAA2TWC8CAMXK2OSCAXAB9WTCA76YCE2CA7QTVI4CAODKQW1CAUCG3TACAIB14AOCA05Q3D5CAH5G9EECAI1EKC5CAT2I6BRCA7FZIM6CA1H0E2CCAPFHMUOCAPNI8ZFCAVU95AA.jpg”;
    imgr[1] = “http://lh4.ggpht.com/_TaHzV-QgYq0/SyigufSqEpI/AAAAAAAAD5s/wX5hQSySo6w/4RWCA3QBW5ICAYSAPJRCATBZWLBCA5IEHTMCADJIEZOCA6V1BHDCA4ZH0MWCAQND00ACAWXVEKCCAA9KPZBCAXCQ02KCA78OLQ7CA46L1Z3CAC012KYCAUOKJO7CA35ACHKCAPYEDPBCARFEKAWCASDQWUW.jpg”;
    imgr[2] = “http://lh5.ggpht.com/_TaHzV-QgYq0/Syiguq2O14I/AAAAAAAAD5w/kVBy_vSqtAg/9OVCAPMW716CAWPOP2QCAOTDKZFCASQOZ6XCAQZ2T5BCATT8SWKCA2M5ZWDCAUQDP77CAYO1HKDCAO3GEVDCAKR3G53CACRIKWWCAE9PAYACAXNL449CAVXASC0CAE5X5WRCANK22RRCAMN1WX1CAHJMLPP.jpg”;
    imgr[3] = “http://lh4.ggpht.com/_TaHzV-QgYq0/SyiguuO9B0I/AAAAAAAAD50/9sDMGnLb8H0/BHJCAUDQUK4CA8W1CM9CAMYTHD3CATALNAYCADKO3MKCA2IK6GKCA0RSJ4BCAH1XJYYCAJ92QURCALYERB2CABMT3UNCAHAOAXNCA305QQBCAGT26JLCAFR1L2KCAST70FFCAG6DWZACACJQ74TCAN0D9OV.jpg”;
    imgr[4] = “http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg”;

    showRandomImg = true;
    tablewidth = 350;
    cellspacing = 0;
    borderColor = “#990000”;
    bgTD = “#00cccc”;

    imgwidth = 50;
    imgheight = 50;

    fntsize = 11;
    acolor = “#ff0000”;
    aBold = true;
    icon = ” ☼ “;

    text = “no”;

    showPostDate = false;

    summaryPost = 75;
    summaryFontsize = 11;
    summaryColor = “#990000”;
    icon2 = ” » “;

    numposts = 15;

    home_page = “http://singleboy010.blogspot.com/”;

    Điều chỉnh code: Bạn hãy thay code màu xanh đậm trong code trên thành địa chỉ blog của bạn.
    Code màu cam là màu nền của tiện ích, code màu tím là số bài bạn muốn hiển thị luân phiên trong tiện ích, code màu xanh lá là màu của text, code màu xanh nhạt là chiều cao và chiều rộng của ảnh thumbnail, Bạn hãy điều chỉnh các code tren cho hợp lý rồi dán vào TML/Javascript
    Chúc bạn thành công

    Chuyên mục:Thủ thuật blog
    1. Chưa có phản hồi.
    1. No trackbacks yet.

    Gửi phản hồi

    Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

    WordPress.com Logo

    Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

    Twitter picture

    Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

    Facebook photo

    Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

    Google+ photo

    Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

    Connecting to %s

    %d bloggers like this: