Hướng dẫn tạo bài viết nổi bật cho blogspot
6/24/2018
Edit
Chào anh em đã quay lại blog mình nhé hôm nay mình sẽ hướng dẫn anh em tạo widget bài viết nổi bật cho blogspot
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);
}
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>
//<![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>
<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
Xin chào !Tôi là Anh Star kẻ đứng sau website này, tôi viết blog toàn thời gian và kiếm tiền online qua click quảng cáo. Website này lần đầu tiên được thành lập vào năm 2018, hoạt động vào đầu tháng 5 năm 2018 cho đến ngày hôm nay.
