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
thu thuat blogspot, icon đẹp

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/itviet360com/166823093455666/"><img border="0" src="https://lh6.googleusercontent.com/-onuAaa_m6k8/UREjhyzJuuI/AAAAAAAAB6k/NbPPL1Jdhew/s64/itviet360.com-facebook.png" /></a><a href="https://twitter.com/phongvu18nd"><img border="0" src="https://lh3.googleusercontent.com/-Ttp0nD6vfSQ/UREjjLOt6EI/AAAAAAAAB64/V7a_IQCHzdU/s64/itviet360.com-twitter.png" /></a><a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://lh3.googleusercontent.com/--5wZAGGrRP8/UREjh6gGeDI/AAAAAAAAB6g/iiZ9Pk8LEYQ/s64/itviet360.com-google_plus.png" /></a><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img border="0" src="https://lh5.googleusercontent.com/-su5KvZUkbMM/UREjiAfvrVI/AAAAAAAAB6w/LLJ5WKorwuk/s64/itviet360.com-rss.png" /></a><a href="http://www.youtube.com/user/itviet360/"><img border="0" src="https://lh4.googleusercontent.com/-zytcU6BaDtw/UREjjef514I/AAAAAAAAB68/-KlaD_4cQ8I/s64/itviet360.com-youtube.png" /></a>
</p>
</center>


MẪU 2:


CODE:

<style>p#hb_socialicons img {
/* huong dan thu thuat http://itviet360.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://itviet360.com */
</style>


<center>
<p id="hb_socialicons">
<a href="http://www.facebook.com/pages/itviet360com/166823093455666/"><img border="0" src="https://lh6.googleusercontent.com/-onuAaa_m6k8/UREjhyzJuuI/AAAAAAAAB6k/NbPPL1Jdhew/s64/itviet360.com-facebook.png" /></a><a href="https://twitter.com/phongvu18nd"><img border="0" src="https://lh3.googleusercontent.com/-Ttp0nD6vfSQ/UREjjLOt6EI/AAAAAAAAB64/V7a_IQCHzdU/s64/itviet360.com-twitter.png" /></a><a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://lh3.googleusercontent.com/--5wZAGGrRP8/UREjh6gGeDI/AAAAAAAAB6g/iiZ9Pk8LEYQ/s64/itviet360.com-google_plus.png" /></a><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img border="0" src="https://lh5.googleusercontent.com/-su5KvZUkbMM/UREjiAfvrVI/AAAAAAAAB6w/LLJ5WKorwuk/s64/itviet360.com-rss.png" /></a><a href="http://www.youtube.com/user/itviet360/"><img border="0" src="https://lh4.googleusercontent.com/-zytcU6BaDtw/UREjjef514I/AAAAAAAAB68/-KlaD_4cQ8I/s64/itviet360.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://itviet360.com */
</style>

<center>
<p id="hb_socialicons">
<a href="http://www.facebook.com/pages/itviet360com/166823093455666/"><img border="0" src="https://lh6.googleusercontent.com/-onuAaa_m6k8/UREjhyzJuuI/AAAAAAAAB6k/NbPPL1Jdhew/s64/itviet360.com-facebook.png" /></a><a href="https://twitter.com/phongvu18nd"><img border="0" src="https://lh3.googleusercontent.com/-Ttp0nD6vfSQ/UREjjLOt6EI/AAAAAAAAB64/V7a_IQCHzdU/s64/itviet360.com-twitter.png" /></a><a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://lh3.googleusercontent.com/--5wZAGGrRP8/UREjh6gGeDI/AAAAAAAAB6g/iiZ9Pk8LEYQ/s64/itviet360.com-google_plus.png" /></a><a href="http://feeds.feedburner.com/blogspot/nguoinhaque00909"><img border="0" src="https://lh5.googleusercontent.com/-su5KvZUkbMM/UREjiAfvrVI/AAAAAAAAB6w/LLJ5WKorwuk/s64/itviet360.com-rss.png" /></a><a href="http://www.youtube.com/user/itviet360/"><img border="0" src="https://lh4.googleusercontent.com/-zytcU6BaDtw/UREjjef514I/AAAAAAAAB68/-KlaD_4cQ8I/s64/itviet360.com-youtube.png" /></a>
</p>
</center>


Chúc các bạn vui vẻ
Chuyên mục: , , ,

5 comments:

  1. Thanks ban, mình đã làm được, thủ thuật không rắc rối...rất dể làm... ^ ^ rất đẹp

    ReplyDelete
  2. hiệu ứng đẹp quá. cám ơn bác admin

    ReplyDelete
    Replies
    1. ^_^ ghé thăm site đều đều nhé.

      Delete
  3. Bạn cho mình hỏi muốn thêm liên kết mạng xã hội như trên, nhưng vị trí ở bên cạnh giống như bộ nút chia sẻ mạng xã hội của bạn thì phải làm thế nào? cảm ơn bạn

    ReplyDelete