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

Loading...

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 ]]></b:skin>  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

<br />
<ul class="bubblewrap">
<li><a href="https://plus.google.com/117290973503680239179"><img src="http://3.bp.blogspot.com/-SKQ1igs2LNU/UOhE6HiT1rI/AAAAAAAAGPY/ePZqZ_lQ5lc/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/pages/itviet360com/166823093455666"><img src="http://1.bp.blogspot.com/-r0H2-cmL5dg/UOhE5_nSIQI/AAAAAAAAGPU/VHIaXRyd_XY/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/-pam6BN03QbY/UOhE7L4ISnI/AAAAAAAAGPk/UEVxDhh8wfM/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/-_Ph0s8LMOPA/UOhE7pj8mmI/AAAAAAAAGPw/xraxPNw2ERY/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img src="http://3.bp.blogspot.com/-Su8IoWDfS1o/UOhE6YvgxnI/AAAAAAAAGPc/2eiJmeVQ8eY/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>

Trong đó:
Phần link bôi đỏ là phần thay đổi link của các bạn nhé.
Lưu và xem kết quả nhé

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger