Hiện thị menu đơn giản nhưng quá đẹp cho blog
Nói đến menu được coi là một thành phần vô cùng quan trọng trong Blogspot. Có rất nhiều cách để hiển thị menul cho blogspot, và hôm nay mình xin giới thiệu đến các bạn một cách hiển thị menu bằng hình ảnh đơn giản cho blogspot của các bạn.
Bước 1: Các bạn chèn đoạn css dưới lên trên thẻ ]]></b:skin>
/*css menu by vinh*/Bước 2: Các bạn chèn đoạn code hiển thị sau bất cứ chỗ nào bạn muốn nó hiển thị
.image-labels {float:left}
.image-labels .label img:hover{opacity:0.7 ; opacity: 0.7width: 59%height: 100%;border-radius: 50%;transition: width 1s}
.image-labels .label img{width:217px;height:115px;}
.image-labels .label{float:left;position:relative;width:217px;height:115px;padding:0;margin:0;overflow:hidden}
.image-labels .label:nth-child(3n){margin-right:0}
.image-labels .label a{position:absolute;right:0px;bottom:0;padding:5px 10px;font-size:12px;line-height:20px;color:#fff}
.image-labels .label a:hover{{width: 100px;font-family: cursive;border-radius: 20%;transition: width 3s;text-decoration: none;}
.image-labels .clearfix{float:left;min-width:700px;margin-top:50px;}
.image-labels .clearfix a{color:#fff;text-decoration:none}
<div class='image-labels clearfix'>
<div class='label'>
<img alt="" src="https://i.imgur.com/8EbY4nV.png" />
<a href='/search/label/Blogger' style='background-color: rgba(108,203,103,.9);'>Thủ Thuật Blogger</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/NrIsX1U.jpg" />
<a href='/search/label/TemplateBlogger' style='background-color: rgba(100,132,203,.9);'>Thủ Thuật PTS</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/WQVOOyA.jpg" />
<a href='/search/label/Youtube' style='background-color: rgba(190,68,42,.9);'>Thủ Thuật FACEBOOK</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/pA4v83i.jpg" />
<a href='/search/label/SEOer' style='background-color: rgba(190,68,42,.9);'>Sông Tích Cực</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/PabdRTS.jpg" />
<a href='/search/label/News' style='background-color: rgba(214,199,30,.9);'>Tư Duy Đột Phá</a>
</div>>
</div>
<div class='clear'></div>
Các bạn nhớ tuỳ chỉnh lại CSS và Label theo nội dung và bố cục Blog mình nha.Chúc các bạn thành công. Nếu thấy hữu ích hãy để lại một comment để ủng hộ mình nhé!
Lưu ý nhỏ : các bạn có thể test code Tại Đây
Bạn, Vinh van Nguyen và người khác
Bình luận
Hashtag:
#blogger
#code blogspot