Thêm nút mạng xã hội cho blogspot (blogger) rất chuyên nghiệp

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ách thêm nút mạng xã hội cho blogspot (blogger) như sau:

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:

Demo 1

<center><style type='text/css'>
/*WIdget by www.minhtristar.blogspot.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/nguyen.minhtri.9256">Join Us on Facebook</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/MinhTriStarOfficialVIP">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/onellollesx123">Follow me on Twitter</a></li>
<li><a class="google" href="https://plus.google.com/+MinhTríStarOfficialVIP">Join me on Google+</a></li>
<li><a class="linkedin" href="MinhTriStarOfficialVIP">Connect With Us on LinkedIn</a></li>
</ul>
</div></center>

Code theo phong cách 2:

Demo 2

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://facebook.com/nguyen.minhtri.9256" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/onellollesx123" target="_blank">Twitter</a></li>
<li><a class="google-p" href="http://plus.google.com/+MinhTríStarOfficialVIP" target="_blank">Google plus</a></li>
<li><a class="rss" href="MinhTriStarOfficialVIP" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-pJPxYgmIh4c-VFDlgt0Hn0RJaN0fv5w10LNwYxhEs8pHrTOjTrHiPe0934duTmC-MuWWIW-iVb_gI__RsZSq-UOlEGU7y5t-9eILzUPfbi9_7p1kgBHfqmO7T7bjpVb5H0M8weObA/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-pJPxYgmIh4c-VFDlgt0Hn0RJaN0fv5w10LNwYxhEs8pHrTOjTrHiPe0934duTmC-MuWWIW-iVb_gI__RsZSq-UOlEGU7y5t-9eILzUPfbi9_7p1kgBHfqmO7T7bjpVb5H0M8weObA/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBZBBADedpFITMdl3wjRfRxmogl6IW_bspM2v6J_1d2wZQYKBGRvZi3Qa19vlNX90o_2nUsk2V1gY-UjPGMgJjyUO0yKCB66f920cVJeg54Zt4JbnwhbHQP1v49CUBls0ZdnLgLLKQQ/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBZBBADedpFITMdl3wjRfRxmogl6IW_bspM2v6J_1d2wZQYKBGRvZi3Qa19vlNX90o_2nUsk2V1gY-UjPGMgJjyUO0yKCB66f920cVJeg54Zt4JbnwhbHQP1v49CUBls0ZdnLgLLKQQ/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2hyAyw2wvboj4tCgQo-ciCFwMP-JVk0xolEGLhn3yWJlRlTxml3vm3em7YLndkUFgj0J93mBDAJx2r4PfCSrro7HFO_znKzyqus36rcX1egSC1VapVtm19WqdFYSKlDgR0NM2wLH3w/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2hyAyw2wvboj4tCgQo-ciCFwMP-JVk0xolEGLhn3yWJlRlTxml3vm3em7YLndkUFgj0J93mBDAJx2r4PfCSrro7HFO_znKzyqus36rcX1egSC1VapVtm19WqdFYSKlDgR0NM2wLH3w/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZ_wH356l8O_DoQDTlZ-uPSnwvEWUUxz1ml23LKJvgJQq6pnD_Rbkk_1evY1l0NIR9S1fZcrXtYXXzo3eyhLicdTcjIHRzRcHnWmzYHh8z6wd7PufKV_3G6WYnikvMqJIyQuoCfEIdw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZ_wH356l8O_DoQDTlZ-uPSnwvEWUUxz1ml23LKJvgJQq6pnD_Rbkk_1evY1l0NIR9S1fZcrXtYXXzo3eyhLicdTcjIHRzRcHnWmzYHh8z6wd7PufKV_3G6WYnikvMqJIyQuoCfEIdw/s1600/twitter.png) no-repeat 0 0}
</style>

Code theo phong cách 3:

Demo 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD09nTLJ5y6Fxz-9dDXWmgXsVcAJXs-0_9S0OsYV_0BBaYY-6ThFrv5o4ON1IrHVdlcgPZORtsOoHl-rY3nVi0j1Uop7gFAluj0Cs2A2nkpPK6szVZChcuy_N7WvoWT2uPqyxdqbuLNw/s1600/RSS-1.png) no-repeat scroll 10px center #F87E12;
padding:17.5px 60px;
}
.wg-social ul li .twitter {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRYnnCTTVlFi36Ukr0ZL9WGjU9FZfW0YBGwhmnHVTl8dOISgUWx72llFLiT1stPmjnbMMbVedQvAvUQkQlVPHjixBgzrwYO4pkSpSpTS1ZTE7djnd0-jKFz8ezA7HiFlQLC1_X4MA5uA/s1600/Twitter.png) no-repeat scroll 10px center #4CACEE;
padding:17.5px 60px;
}
.wg-social ul li .facebook {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFG80yaqvKEeH7cblT86unIhzWGuLSBLSkwqUXGqjl8Gm92ZICMYuoTcOvHJ1fDYJK0xNrgXWKNEKZgmcCMpW69qyh_VOPTtCm9kGnQHSOXw4NytLTAoB3aRJeNxf13CsLO_u7PDO2aw/s1600/Facebook-1.png) no-repeat scroll 10px center #3B5998;
padding:17.5px 60px;
}
.wg-social ul li .google {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfeFAIxTrLWPoamj5hTBvds2Kmd2yWPpQlwzNAST7w1pMIq9ewadEBYvbG2AB1-oayhM98YUMWRxcMXxgPpfxweJuexX8imYNWD5l8pTRhk7tUILaG0RLk0OrkaV_O6iXWec5XzGtCrw/s1600/google.png) no-repeat scroll 10px center #D44937;
padding:17.5px 60px;
}
.wg-social ul li .linkedin {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqLhuSonY7FrKKXu4Mp1Gtu3qrT_VQTw_uB5W4HV67E1CuVXGI5gLlfFgiisXgGk9aaeGcq4U0Ptuqt-d6ncpBuyM0pvfnb05FYjoMbq7ILLRiZlerytXcH-Qg6KQ5PdFQ_oisKhlow/s1600/LinkedIn-1.png) no-repeat scroll 10px center #3692C3;
padding:17.5px 60px;
}
.wg-social ul li .youtube {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtndwZMw0oXqA7cHoiRZ00RP7FdlI_-AqAPPzhKyxefRmff-5yvXjt00Vk6AzWMt541bgelTAmaUIIwiX1JLKj_SUoXq3ZtDN0yLYf-dtQAjpaV1WGKsX0xRcaQ0lxWB1LwZD3bjbMqg/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="MinhTriStarOfficialVIP">Subscribe to Our RSS Feed</a></li>
<li><a target="_self" class="twitter" href="https://twitter.com/onellollesx123">Follow me on Twitter</a></li>
<li><a target="_self" class="facebook" href="https://www.facebook.com/nguyen.minhtri.9256">Find Us on Facebook</a></li>
<li><a target="_self" class="google" href="https://plus.google.com/+MinhTríStarOfficialVIP" rel="author">Join Us on Google+</a></li>
<li><a target="_self" class="linkedin" href="MinhTriStarOfficialVIP">Connect with Us on LinkedIn</a></li>
<li><a target="_self" class="youtube" href="https://www.youtube.com/channel/UCPZv4hsfp82I1JbVX0PHnNQ">Watch me on YouTube</a></li>
</ul>
</div>
</div>

Chú ý: Bạn cần thay những link màu xanh thành địa chỉ các trang cộng đồng của bạn. Thế là xong!

• 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.

Chúc các bạn thành công!