Thanh button chuyển động khi di chuột vào cho blogger

Hôm nay mình giới thiệu đến các bạn thêm một thủ thuật tạo thanh button khá đẹp mắt và có hiệu ứng động khi di chuột vào . Đây là một thủ thuật khá đơn giản và không làm giảm tốc độ . 
Ảnh minh họa :

Các bước thực hiện :

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Bước 2- Vào Bố cục (layout) => Thêm tiện ích (Add widget)

Bước 3- Tạo một tiện ích HTML/javascript và dán đoạn code bên dưới vào nha.

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88aOhmlE1kbsqnXg_i4e17b1itcv-N374TkE9-lti6G8Be43vAg24S4J0HRU0L7oTIYBO9ots82GhBB-sLjkAZI4eTjqEWX_EEs5MluxMmXS0-qoV6gDkUN2jILoXUZWApFiWoofs4dw/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwa4PeoKBe4YPd3_Kt4rCkrkExA_cGCUIrGzU8-epOkzAUaA9nzT2j4ScooIVD665Sfqp1GMC6a5JcLUzo8wl63iToxG_IU3h8I6K1rUX7bll5uGVA5eDRJKCMwiKs4NVmYgqGjMaD_A/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.digg.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGALxbwIICYMLZTeewv3EQLDapDHfuH3LGAQKbQzcYR6IrBBqp3539Pq5D_d08et5wIfBTlKEfuvPwZcZ6Lp6I8Y_jnuC5jBZsHT0MO13UN_W2B6OSYaRUA97usinvp7-tMd8TCD69rs/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnt09RzCI7NnsiaW-9jeXYaGR3pcnDU1sy6WxZxbi-E6nZigBvmsSkhDqgbatxkyAkSVYQ93_5Mn1FVkNw3beTezgoGeuc8No-qbkZeihkCLbQYkLI3aiNUkMEMX3rds19a-rmFaHGOtI/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkdsSvl0rJXfaSXQhPd2uQQzpLQhECvLRFkapugE1YUtAWTskM7XH__JAgzA8YXUip5VkKJ0s0VR0L8fZZPirps5psV_xlAgoBaKxpP96SqjuWAaeWjA6cctc9Lasxo8KwnJynsGsw5bU/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Chúc các bạn thành công !