Hướng dẫn tạo widget bài viết nổi bật cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Hướng dẫn tạo widget bài viết nổi bật cho blogger

Share:
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!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.