Demo : forum đang dùng hoặc xem ảnh dưới

Code này giúp chúng ta có 1 thanh menu ảnh : các bạn có thể đặt ảnh thành viên hoặc ảnh của bạn ở trên đó ( kèm them đó là đường dẫn đến 1 topic nào đó ) hoặc có thể dùng làm quảng cáo ...

Cách làm

Cho code sau vào Footer begin:

Code:

<div class="imglist">
<a href="#"><img src="http://r20.imgfast.net/users/2015/12/67/35/avatars/1-51.jpg" alt="" /></a>
<a href="#"><img src="http://r20.imgfast.net/users/2015/12/67/35/avatars/216-87.jpg" alt="" /></a>
<a href="#"><img src="http://2img.net/i/fa/i/avatars/gallery/Dragon_ball/Dragon_ball_65.gif" alt="" /></a>
<a href="#"><img src="http://r20.imgfast.net/users/2015/12/67/35/avatars/28-66.jpg" alt="" /></a>
<a href="#"><img src="http://2img.net/i/fa/i/avatars/gallery/Musique_h/Music_h_28.jpg" alt="" /></a>
</div>

Bước tiếp theo cho đoạn sau vào Css :

Code:

.imglist{
position: fixed;
top: 30px;
left: 0px; 
} 
.imglist img{
height:25px;
width:25px;
margin:5px;
display: block;
transition:width 1.2s,height 1.2s,box-shadow 1.2s;
-webkit-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
-moz-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
-o-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
}
.imglist img:hover{
height:125px;
width:125px;
box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
-webkit-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
-moz-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
-o-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
}

ở chỗ

Code:

<a href="#">

Các bạn thay dấu # = Link đường dẫn đến nhá
Có thể thêm nhiều link ảnh = cách thêm nhiều code sau

Code:

<a href="#"><img src="http://2img.net/i/fa/i/avatars/gallery/Musique_h/Music_h_28.jpg" alt="" /></a>


chuyển bên phải thì

Code:

.imglist{
    position: fixed;
    top: 100px;
    right: 0px; 
    }