Thủ thuật blog Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này thực sự sẽ làm thay đổi bộ mặt website của bạn đấy!

Thủ thuật blog này được bố cục rất đơn giản, màu sắc rất bắt mắt và dễ lấy được cảm tình của người đọc. Tăng tính tương tác cho website và trải nghiệm người dùng. Và giờ thì cùng Windows2it thực hiện thủ thuật blog này bạn nhé!

    Đọc thêm:

● Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2

● Thêm Pop Out Facebook, Google+, Twitter cho blogspot (Blogger) Phiên bản Pro

Chỉ cần chèn đoạn mã sau đây vào HTML của web hoặc vào một Widget HTML/Javascript

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Code theo phong cách 1:

<center><style type='text/css'>
/*WIdget by www.windows2it.com*/
.wg-roseicwidget {  width: 300px;  margin: -10px;  text-decoration: none; }
.wg-roseicwidget ul {  margin: 0;  padding: 0;  text-decoration: none;}
.wg-roseicwidget ul li {  list-style:none;   padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a {   color: #fff;   display:block;  text-decoration: none;}
.wg-roseicwidget ul li a:hover {  color: #c9c9c9;  background-color: #333;  text-decoration: none; }
.wg-roseicwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.wg-roseicwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
/*WIdget by www.windows2it.com*/
</style>


<div class="wg-roseicwidget">
<ul>
<li><a class="facebook" href="https://www.facebook.com/windows2it">Join Us on Facebook</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/windows2it">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/windows2it">Follow me on Twitter</a></li>

<li><a class="google" href="https://plus.google.com/windows2it">Join me on Google+</a></li>
<li><a class="linkedin" href="windows2it">Connect With Us on LinkedIn</a></li>

</ul>
</div></center>

Read more »