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
- Đặc đoạn Javascript dưới đây trước
- 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
- Tiếp theo, thêm đoạn CSS dưới đây vào thẻ
- Cuối cùng Lưu lại và xem kết quả
- Đặ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;
- Để 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> |
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> |
<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 | } |
Share This:
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
No Comment to " Tạo Breaking News cho Blogspot "