Css3 - Nút chia sẻ đẹp qua mạng xã hội cho blogger

Làm thế nào để thêm những nút chia sẻ, liên kết đến các trang cho blogger qua các mạng xã hội như: Facebook (FB), twitter, Google Plus (G+), RSS, Youtube? Hôm nay thủ thuật blogger hướng dẫn các bạn cách làm thủ thuật này. Sử dụng CSS3 để tạo những nút chia sẻ đấy. Hơn nữa, những nút chia sẻ này cũng trở nên sống động hơn khi rê chuột vào

Các mẫu và Code theo mẫu các bạn theo dõi dưới đây
- CÁCH LÀM THỦ THUẬT
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascripts
2. Lựa chọn mẫu bên dưới
3. Dán Code của mẫu vừa lựa chọn bên trên vào tiện ích và lưu lại

---

MẪU 1:

CODE:

<style>p#hb_socialicons img {
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}

</style>

<center>
<p id="hb_socialicons">
<a href="http://www.facebook.com/pages/seotopseo.blogspot.comcom/166823093455666/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41TlXrp6ekz3_Vt5NAGSysj8T5D5Nj4WAgCuL8C_QLb7Rfhs3FaBcov_v1HHLBANjykAMYTJ3xD_ch16UEo01lzKiCq3kATkkoA8ltRn-7tBpEPEXaPQ4sBCBwgjGEp82ZZbNla9vbShu/s64/seotopseo.blogspot.com-facebook.png" /></a><a href="https://twitter.com/phongvu18nd"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tyL6jcDXAenqmjrTt6eBX0L1y71Qcdw73Oiht5tBNJjkbPpLglX2uofrWZizXnc-67rbDtd6JfrVp0oQ0WsjACGbKO6joiHQkb0CQPaJ5UdDCmsjNrIm3BRfXkcSyGEXOFv76TTuYJ1e/s64/seotopseo.blogspot.com-twitter.png" /></a><a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ptkRvjB_f6Btyz3da6S2fRpNxX_TIIkvvsP5DeY1qPxtzw1mgfdDJa-FA8pRid-VPhuUkvjXIFO3Bh6LkuyXHdSlhczBuKC-B4wbqUzwKlURFHivoNbtx68IYpcypqOVr2ZmXcn6bSgP/s64/seotopseo.blogspot.com-google_plus.png" /></a><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38_Qbn2nNoPwRlkET-OyDJCRO7OZqEnlCJwCwRruk0nYN5nt58Au0NfdASxcM__tC51ya2fM4CpO8peF5V2GJmZYYp-CMaDgqSEzjL200XnpbtnoGbd1zCpL2XR-paA3hXUTZZ6686xgb/s64/seotopseo.blogspot.com-rss.png" /></a><a href="http://www.youtube.com/user/seotopseo.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALp5B2iTHiv3ttNrPwmq8CkavR0c2GmTGP-NGxMcVdpoSNl5laWoUML9qcOXp0ftZEC3kNDGTiVhkcoMXl_D1ubt9xCWa79GInHj6COCRA9_Tcg-PnkvQnbDePWDb5owMB81O209Cape5/s64/seotopseo.blogspot.com-youtube.png" /></a>
</p>
</center>


MẪU 2:

CODE:

<style>p#hb_socialicons img {
/* huong dan thu thuat http://seotopseo.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#hb_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

/* huong dan thu thuat http://seotopseo.blogspot.com */
</style>


<center>
<p id="hb_socialicons">
<a href="http://www.facebook.com/pages/seotopseo.blogspot.comcom/166823093455666/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41TlXrp6ekz3_Vt5NAGSysj8T5D5Nj4WAgCuL8C_QLb7Rfhs3FaBcov_v1HHLBANjykAMYTJ3xD_ch16UEo01lzKiCq3kATkkoA8ltRn-7tBpEPEXaPQ4sBCBwgjGEp82ZZbNla9vbShu/s64/seotopseo.blogspot.com-facebook.png" /></a><a href="https://twitter.com/phongvu18nd"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tyL6jcDXAenqmjrTt6eBX0L1y71Qcdw73Oiht5tBNJjkbPpLglX2uofrWZizXnc-67rbDtd6JfrVp0oQ0WsjACGbKO6joiHQkb0CQPaJ5UdDCmsjNrIm3BRfXkcSyGEXOFv76TTuYJ1e/s64/seotopseo.blogspot.com-twitter.png" /></a><a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ptkRvjB_f6Btyz3da6S2fRpNxX_TIIkvvsP5DeY1qPxtzw1mgfdDJa-FA8pRid-VPhuUkvjXIFO3Bh6LkuyXHdSlhczBuKC-B4wbqUzwKlURFHivoNbtx68IYpcypqOVr2ZmXcn6bSgP/s64/seotopseo.blogspot.com-google_plus.png" /></a><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38_Qbn2nNoPwRlkET-OyDJCRO7OZqEnlCJwCwRruk0nYN5nt58Au0NfdASxcM__tC51ya2fM4CpO8peF5V2GJmZYYp-CMaDgqSEzjL200XnpbtnoGbd1zCpL2XR-paA3hXUTZZ6686xgb/s64/seotopseo.blogspot.com-rss.png" /></a><a href="http://www.youtube.com/user/seotopseo.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALp5B2iTHiv3ttNrPwmq8CkavR0c2GmTGP-NGxMcVdpoSNl5laWoUML9qcOXp0ftZEC3kNDGTiVhkcoMXl_D1ubt9xCWa79GInHj6COCRA9_Tcg-PnkvQnbDePWDb5owMB81O209Cape5/s64/seotopseo.blogspot.com-youtube.png" /></a>
</p>
</center>

Mẫu 3:

Code:

<style>p#hb_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
/* huong dan thu thuat http://seotopseo.blogspot.com */
</style>

<center>
<p id="hb_socialicons">
<a href="http://www.facebook.com/pages/seotopseo.blogspot.comcom/166823093455666/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41TlXrp6ekz3_Vt5NAGSysj8T5D5Nj4WAgCuL8C_QLb7Rfhs3FaBcov_v1HHLBANjykAMYTJ3xD_ch16UEo01lzKiCq3kATkkoA8ltRn-7tBpEPEXaPQ4sBCBwgjGEp82ZZbNla9vbShu/s64/seotopseo.blogspot.com-facebook.png" /></a><a href="https://twitter.com/phongvu18nd"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tyL6jcDXAenqmjrTt6eBX0L1y71Qcdw73Oiht5tBNJjkbPpLglX2uofrWZizXnc-67rbDtd6JfrVp0oQ0WsjACGbKO6joiHQkb0CQPaJ5UdDCmsjNrIm3BRfXkcSyGEXOFv76TTuYJ1e/s64/seotopseo.blogspot.com-twitter.png" /></a><a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ptkRvjB_f6Btyz3da6S2fRpNxX_TIIkvvsP5DeY1qPxtzw1mgfdDJa-FA8pRid-VPhuUkvjXIFO3Bh6LkuyXHdSlhczBuKC-B4wbqUzwKlURFHivoNbtx68IYpcypqOVr2ZmXcn6bSgP/s64/seotopseo.blogspot.com-google_plus.png" /></a><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38_Qbn2nNoPwRlkET-OyDJCRO7OZqEnlCJwCwRruk0nYN5nt58Au0NfdASxcM__tC51ya2fM4CpO8peF5V2GJmZYYp-CMaDgqSEzjL200XnpbtnoGbd1zCpL2XR-paA3hXUTZZ6686xgb/s64/seotopseo.blogspot.com-rss.png" /></a><a href="http://www.youtube.com/user/seotopseo.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALp5B2iTHiv3ttNrPwmq8CkavR0c2GmTGP-NGxMcVdpoSNl5laWoUML9qcOXp0ftZEC3kNDGTiVhkcoMXl_D1ubt9xCWa79GInHj6COCRA9_Tcg-PnkvQnbDePWDb5owMB81O209Cape5/s64/seotopseo.blogspot.com-youtube.png" /></a>
</p>
</center>


---

Chúc các bạn vui vẻ