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

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/AVvXsEj2NencQBCu3cruje5lsW5qSIv_t-lpc4khN1zn-nOLBb8uNQRs9znrgbPN9f5N-lP_wJHINEHwtvZf2PDtcKgZO0CueSEyxZkykVSKZNhyna68IG975j9r5hMoYl4kUvdQgCbqesWWUXuq/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/AVvXsEg9_tEMELi19X_yLt9GsBxr4XL3ki1miQz7kKlJSg0hNiM-LxYTNVNETwzOzm1KPIQYkXD1asgUsjre0OjzoETi6F-JFs8AnQgr15e0dfWIfHcHIEQ3YHpg0hHBFFTFgMaWuyx0g270XOD-/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 !