Thêm một thủ thuật nhỏ nữa dành cho blogger manhhaiblog hướng dẫn các bạn cách làm thủ thuật này .Slider loading mượt mà với kích thước tùy chỉnh theo blog của các bạn.Thủ thuật này rất thích hợp với blog chuyên về hình ảnh ,sau đây là cách làm.
1 Tổng Quan ==> Mẫu ==> Chỉnh sửa Mẫu HTML
2. Tìm Thẻ ]]></b:skin>. ( bằng cách Ctrl + F )
3 Coppy code bên dưới và dán trước thẻ vừa tìm được.
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input { display: none; }
.slide-container { display: block; }
.slide {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
}
.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
.nav .next { right: 0; }
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label { display: block; }
.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(0, 0, 0, 0.8);
}
5 Quay lại Bố cục
6 Chọn widget javacript/HTML
7 coppy code phía dưới và dán vào widget vừa chọn
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXe-BapDQ6hi4JlTm5Qc8U_DAVqAnc_kCrUNR8aSt41gol0w13Cn-LwreDwxkJFqpOpNuWcxLDwL1FonjeW00wMI_2rEnZrX6OHCqAy_-m-qLCOo5758iDi8gmqeaiytv90xf5tK6c7s/s640/pham+van+anh7.jpg" />
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqL8bUwpSF0-0U_DyjwDNCpm0H_j6JcfDVhxfFUCf_4GIjve1kjiyD-7clfZpnvS77CEFDL4g99ta7PUkNh78SXMhwx_qegTtaDSCwvB3qfNwKN4NYTEFbucDVrsZvMBXlM4hVxtjsEw/s640/pham+van+anh9.jpg" />
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-qYyXD7R7r_a1W3TiPtQCDuJ2GUOVE5w40lXdIs4GqP9BHh7OAPCg8WFGbCMIoPoem6kjXFpLHuLhP82r1eWy_7MwnSiqdERX0YU7x3oO1eFppYwwLcdVsYMdW2xa8hNBDj2RYtcfps/s400/pham+van+anh.jpg" />
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU2VrBOhWOYo-ARNID2GBq_vaX0MoxjxpE9Z-Aw8dIeLHCeXfryQM89nqXWZMCB-cVue0UXdmE1fw0dG8Vi23zV76yFs8Hn4AzujTq3ZLt25wW7__q0O5DCen_4C7yn3q3VJMqHkeLebA/s1600/pham+van+anh10.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh525M1i3P-ghUWNoUTzaXwL0pclckwnYA3h1V_fR9S0coSSL6xvLezN26EL1dizQGVRNwzSRfXk6QWC7lT6KoFvqjwDDgBVDlGfyYpbqq68Dh_Ys3nhAPE4-VTDeGVNygYDyKqDHEZ4tU/s1600/pham+van+anh11.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7U7l5uStpgQ00Y5OveqRQp_7DLn1X2x3HXvauI9cNlgq1vDD2WN5yDtcz8w9fSfhy-Hy9n4sMueRlsakW9dG_md_Z_6085KC-Y5jIYEMQzj1mpgCpFuIFS1_kZB28r-M7aZOr8PMxM8/s640/pham+van+anh12.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
8. Lưu lại và xem kết quả nhé.
Đăng nhận xét Blogger Facebook Disqus