Menu Icon CSS3 đẹp giống Footer ThaiAiTi.com

Tweet

Thủ thuật tạo Menu Icon CSS3 đẹp cho blogspot, tốc độ load khá nhanh giống ở Footer ThaiAiTi





- Bạn chèn đoạn CSS sau trên ]]></b:skin>
.menucss3chantrang-thaiaiti {overflow: hidden;width: 940px;margin: 0 auto;}
div.devices{margin-bottom:0px}div.devices .modcontent ul{list-style:none;display:table;text-align:center;margin:0;padding-top:20px}
div.devices .modcontent ul
li{display:inline-block}div.devices .modcontent ul li:hover a:before{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGF3_jx6Kb_eg8Cy1pvpIzEC69NZK3Ig2RSfxmWUSUCZPsLYU7_Z003TUnOyEOgnJK2r3gF3DgZWffxJErjxYI3eWNZ3bOp8S8UlbeGSFGRBDhrFInKP6G-AtQn1RjvgzBRTIZYxmAAdcH/s0/icon_devices_hover.png) no-repeat left 0;padding-bottom:10px}
div.devices .modcontent ul li a{-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;
transition:all 0.2s ease-out 0s;padding:17px 50px 10px 0px;display:inline-block;position:relative;color: #333;font: 16px arial;text-transform: uppercase;}
div.devices .modcontent ul li a:before{content:"";width:50px;height:47px;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO0EMCPnAqyv-dV4Ds7FafgCggVyX_FP__Wb6oIzbO9mloWhgVPker6Oc2FsrcawwPLuf_8WDvdihEoAvkKAyH_tS55yiLuxXVuqRv6ySSBlAybEgH0F09F7F-q3E_TykdFP5H7WmZfgML/s0/icon_devices.png) no-repeat left 0;position:absolute;bottom:0px;left:0px;-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;transition:all 0.2s ease-out 0s}
div.devices .modcontent ul li
a.iphone{padding-left:60px}
div.devices .modcontent ul li a.iphone:before{background-position:0px 0px}div.devices .modcontent ul li
a.ipad{padding-left:70px}
div.devices .modcontent ul li a.ipad:before{background-position: -70px 0px;width:58px}div.devices .modcontent ul li
a.android{padding-left:60px}
div.devices .modcontent ul li a.android:before{background-position: -142px 0px}div.devices .modcontent ul li
a.tv{padding-left:85px}
div.devices .modcontent ul li a.tv:before{background-position: -207px 0px;width:74px}div.devices .modcontent ul li
a.page{padding-left:90px;padding-right:0px}
div.devices .modcontent ul li a.page:before{background-position: -305px 0px;width:79px}
- Chèn đoạn code sau vào nơi bạn cần hiển thị menu:
<div class='menucss3chantrang-thaiaiti'>
<div class='module devices'>
       <div class='modcontent clearfix'>

<ul>
<li>
<a class='iphone' href='http://www.thaiaiti.com/search/label/Template%20blogger'>Design</a></li>
<li>
<a class='ipad' href='http://www.thaiaiti.com/search/label/Photoshop'>PSD</a></li>
<li>
<a class='android' href='http://www.thaiaiti.com/search/label/iphone'>Mobile</a></li>
<li>
<a class='tv' href='#'>Video</a></li>
<li>
<a class='page' href='http://www.thaiaiti.com/search/label/Avid%20liquid%207'>Media</a></li>
</ul>
   </div>
</div>
</div>
- ThaiAiTi.com chúc bạn thành công !