Touch Me cho blogspot

Sự tiến bộ, phát triển truyền thông của các mạng xã hội  như G+, Facebook, twitter ...   ngày càng được mọi người quan tâm và tích hợp lên web, blog cá nhân. Vì thế người ta đã cho ra đời hàng chục các công cụ đẹp mắt về các dịch vụ chia sẻ xã hội này. Được biết các blogger hiện nay phụ thuộc phần lớn vào các mạng như Facebook, Google plus và twitter thu hút độc giả và hướng họ tới web hay blog cá nhân của mình. Và công cụ mình sắp hướng dẫn tới hi vọng có thể giúp các bạn tăng số người hâm mộ cũng như độc giả cho web,blog của mình. Và mình xin giới thiệu tên công cụ đó chính là  "Touch Me". Tại sao tên gọi của nó lại như vậy? Bởi vì  khi di chuột qua nó nhìn thật hấp dẫn khiến người ta tò mò và có nhiều khả năng mọi người sẽ di chuột qua các biểu tượng và nhấn theo!  Tiện ích sử dụng các nút từ các dịch vụ phổ biến như Google Plus, Facebook, Twitter và RSS và được mã hoá nó gọn gàng bằng cách sử dụng HTML và  CSS. Và sau đây, để đưa tiện ích lên blog của mình các bạn làm theo hướng dẫn của mình nha!

Demo

1. Vào Blogger > Bố Cục
2. Thêm tiện ích HTML/JavaScript
3. Dán đoạn code sau vào nội dung của Tiện ích

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://trollfile.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;  
-moz-transition: ease-in 0.2s all;  
-o-transition: ease-in 0.2s all;  
-ms-transition: ease-in 0.2s all;  
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="LINK RSS CỦA BẠN" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="LINK GOOGLE PROFILE CỦA BẠN" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="LINK FACEBOOK CỦA BẠN" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="LINK TWITTER CỦA BẠN" rel='external nofollow' target='_blank' ></a>
</div>

4. Thay những chỗ mình tô đậm thành link liên kết tới những mạng xã hội tương ứng của bạn sau đó lưu lại !

Tham khảo từ MBT

Chúc các bạn vui vẻ! Hãy comments góp ý cho mình nha và đừng quên chia sẻ cho bạn bè nếu bài viết thú vị, cảm ơn nhiều!