Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger

Thứ Sáu, tháng 11 21, 2014

Hướng dẫn 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 tại Terocket cả nhà nhé!

T

rước đây thì Terocket đã giới thiệu rất nhiều thủ thuật blog liên quan đến nút social buttons rồi, những thủ thuật blog đó đều rất ấn tượng, đẹp mắt và phù hợp với mọi website. Hôm nay, tiếp tục với chủ đề về Social Buttons, Terocket giới thiệu đến các bạn một bộ nút khác, đơn giản hơn, ấn tượng hơn, hiện đại hơn và trẻ trung hơn có tên là [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger.

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!

Với thủ thuật blog [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger mới này, sẽ có 4 nút Facebook, Twitter, Google+ và Feed RSS cả nhà nhé. Nó liên kết trực tiếp đến URL các fanpage và cộng đồng của các bạn. Mang màu sắc cổ điển, đơn giản và chủ đạo là đen trắng, nhưng có điểm nhấn ấn tượng hơn đó chính là khi rê chuột vào, nó sẽ ra các biểu tượng sinh động, màu sắc rất tươi mới, cảm giác thay đổi như thấy vườn địa đàng vậy. Chắc chắn bạn sẽ rất thích.

Live Demo

Và để thực hiện thủ thuật blog [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này, chỉ cần vài thao tác rất đơn giản. Nào cùng Terocket thiết kế nó nhé.

Để thực hiện tiện ích này, chỉ cần Add đoạn mã code sau vào HTML/Javascript và Lưu lại

Đầu tiên bạn vào Blog Title → Layout → Add Widget → Chọn HTML/JavaScript và chép đoạn mã code sau vào trong HTML của Widget và Lưu lại nhé.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://facebook.com/Terocket" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/Terocket" target="_blank">Twitter</a></li>
<li><a class="google-p" href="http://plus.google.com/Terocket" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvH6Ii82XCdt99gf6Sg-pD6wfuV3PvTkR9r9UAcBxeU7ozTvWAA5-edyYAX9DPqTQ-MALimZfzABFxNsvafxtQpSEYyrAfxIXbQSPygEdSgmbWgXpZmfyhyphenhyphen_yV3fihQEOps5M97CJmQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvH6Ii82XCdt99gf6Sg-pD6wfuV3PvTkR9r9UAcBxeU7ozTvWAA5-edyYAX9DPqTQ-MALimZfzABFxNsvafxtQpSEYyrAfxIXbQSPygEdSgmbWgXpZmfyhyphenhyphen_yV3fihQEOps5M97CJmQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemzdYVJRbVWeLRdHfXPbPHgSnX0z0I9xO-JU5lq0KR18KwSQhPsN3DBWJdQHV9hSYuDR-KU64WbBTI0umvA6D2c00xZ8EE6J7yPFtKsENSagNzQUeAC6UPtx41Q7jx-sskSMSY6pJ5Q/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemzdYVJRbVWeLRdHfXPbPHgSnX0z0I9xO-JU5lq0KR18KwSQhPsN3DBWJdQHV9hSYuDR-KU64WbBTI0umvA6D2c00xZ8EE6J7yPFtKsENSagNzQUeAC6UPtx41Q7jx-sskSMSY6pJ5Q/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUcaEk539bAdJt1X_pZ-M13HVhRL51lWS6Ppmzu3fGHF2j6ux_tV8R1i5MknyeMpCM4Cn09H2jRJ13RIDtTO1pfHr6V-kT8mlSjzd_GL0c1ZBKzss1yO_vT85W0O1-cZtlpjqv6mLeg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUcaEk539bAdJt1X_pZ-M13HVhRL51lWS6Ppmzu3fGHF2j6ux_tV8R1i5MknyeMpCM4Cn09H2jRJ13RIDtTO1pfHr6V-kT8mlSjzd_GL0c1ZBKzss1yO_vT85W0O1-cZtlpjqv6mLeg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycWKYj-B2eQ4ukCNYwlMKI-Zn-16W1DteHttLnPqRthlT1D-4Wq8ONOaoVauh2Q8vk5W8Prtl0-GLthd9aiyMprbhyphenhypheni6E-A3Ag0AJT91JERFoLwu-Bm8jv2XRUC38rCUk8_7l00VYJQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycWKYj-B2eQ4ukCNYwlMKI-Zn-16W1DteHttLnPqRthlT1D-4Wq8ONOaoVauh2Q8vk5W8Prtl0-GLthd9aiyMprbhyphenhypheni6E-A3Ag0AJT91JERFoLwu-Bm8jv2XRUC38rCUk8_7l00VYJQ/s1600/twitter.png) no-repeat 0 0}
</style>

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

Ok, vậy là thủ thuật [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger mà Terocket vừa hướng dẫn trên đây đã xong rồi, chúc các bạn thành công và có được những blog thật đẹp nha.

Ai đã làm được rồi, hãy share nội dung [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này đến bạn bè, ai chưa hiểu chổ nào thì gửi ý kiện bình luận, Terocket sẽ giải đáp cho các bạn nha!

Landgonow.com

.