Thêm nút mạng xã hội cho blogspot blogger rất chuyên nghiệp và hiện đại phần 1

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>

Code theo phong cách 2:

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://facebook.com/windows2it" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/windows2it" target="_blank">Twitter</a></li>
<li><a class="google-p" href="http://plus.google.com/windows2it" target="_blank">Google plus</a></li>
<li><a class="rss" href="/feeds/posts/default?orderby=UPDATED" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 0}
</style>

Code theo phong cách 3:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'/>

<style>
.wg-social {
width:100%;
float:none;
margin:0;
}

.wg-social ul {
border:1px solid #CCC;
display:table;
margin:0;
padding:0;
}

.wg-social ul li {
list-style:none;
text-transform:none;
border-bottom:1px solid #CCC;
border-top:1px solid #FFF;
width:100%;
margin:0;
padding:0!important;
}

.wg-social ul li:first-child {
border-top:0 none;
}

.wg-social ul li:last-child {
border-bottom:0 none;
}

.wg-social ul li a {
background-color:#F2F2F2!important;
color:#404040;
display:block;
font-family: oswald;
text-decoration: none;
}

.wg-social ul li a:hover {
background-color:#fafafa!important;
}

.wg-social ul li .rss {
background:url(http://3.bp.blogspot.com/-3oBs-HZBNgA/Um-MXE49tTI/AAAAAAAADDA/nhHOwoceAcw/s1600/RSS-1.png) no-repeat scroll 10px center #F87E12;
padding:17.5px 60px;
}

.wg-social ul li .twitter {
background:url(http://1.bp.blogspot.com/-6aItDl3ZqNc/Um-MX4V-psI/AAAAAAAADDY/Py_OZyhHlWU/s1600/Twitter.png) no-repeat scroll 10px center #4CACEE;
padding:17.5px 60px;
}

.wg-social ul li .facebook {
background:url(http://1.bp.blogspot.com/-HgZaw6CUtdU/Um-MWmnPwPI/AAAAAAAADC0/3c1XCscZyoc/s1600/Facebook-1.png) no-repeat scroll 10px center #3B5998;
padding:17.5px 60px;
}

.wg-social ul li .google {
background:url(http://2.bp.blogspot.com/-5FIdKsk95vY/Um-MYtYXQgI/AAAAAAAADDQ/cq9JDVtENWc/s1600/google.png) no-repeat scroll 10px center #D44937;
padding:17.5px 60px;
}

.wg-social ul li .linkedin {
background:url(http://3.bp.blogspot.com/-nCElo3oMz9w/Um-MW6uNwqI/AAAAAAAADC4/1tuzlkZkpNo/s1600/LinkedIn-1.png) no-repeat scroll 10px center #3692C3;
padding:17.5px 60px;
}

.wg-social ul li .youtube {
background:url(http://1.bp.blogspot.com/-BD-6vOWZIek/Um-MYYscx0I/AAAAAAAADDI/ITVY2d90KtE/s1600/Youtube-1.png) no-repeat scroll 10px center #C6312B;
padding:17.5px 60px;
}

.wg-social-about {
display:none;
}
</style>

<div class="wg-social">
<ul>
<li><a target="_self" class="rss" href="http://feeds.feedburner.com/windows2it">Subscribe to Our RSS Feed</a></li>
<li><a target="_self" class="twitter" href="https://twitter.com/windows2it">Follow me on Twitter</a></li>
<li><a target="_self" class="facebook" href="https://www.facebook.com/windows2it">Find Us on Facebook</a></li>
<li><a target="_self" class="google" href="https://plus.google.com/windows2it" rel="author">Join Us on Google+</a></li>
<li><a target="_self" class="linkedin" href="http://in.linkedin.com/windows2it">Connect with Us on LinkedIn</a></li>
<li><a target="_self" class="youtube" href="http://www.youtube.com/windows2it">Watch me on YouTube</a></li>
</ul>
</div>
</div>