Nút Share Cực Cool Với Css3 Và Font Awesome Cho Blogger

Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo 1 nút share cực cool với CSS3 và Font Awesome cho Blogger. Nút share này có hiệu ứng và màu sắc khá bắt mắt, ưa nhìn

Demo

Thêm có thể thêm widget này vào bất cứ đâu nhưng theo mình bạn nên thêm nó vào trong bài viết của blog là hợp lí nhất. Để làm việc này hãy làm như sau

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Chèn dưới đây sau thẻ <data:post.body/>

[code]<div class="social social_intro"><span class="title-ico">
Follow Us On :
</span>
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-rss"></i></a>
<a href="#"><i class="fa-pinterest"></i></a>
<a href="#"><i class="fa-github"></i></a>
<a href="#"><i class="fa-cloud"></i></a>
</div>
<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://thuthuatblogger.net/wp-content/uploads/2014/03/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
.social a {color: #fff !important;}

</style>[/code]

Trong widget này mình sử dụng 3 link css thay vì 3 đoạn code css để không làm giảm tốc độ blog. Bạn có thể lưu 3 file đó về dưới dạng css, upload và chèn link của bạn vào

[code]<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://thuthuatblogger.net/wp-content/uploads/2014/03/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>[/code]

Sau đó các bạn thay các dấu # bằng link facebook, twitter… của bạn. Tiếp đó, bạn để ý đoạn code ở dưới cùng

[code]<style>
.social a {color: #fff !important;}
</style>[/code]

Các bạn thay #fff bằng màu của icon Facebook, Twitter.. hiển thị ở nút share

• Tweet
• Share
• Share
• Share
• Share