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

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

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.

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.

Đầ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

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://facebook.com/Tên Bạn" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/Tên Bạn" target="_blank">Twitter</a></li>
<li><a class="google-p" href="http://plus.google.com/Tên Bạn" 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/AVvXsEjSmdi0CgPab-I4L4U2TR0xFBFDl0NdYHIV1BeGC_M42vCHc8JDast9KnYfPtnoacm4EUXGJpRiNFmDIZBW5buedRKGP5IVKJPNdgPxsR-Kad36wzKdiz9nIQeh2EzhKub7QbH_bu8niw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmdi0CgPab-I4L4U2TR0xFBFDl0NdYHIV1BeGC_M42vCHc8JDast9KnYfPtnoacm4EUXGJpRiNFmDIZBW5buedRKGP5IVKJPNdgPxsR-Kad36wzKdiz9nIQeh2EzhKub7QbH_bu8niw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNgynfxs9aNmEyzetBEyY151S-0T0sdcbOCteSWHTFSl-6qY-ffGjEe5YNHzjWIiBcNEIz5kSv87JDLW-tQj9OqK4iX1mtbdyUn3y6fbVNYxc_DfZ9Z5GNWSHTc7fAfwcSiT6qAG5axg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNgynfxs9aNmEyzetBEyY151S-0T0sdcbOCteSWHTFSl-6qY-ffGjEe5YNHzjWIiBcNEIz5kSv87JDLW-tQj9OqK4iX1mtbdyUn3y6fbVNYxc_DfZ9Z5GNWSHTc7fAfwcSiT6qAG5axg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fugTwkLMzImT6C8V4c7h1tevkx3Ak_nAlcNg2n5yS9S224FGTTIIRuZdQ26LuyeSt2kx1tbBvnuyvDMXOu_xDn0t42izhn5-DnW7KKsfeFpyvzN9FyWPUs1s1yuf4kLCK96MUL7Ajg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fugTwkLMzImT6C8V4c7h1tevkx3Ak_nAlcNg2n5yS9S224FGTTIIRuZdQ26LuyeSt2kx1tbBvnuyvDMXOu_xDn0t42izhn5-DnW7KKsfeFpyvzN9FyWPUs1s1yuf4kLCK96MUL7Ajg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlU0N9NuQn_6_UJ8GTPIvoPdv6VWj8CnHbELU9vEggnRKiAFKV4OfLmS7_WxBqOrmCnP2DTTxEZ2NUPuIYtjCk_mfAM2pcP5RaH1NcNtDBP_fdN0VWnDAzz0iY7Zcau7vQVx3Xs_rIQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlU0N9NuQn_6_UJ8GTPIvoPdv6VWj8CnHbELU9vEggnRKiAFKV4OfLmS7_WxBqOrmCnP2DTTxEZ2NUPuIYtjCk_mfAM2pcP5RaH1NcNtDBP_fdN0VWnDAzz0iY7Zcau7vQVx3Xs_rIQ/s1600/twitter.png) no-repeat 0 0}
</style>

Ghi chú: Bạn cần thay chữ Tên Bạn thành địa chỉ các trang cộng đồng của bạn nha.

Unknown

Add Comment

Thủ-Thuật-Blogger

Wednesday, December 24, 2014

About Admin

Mang thế giới Template Blogger đến với bạn 1 cách hoàn thiện nhất. Chúng tôi chuyên sưu tầm template blogspot trên nguồn internet

Thêm Bình Luận Facebook Vào BlogspotHiện là mạng xã hội toàn cầu lớn nhất hiện nay, có thể nói là nhà nhà Facebook, người người Faceboo
Hướng dẫn SEO Off-Page cho webSEO Offpage là gì ?Seo Off page là phương pháp SEO dựa trên việc sử dụng các yếu tố bên ngoài
Hướng dẫn tạo Tab comment Facebook, Google +1 , Dispus cho Blogspot Hướng dẫn tạo Tab comment Facebook, Google +1 , Dispus cho Blogspot Chắc hẳn các bạn xẽ hỏi
Hiệu Ứng Tuyết Rơi Cho Blogspot Hiệu Ứng Tuyết Rơi Cho Blogspot Cách thực hiện Các bạn vào Bảng quản trị Blogger→Mẫu→

About Admin

Related Posts