Hướng Dẫn Cách Poup Ảnh Phóng To Ở Cửa Sổ Mới

Manhhaiblog chào các bạn,bài viết này mình chia sẻ cho những ai mới và đang đam mê dành cho blog của mình ,bài viết này sử dụng CSS nhưng nhẹ nhàng load cũng nhanh bạn nào có blog chuyên sử dụng hình ảnh thì thủ thuật này hy vọng sẽ giúp ích cho các bạn sử dụng.

Tạo tài khoản Blogger ==> Trang Tổng Quan ==>Bố Cục ==> Tiện Ích/javacript .

Coppy và Pass Code này vào ==> lưu lại là ok nhé.

Đoạn code này Video được đặt ẩn sau bức ảnh này.

<style type="text/css">
.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: transparent;
padding: 0px;
left: -100px;
border: 0px solid #000;
visibility: hidden;
color: #000;
text-decoration: none;
}

.img-thumbnail span img{border: 1px solid #000;border-radius:5px;max-width:720px;
}

.img-thumbnail:hover span{
visibility: visible;position: relative;
/*Vị trí hiển thị ảnh popup*/
top:0px;
left:0px;
}
</style>



<a class='img-thumbnail' href='https://manhhaiblog.blogspot.com/'>
<img alt='Manhhaiblog' height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNfavOp23RyCYQjn7di-O3D-bpBbnJoNZqKPs9PCoPW8iafEpoxbRSV7YdNQZBYpjOvDVsdZ-zdZ81orCmO2H_2HEjSdzOrG1Pgi3ul9S0qnX76oMYDaAom78XbGmCjyfmtBTPuU7GV4/s320/hot-girl-bikini-goi-cam-bac-nhat-xu-kim-chi-lo-dien-anh-nong-manhaihaiblog.jpg' style='padding:10px 18px;' width='300'/>
<span><iframe allowfullscreen="" frameborder="0" height="380" src="https://www.youtube.com/embed/VCSe8d1GQQM?rel=0&amp;autoplay=1&amp;_admParamTvc=0;0;0;0&amp;controls=0&amp;showinfo=0" style="max-width: 100%;" width="680"></iframe></span></a>

* Còn đây là đoạn code dành cho poup hình ảnh cần phóng to .

<style type="text/css">
.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: transparent;
padding: 0px;
left: -100px;
border: 0px solid #000;
visibility: hidden;
color: #000;
text-decoration: none;
}

.img-thumbnail span img{border: 1px solid #000;border-radius:5px;max-width:720px;
}

.img-thumbnail:hover span{
visibility: visible;position: relative;
/*Vị trí hiển thị ảnh popup*/
top:0px;
left:0px;
}
</style>



<a class='img-thumbnail' href='https://manhhaiblog.blogspot.com/'>
<img alt='Manhhaiblog' height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNfavOp23RyCYQjn7di-O3D-bpBbnJoNZqKPs9PCoPW8iafEpoxbRSV7YdNQZBYpjOvDVsdZ-zdZ81orCmO2H_2HEjSdzOrG1Pgi3ul9S0qnX76oMYDaAom78XbGmCjyfmtBTPuU7GV4/s320/hot-girl-bikini-goi-cam-bac-nhat-xu-kim-chi-lo-dien-anh-nong-manhaihaiblog.jpg' style='padding:10px 18px;' width='300'/>
<span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6RIYntUIm67tMclQ_0bkRrXG3H2FV2W9THVjAfYP_vSb2jHJ_p-29xazmlkvAKpOvDFgfF0QMk9JHKGirdMhXOjjKa9pEZPPI_NTPzkPr5qaohJ5LBjuTsjv4DaDjQN-6M_HJG2am6mE/s1600/hot-girl-bikini-goi-cam-bac-nhat-xu-kim-chi-lo-dien-anh-nong-100-do-426120.jpg'/></span></a>

Demo Click here Manhhaiblog Click here

Lưu Ý :

Link mầu đỏ các bạn thay bằng link blog của bạn.
Linh ID của yotube các bạn nên thay bằng id mà các bạn muốn.
Link mầu vàng là link hình ảnh cần thay theo ý muốn các bạn, hãy thử rê chuột vào hình ảnh hotgirl này xem thử nhé :D .Chúc các bạn thành công nhé.