GET LINK
Trong bài viết này mình tiếp tục chia sẻ cho các bạn code tạo nút Play hiện trên ảnh Thumbnail cho các blogspot dạng video
(*) Note: Backup lưu lại Template trước khi chỉnh sửa CSS để tránh lỗi chủ đề.
Đầu tiên vào Chủ đề của Blogspot => Tùy chỉnh => Chỉnh sửa HTML
Ctrl+F: Tìm thuộc tính: separator và thay bằng đoạn code bên dưới:
/* CSS Image */
.separator{width: auto;clear: left; margin:5px 0px;border-radius: 3px; padding: 5px;}
.separator { position: relative; width: 100%;}
.separator img { width: 100%; height: auto; }
.separator .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #E91E63; color: white; font-size: 20px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; text-align: center; }
.separator .btn:hover { background-color: black; }
Lưu lại CSS. Thoát ra và kiểm tra.
Trong bài viết khi up ảnh thumbail chỉnh sửa lại đoạn code bên dưới là OK.
<div class="separator" style="clear: both; text-align: center;">
<a href="#kv-sub" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3dFO0ch58A8h4jGrvwVYU6dHi-QjGz5xcEt05wKIQ76MDw_w2v2e3jeYQbtMPrJrhrIEAJCNDG5dCAzyEoin3SB2BJwjDnbCXyTK3QairPaw_Ttzkwww1x40Ju6hPscE1bwnTuHO7wh78/s1600/H%25C6%25B0%25E1%25BB%259Bng+D%25E1%25BA%25ABn+C%25C3%25A1ch+T%25E1%25BB%25B1+T%25E1%25BA%25A1o+D%25E1%25BA%25A5u+Tick+Xanh+Tr%25C3%25AAn+FaceBook+%25C4%2590%25C6%25A1n+Gi%25E1%25BA%25A3n+Nh%25E1%25BA%25A5t.jpg" />
<button class="btn">PLAY</button></a>
</div>
Nếu có bất kỳ thắc mắc nào bạn hãy để lại comment bên dưới để cùng nhau trao đổi và thảo luận nhé!
#TienWiki
TAGs:
CSS
