Tạo Breaking News Widget Gọn Nhẹ Cho Blogspot
Lợi ích & Tính năng của Breaking News Widget Gọn Nhẹ Cho Blogspot:
- Thiết kế đẹp nhất để thu hút người dùng
- Mã tùy chỉnh hoàn toàn mà không có bất kỳ vấn đề nào.
- Khiến người dùng tham gia nhiều nhất.
- Giảm tỷ lệ thoát
- Thời gian của Người dùng sẽ được Tăng lên
- Cách tốt nhất để hiển thị các bài viết blog khác cho người dùng.
Các bước để thêm Breaking News Widget Gọn Nhẹ Cho Blogspot:
1. Đăng nhập vào Blogger
2. Trên bảng điều khiển Blogger , Chọn Chủ đề ➟ Chỉnh sửa HTML
3. Tìm thẻ </head> và dán đoạn CSS dưới vào trên nó
<style type='text/css'>/* Breaking News TL */#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}@media screen and (max-width:768px) {#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}</style>
4. Sau đó thêm đoạn JavaScript dưới vào trên thẻ </body>
<script type='text/javascript'>//<![CDATA[// Breaking News TL$(document).ready(function(){var e="https://www.nguyenlamblog.xyz/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});//]]></script>
Thay đổi nguyenlamblog.xyz bằng địa chỉ blog của bạn và thay thế số 10 theo số lượng bài viết bạn muốn hiển thị.
5. Cuối cùng bạn hãy lưu đoạn mã bên dưới vào nơi muốn hiển thị. Nhưng phải ở trong <body> và </body> nhé.
<div id='breakingwrapper'><div id='breakingnews'><span class='tulisbreaking'>News Update<span class='breakhidden'/></span><div id='recentbreaking'>Loading...</div><div class='blog-date'><script language='Javascript'>var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");var now = new Date();document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");</script></div></div></div><div class='clear'/>
Hoàn tất, giờ hãy ấn Lưu chủ đề và vào blog của bạn xem kết quả nhé :V
Hi vọng bài viết Tạo Breaking News Widget Gọn Nhẹ Cho Blogspot hữu ích với bạn. Đừng quên comment để nêu cảm nghĩ nhé.
naminakiky