Nút chia sẻ mạng xã hội hình ngôi sao cho blogspot

Wednesday, April 10, 2013

Làm thế nào để thêm nút chia sẻ độc đáo cho blogger của bạn. Thủ thuật hôm nay mình giới thiệu tới các bạn 1 hiệu ứng nút chia sẻ hình ngôi sao rất đẹp cho blogspot. Khi rê chuột vào thì có hiệu ứng nổi phóng to nút chia sẻ.
- Chia sẻ các mạng xã hội như google Plus, Facebook, Twitter,...

Demo trực tiếp: http://demo-itviet360.blogspot.com/
Cách làm thủ thuật:
1. Vào bảng điều khiển Blogger -> Mẫu (template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl F) Tìm đến ]]> và dán code dưới đây ngay phía trên nó


/* thu thuat nut chia se - huong dan itviet360.com  */
.bubblewrap{
list-style-type:none;
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);
}

3. Lưu mẫu đó lại.
4. Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
5. Dán Code dưới đây vào tiện ích vừa thêm





https://plus.google.com/117290973503680239179">


http://www.facebook.com/pages/itviet360com/166823093455666">


#">


#">


http://feeds.feedburner.com/blogspot/nguoinhaque00909">