Tiện ích bài viết mới nhất hiệu ứng rơi

Đây là tiện ích bài viết mới dùng cho blog/web với hiệu ứng rơi tức là bài viết di chuyển xuống dưới bài nọ tiếp nối bài kia để tạo ra một sự trình chiếu đẹp mắt

Xem thử:

DEMO

Để gắn tiện ích bài viết mới có kèm ảnh với hiệu ứng "rơi" từ trên xuống, các bạn cần làm các bước sau:
Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript, sau đó dán tất cả các code này vào

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <br />
<style type=text/css scoped="scoped">
.spy-outer {
  border:1px solid white;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.4);
  box-shadow:0 1px 1px rgba(0,0,0,.4);
  margin:1px 1px 1px 1px;
}
.spy-outer h2 {
  margin:0;
  padding:1px 1px;
  background-color:#FFFFFF;
  color:#000;
  font:normal bold 12px/Arial, serif;
  text-transform:none;
  text-shadow:0;
}
.spy {
  margin:0;
  padding:0;
  font:normal normal 10px/12px Arial, serif;
  color:#333;
  overflow:hidden;
}
.spy li {
  list-style:none;
  text-align:left;
  margin:0;
  padding:5px 7px;
  background-color:#fff;
  border-top:1px solid #D8D8D8;
  border-bottom:1px solid #D8D8D8;
  word-wrap:break-word;
  overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
  font-weight:bold;
  color:#585858;
}
.spy-header {
  font:normal bold 12px/14px Arial, serif;
  display:block;
  color:#2E2E2E;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  /*
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  */
}
.spy-header:hover {
  color:#0000FF;
  text-decoration:underline;
}
.spy-summary {
  margin-top:5px;
  overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
  float:left;
  margin:0px 10px 0px 7px;
  padding:0;
  width:36px;
  height:36px;
  border:1px solid #899D00;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJ-vKTkdot7zmnBAUrfrSVEn8t4bXhrqlW4DcGe25JbejL_6BkyJiuZ47FgmhIaHwUi22l9MyV-NKtJTnszR1j2f7x8ZwWCzl8HmjT3MzJWcLwHDQ36jnmJbvUxU8gQ72UyvQAFgFLgkT/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
  -webkit-box-shadow:0 0 1px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 1px rgba(0,0,0,.7);
  box-shadow:0 0 1px rgba(0,0,0,.7);
}
.spy li img {
  border:none !important;
  float:none;
  margin:0;
  padding:0;
  display:none;
}
.spy-outer .loading {
  display:block;
  padding:1px;
  background-color:#fafafa;
}
</style>
<div id="spy-outer" class="spy-outer"><span class="loading">Đang mở...</span></div><script>
var spy_config = {
    widgetTitle: '<h2>Bài mới</h2>',
    url:'https://dautoblognz.blogspot.com',//địa chỉ Blog của bạn
    containerId: 'spy-outer',
    numPost: 6,
    numChars: 100,
    monthNames: [
        '/01/',
        '/02/',
        '/03/',
        '/04/',
        '/05/',
        '/06/',
        '/07/',
        '/08/',
        '/09/',
        '/10/',
        '/11/',
        '/12/'
    ],
    noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhanSKUi9t746vOTJjb8Kv9_HsgwPZ6B1odh3CEHxs-qzVcnTWjFU_xWMj5Kch3oYbVcs4jzw662iWL0Fzwy0zarVWoY0EXpoddsUJ-Y1dkvtsJD55NBCdeO3Jfg5RWJMqi-4cIrdD4rj18/s1600/noimage.png',
    showSummaries: false,
    showThumbnails: true,
    showPostDate: true,
    showComments: true,
    newTabLink: false,
    animatedRecentPost: true,
    jsonCallback: 'recentpost_spy',
    newsTicker: {
        visible: 5,
        interval: 3000,
        speed: 600
    }
};
</script>
<script>//<![CDATA[
(function(w, d) {
	$.fn.newsTicker = function(cfg) {
		cfg = $.extend({
			visible: 4,
			interval: 3000,
			speed: 600
		}, cfg);
		return this.each(function() {
			var $this = $(this),
				$list = $this.children(),
				anim = function() {
					$this.find('li:last').hide().prependTo($this).slideDown(cfg.speed);
				}, interval = w.setInterval(anim, cfg.interval);
			$this.css({
				'height': $list.outerHeight() * cfg.visible,
				'overflow': 'hidden'
			}).hover(function() {
				w.clearInterval(interval);
			}, function() {
				interval = setInterval(anim, cfg.interval);
			});
		});
	};
	var head = d.getElementsByTagName('head')[0],
		container = d.getElementById(spy_config.containerId);
	w[spy_config.jsonCallback] = function(json) {
		var skeleton = spy_config.widgetTitle + '<ul class="spy">',
			entry = json.feed.entry,
			date, title, link, summary, comment, img;
		for (var i = 0; i < spy_config.numPost; ++i) {
			date = entry[i].published.$t;
			title = entry[i].title.$t;
			var a = date.substring(0, 4),
				b = date.substring(5, 7),
				c = date.substring(8, 10);
			for (var j = 0, len = entry[i].link.length; j < len; ++j) {
				if (entry[i].link[j].rel == "alternate") {
					link = entry[i].link[j].href;
					break;
				}
			}
			for (var k = 0, ken = entry[i].link.length; k < ken; ++k) {
				if (entry[i].link[k].rel == "replies" && entry[i].link[k].type == "text/html") {
					comment = entry[i].link[k].title;
					break;
				}
			}
			summary = ("summary" in entry[i]) ? entry[i].summary.$t : "";
			img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url : spy_config.noImage;
			summary = summary.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "");
			if (summary.length > spy_config.numChars) summary = summary.substring(0, spy_config.numChars) + '&hellip;';
			skeleton += '<li>';
			skeleton += (spy_config.showThumbnails) ? '<div class="image-wrapper"><img src="' + img + '" alt="" width="36" height="36"></div>' : '';
			skeleton += '<a class="spy-header" href="' + link + '"' + (spy_config.newTabLink ? ' target="blank"' : '') + '>' + title + '</a>';
			skeleton += spy_config.showSummaries ? '<div class="spy-summary">' + summary : '';
			skeleton += spy_config.showPostDate ? ' <em>' + c + '' + spy_config.monthNames[(parseInt(b, 10) - 1)] + '' + a + '</em>' : '';
			skeleton += spy_config.showComments ? '<em> - ' + comment + '</em>' : '';
			skeleton += spy_config.showSummaries ? '</div>' : '';
			skeleton += '</li>';
		}
		container.innerHTML = skeleton + '</ul>';
		if (spy_config.animatedRecentPost) {
			$('#' + spy_config.containerId + ' ul').newsTicker({
				visible: spy_config.newsTicker.visible,
				interval: spy_config.newsTicker.interval,
				speed: spy_config.newsTicker.speed
			});
		}
		$(window).load(function() {
			$('#' + spy_config.containerId + ' img').each(function(i) {
				var $this = $(this);
				w.setTimeout(function() {
					$this.fadeIn(400);
				}, 400 * (i + 1));
			});
		});
	};
	var s = d.createElement('script');
	s.src = spy_config.url.replace(/\/$/, "") + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + spy_config.numPost + '&callback=' + spy_config.jsonCallback;
	head.appendChild(s);
})(window, document);
//]]></script>

Sau đó, bạn thay đổi địa chỉ Blog của bạn và bạn có thể thay đổi các tùy chỉnh như trên code đã chú thích để chọn cho mình một tiện ích đẹp nhất nha. Cuối cùng bấm lưu lại và quay trở lại Blog xem kết quả. Ở code trên thì thủ thuật này sẽ hiển thị tất cả các bài ở Web/Blog.