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:



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>

Ghi chú: Bạn cần thay chữ Windows2it thành địa chỉ các trang cộng đồng của bạn nha. Thế là xong!

Kết luận

- Các code trên là một widget CSS tinh khiết (không ảnh hưởng gì tới các đoạn CSS trong template nên các bạn cứ yên tâm nhé!)

- Bạn có thể tùy biến (chỉnh sữa) một các dễ dàng.

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

Ai chưa hiểu chổ nào cứ để lại comment, Windows2it sẽ giải đáp cho các bạn !
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 nhận xét:

Post a Comment