Tạo tin tức mới Widget Breaking News kèm Social Buttons cho Blogspot

Breaking News là một widget phù hợp cho những trang tin tức, công nghệ, giúp cho người đọc có thể dễ dàng tiếp cận thông tin. Hơn nữa tiện ích này đảm bảo tính khoa học, chuyên nghiệp cho blog.
Mình đã tìm tiện ích này trên mạng, tuy nhiên đa số các tiện ích này đều bị lỗi. Nay chia sẻ đến các bạn tiện ích 2 trong 1 tích hợp Breaking News kết hợp cùng bộ nút mạng xã hội, RSS ẩn hiện trên thanh Breaking News.

Ảnh demo

Các bước thực hiện

Bước 1: Các bạn chèn đoạn code sau dưới thẻ mở của header ví dụ:

<div id='head-top'>
<div id='header-wrapper'>
<b:section class='header-top' id='header-top-section' maxwidgets='1' showaddelement='no'>

Lưu ý: Đoạn code này phụ thuộc vào template của bạn nhé! Tìm thử (Ctrl+F) các từ khóa như header-wrapper; header;...

Đoạn code cần chèn:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + "_select"'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&#9660;</span>
<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Bước 2: Chèn giao diện cho Widget

Các bạn tiến hành chèn đoạn sau vào trước thẻ đóng ]]></b:skin>
.PageList h2{display:none}
.PageList ul{background:#F8F8F8;_background-image:none;border-bottom:4px solid #007F74;border-top:4px solid #007F74;margin-top:0;margin-left:-30px;margin-right:-30px}
.PageList ul{margin:0;padding:1;overflow:hidden;list-style:none}
.PageList li a{display:inline-block;padding:.6em 1em;font:normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;color:#007F74;border-left:1px solid #fff;border-right:1px solid #ccc}
.PageList li{margin:0;padding:0;float:left}
.PageList li a:hover,.PageList li.selected a{color:#fff;background-color:#007F74;text-decoration:none}
.PageList li.selected a{border-left:0}

Lưu ý: PageList bạn có thể đổi thẻ này bằng 1 thẻ khác như .PageList98 để tránh trùng lặp với các Widget khác.

Giao diện mình đã tối ưu, demo giống như hình ở trên.

Để thêm danh mục cho menu các bạn nhấn vào nút chính sửa nhanh (quickedit) hoặc vào Bố cục để thêm chuyên mục.

Cách thêm chuyên mục như hình bên dưới, chuyên mục là danh sách trang của bạn. Chọn và thêm vào nhé! Sắp xếp chúng bằng việc kéo thả các chuyên mục.