Cách tạo Widget bài đăng nổi bật cho Blogger

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo widget bài viết nổi bật cho blogger. HƯỚNG DẪN THỰC HIỆN Bước 1:  Các bạn đăng nhậ...

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo widget bài viết nổi bật cho blogger.

HƯỚNG DẪN THỰC HIỆN

Bước 1: Các bạn đăng nhập vào trang quản trị blogger chọn Chủ đề => Chỉnh sửa rồi các bạn dán đoạn code sau lên trước thẻ ]]></b:skin>

figure.snip1205 {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 220px;
 max-width: 310px;
 width: 100%;
 background: #000000;
 text-align: center;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1205 * {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.35s ease-in-out;
 transition: all 0.35s ease-in-out;
}
figure.snip1205 img {
 max-width: 100%;
 vertical-align: top;
height: 220px;
}
figure.snip1205 i {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 font-size: 40px;
 color: #000000;
 width: 60px;
 height: 60px;
 line-height: 60px;
 background: #ffffff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 -webkit-transform: translate(-50%, -50%) scale(0);
 transform: translate(-50%, -50%) scale(0);
 transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
figure.snip1205 a {
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 position: absolute;
}
figure.snip1205.blue {
 background-color: #2472a4;
}
figure.snip1205.blue i {
 color: #20638f;
}
figure.snip1205.red {
 background-color: #ab3326;
}
figure.snip1205.red i {
 color: #962d22;
}
figure.snip1205.yellow {
 background-color: #e08e0b;
}
figure.snip1205.yellow i {
 color: #c87f0a;
}
figure.snip1205.green {
 background-color: #229955;
}
figure.snip1205.green i {
 color: #1e8449;
}
figure.snip1205.orange {
 background-color: #d67118;
}
figure.snip1205.orange i {
 color: #bf6516;
}
figure.snip1205.navy {
 background-color: #2b3c4e;
}
figure.snip1205.navy i {
 color: #222f3d;
}
figure.snip1205:hover img,
figure.snip1205.hover img {
 opacity: 0.3;
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
}
figure.snip1205:hover i,
figure.snip1205.hover i {
 -webkit-transform: translate(-50%, -50%) scale(1);
 transform: translate(-50%, -50%) scale(1);
 transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Bước 2: Các bạn tìm đến thẻ đóng </body> rồi dán đoạn code sau lên trước nó

<script type='text/javascript'>
//<![CDATA[
 $(".hover").mouseleave(
 function () {
 $(this).removeClass("hover");
 }
 );
//]]>
</script> 

Bước 3: Sau đó các bạn lưu mẫu lại rồi vào Bố cục => Thêm tiện ích rồi dán đoạn code sau vào đó

<figure class="snip1205">
 <img src="http://i.imgur.com/dvS447x.jpg" alt="sample2"/>
 <i class="fa fa-picture-o"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 blue">
 <img src="http://i.imgur.com/ihFFID9.jpg" alt="sample4"/>
 <i class="fa fa-check-circle"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 green">
 <img src="http://i.imgur.com/ARdzTaN.jpg" alt="sample3"/>
 <i class="fa fa-star"></i>
 <a href="#"></a>
 </figure> 

Thay đổi hình ảnh và URL bài viết mà bạn muốn hiển thị vào rồi nhấn lưu lại.

LỜI KẾT 

Vậy là chỉ với vài bước đơn giản bạn đã có thể tự tạo cho mình widget bài viết nổi bật cho blog của chính mình rồi.

Chúc các bạn thành công!