Hướng dãn tạo nút chia sẻ mạng xã hội hình ngôi sao cho blogspot

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

Thực hiện

Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: (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 thienhieu.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);

Bước 4: Lưu mẫu đó lại.
Bước 5: Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
Bước 6: 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDoWRAynWqmhqmM0Q7RnE9dumeigdmW9KXC_xpBwaAG6frBgpB8_z4MZrRSv6PBUYWXc2W8SPMmEIfJUsWrKxUKWjCmJBM94DJYwFL5RVkPjo0xvKcuBAkjaXvBaDBGUmIhGJvsdhj6lc/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/pages/itviet360com/166823093455666"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcXBK7n5DwoHo72TIW973bfahM2RWYL1DA771jFfDmsbN2xT7m8OSbBJeCdDmB_49uidFb4Q_XfBBkVJGkM6FcBVlTyFywqez1qzc946nGaURfIkB_is6juf9gWv0qtIulecwOVmet6x0/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwcBtdOvjhxSDkHjU3xrt32EHuJdhrLT9fV8GcBM2RwxgKeDvqnrhZ6asZMjoDoev5S5EiCaOEW1C8FKbelCOimb0fGeGHMqybq-u7rfbP7_f4nlOeeB99T7jhdU_sQO_1OxEVEQ0M1Uo/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSH4VXxoiY65hNyCiXIhwaVxeoavj7R60d498rLQ1Yne2R6eidmvHn8RRrLQk02qjjoodkGtsj9Powdi6lVb1K3d1dyYZr3cEazkZG-M0s3YMwgYast3pt4KwyJ-Um9o2pBs7zJ2QJ_Tw/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBaYAV_U38cxZEyWlPPvCB4FAfJxXj2Yc0p4WyB2R7-GzhLJk95ecdJ4ZBDXG8vb6fUzsnVDDFyH6kl2ljbK3uHW2Kswb-FvqgbpmKWqebiTBlPms8p3Iwe_12Rj6QexuRmJg6SnMX-M/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é

Lưu lại template và xem kết quả! Nếu có vấn đề gì thắc mắc hãy để lại comment nhé! Chúc bạn thành công!

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →