Tạo Breaking News cho Blogspot

Tiện ích Breaking news thường được sử dụng trên các trang tin tức, nó thường được đặt trên cùng template với tiêu đề như: Tin hót, Tiêu điểm, Breaking news,...dùng để hiển thị các bài viết mới nhất, các bài viết trọng tâm hoặc các bài viết của một chuyên mục nào đó,... kèm theo là một hiệu ứng jquery đẹp mắt, điều này góp phần làm tăng tính tương tác cũng như tính chuyên nghiệp. Nếu bạn muốn có một tiện ích Breaking news cho blog của bạn, chỉ cần làm theo các bước đơn giản dưới đây

Demo

- Đặc đoạn Javascript dưới đây trước </body> 

- Địa chỉ blog của bạn  e = "http://nhatchanh.info"; 
- Để hiển thị bài viết theo nhãn, thay  l = "-/tên nhãn"; 
- Số bài viết muốn hiển thị  t = 20; 

01	<script>//< ![CDATA[

02	$(document).ready(function () {

03	var e = "http://nhatchanh.info", //Địa chỉ blog của bạn

04	l = ""; // hiển thị bài viết theo nhãn VD: "-/Thủ thuật Blogspot"

05	t = 20; //Số bài viết hiển thị

06

$.ajax({

07	url: e+"/feeds/posts/default/"+l+"?alt=json-in-script&max-results=" + t,

08	type: "get",

09	dataType: "jsonp",

10	success: function (e) {function t() {

11	$("#pncbreakingnews li:first").slideUp(function() {

12	$(this).appendTo($("#pncbreakingnews ul")).slideDown()

13

})

14

}

15	var n, r, s = "",

16	a = e.feed.entry;

17	if (void 0 !== a) {

18	s = "<ul>";

19	for (var l = 0; l < a.length; l++) {

20	for (var o = 0; o < a[l].link.length; o++)if ("alternate" == a[l].link[o].rel) {

21	n = a[l].link[o].href;

22

break

23

}

24	r = a[l].title.$t, s += '<li><a href="' + n + '" target="_blank">' + r + "</a></li>"

25

}

26	s += "</ul>", $("#pncbreakingnews").html(s), setInterval(function () {

27

t()

28

}, 5e3)

29	} else $("#pncbreakingnews").html("<span>Không có kết quả!</span>")

30

},

31	error: function () {

32	$("#pncbreakingnews").html("<strong>Lỗi! Không tải được</strong>")

33

}

34

})

35

});

36

//]]>

37

</script>

- HTML (Hiển thị breaking news) chèn vào nơi muốn hiển thị hoặc vào Bố cục >> Thêm Tiện ích>> HTML/Javascript và dán nó vào

1	<div id='breakingnews'>

2	<span class='breakhead'><i class='fa fa-rss'/> Tin hót</span>

3	<div id='pncbreakingnews'>Đang tải...</div>

4

</div>

- Tiếp theo, thêm đoạn CSS dưới đây vào thẻ <b:skin>...</b:skin> hoặc <style>...</style> 

01	/* CSS Breaking News */

02	#breakingnews {

03	margin: 15px;

04	height: 38px;

05	line-height: 26px;

06	overflow: hidden;

07	background: #fff;

08	border: 1px solid #e6e6e6;

09

}

10

11	#breakingnews .breakhead {

12	position: absolute;

13	background: none repeat scroll 0 0 #444;

14	color: #fff;

15	display: block;

16	float: left;

17	font-family: inherit;

18	text-transform: uppercase;

19	padding: 6px 12px;

20

}

21

22	#pncbreakingnews li a {

23	font-family: inherit;

24	font-weight: 400;

25	color: #666;

26	margin-top: 10px;

27	transition: all 0.5s ease-in-out;

28

}

29

30	#pncbreakingnews li a:hover {

31	color: #359bed;

32

}

33

34	#pncbreakingnews {

35	float: left;

36	margin-left: 100px;

37	margin-top: 6px;

38

}

39

40	#pncbreakingnews ul,#pncbreakingnews li {

41	list-style: none;

42	margin: 0;

43	padding: 0;

44

}

45

46	@media (max-width:768px) {

47	#wrapper {

48	width: 80%;

49

};

50

}

- Cuối cùng Lưu lại và xem kết quả

Xem bài viết trên phiên bản di động