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/AVvXsEhpY0yf3nIJ2lX7RLRTyYlYsfnqKKY-IXCSxfMhIVeF115fodifYl1qArJpvidPUF6BPXJsteEFIF1xJTMc0W49qIlpyjc_dky8mdyE9ffwBCKCC5HW9L4C_oq7zwsZ67rWLQgiDStvCg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpY0yf3nIJ2lX7RLRTyYlYsfnqKKY-IXCSxfMhIVeF115fodifYl1qArJpvidPUF6BPXJsteEFIF1xJTMc0W49qIlpyjc_dky8mdyE9ffwBCKCC5HW9L4C_oq7zwsZ67rWLQgiDStvCg/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmJkYN5EeogyGVCsy6xBwSRfhPKvTVj4B9iX9w7Vo-V_hNTkYl-1qg7hSlrq0BDeATF-_5_l5vIsIX7zD6Z0RZWLNi7uqqwYHdmVkqU3Yo1Z2D8VBpcCm7XHT-Rruii7IzJ-ZbMu4TSg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmJkYN5EeogyGVCsy6xBwSRfhPKvTVj4B9iX9w7Vo-V_hNTkYl-1qg7hSlrq0BDeATF-_5_l5vIsIX7zD6Z0RZWLNi7uqqwYHdmVkqU3Yo1Z2D8VBpcCm7XHT-Rruii7IzJ-ZbMu4TSg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6VDpQiPE8vCbrYYvmDXQZHHHpw6fTxQ_jrpu-xLD149fEtFFzPsCnUx9uaVzxMBdqsqcJLHY5dZeBdgCjq9kJnC2DgSDOz5bKBJ-HT4rg7D-T36IjyL0PR-msujFIFL_qxwgyIShRQ/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6VDpQiPE8vCbrYYvmDXQZHHHpw6fTxQ_jrpu-xLD149fEtFFzPsCnUx9uaVzxMBdqsqcJLHY5dZeBdgCjq9kJnC2DgSDOz5bKBJ-HT4rg7D-T36IjyL0PR-msujFIFL_qxwgyIShRQ/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij18jEeTpWKQBI7UykVR2_q0NNf7WZJpFssrgenHoGAkUrB0nk2Trzg_jyobmGPnHhBz2IBGqdaoHboI_g0KVLGdtY4oVdxAnwY-E9zYy2z4yehdAKwC598Nc5H2Nd2J7aHWdDf3FxxQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij18jEeTpWKQBI7UykVR2_q0NNf7WZJpFssrgenHoGAkUrB0nk2Trzg_jyobmGPnHhBz2IBGqdaoHboI_g0KVLGdtY4oVdxAnwY-E9zYy2z4yehdAKwC598Nc5H2Nd2J7aHWdDf3FxxQ/s1600/twitter.png) no-repeat 0 0}
</style>