[Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger

Bút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger, sẽ tạo nên sự chuyên nghiệp cho blog của bạn ngay từ cái nhìn đầu tiên!

Hôm nay Terocket tiếp tục giới thiệu đến bạn đọc một thủ thuật cũ nhưng mới liên quan đến những nút share buttons. Ở chủ đề share buttons, Terocket đã giới thiệu rất nhiều lần và rất nhiều phương pháp thiết kế đã được nhiều bạn áp dụng thành công cho blog của mình, và hy vọng rằng ở thủ thuật blog liên quan lần này, các bạn cũng sẽ hài lòng và thỏa mãn hơn nữa!

Live Demo

Thủ thuật lần này có tên là [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger, hiệu ứng chuyên nghiệp, được làm hoàn toàn bằng CSS, không có sự xuất hiện của Javascript trong thủ thuật blogspot này, điều này càng làm nên lợi thế của thủ thuật, không làm chậm website, chuẩn SEO và trải nghiệm người dùng tốt hơn.

Bong bóng mờ sẽ được xuất hiện ở dưới nút mỗi khi khách của bạn rê chuột vào, cảm giác cực kỳ hiện đại, gọn gàng và thân thiện, kích thích cảm giác của khách hàng, rất thú vị đúng không nào?

Và giờ chúng ta sẽ thực hiện thủ thuật blogger này [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger nhé cả nhà!

Tạo một widget blogger HTML/Javascript và copy đoạn mã code dưới đây vào là Lưu lại

Để thực hiện, hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript và copy đoạn mã code dưới đây vào HTML và Lưu lại.

<div class="container">

<ul class="action-bar clearfix">

<li>

<a href="http://twitter.com/Terocket" class="like">

<span class="zocial-twitter"></span>

<span class="tooltip">Follow</span>

</a>

</li>

<li>

<a href="https://plus.google.com/Terocket" class="favourite">

<span class="zocial-googleplus"></span>

<span class="tooltip">Circle us</span>

</a>

</li>

<li>

<a href="https://www.facebook.com/Terocket" class="comment">

<span class="zocial-facebook"></span>

<span class="tooltip">Like us</span>

</a>

</li>

<li>

<a href="http://www.terocket.com/feeds/posts/default" class="share">

<span class="zocial-rss"></span>

<span class="tooltip">Subscribe</span>

</a>

</li>

</ul>

</div>

<style>

@charset "utf-8";

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */

[class*="zocial-"]:before {

font-family: 'zocial', sans-serif;

}

/* ---------- GENERAL ---------- */

a { text-decoration: none; }

ul {

list-style: none;

margin: 0;

padding: 0;

}

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after {

content: "";

display: table; }

.clearfix:after { clear: both; }

.container {

display: block;

height: 64px;

position: relative;

width: 256px;

}

/* ---------- Action Bar ---------- */

.action-bar li {

float: left;

}

.action-bar a {

-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

color: #e7e7e7;

display: block;

font-size: 32px;

height: 64px;

line-height: 64px;

position: relative;

text-align: center;

-webkit-transition: background .3s;

-moz-transition: background .3s;

-ms-transition: background .3s;

-o-transition: background .3s;

transition: background .3s;

width: 64px;

}

.action-bar a:hover .tooltip {

margin-top: 16px;

opacity: 1;

}

.tooltip {

border-radius: 3px;

font-size: 14px;

height: 28px;

left: 50%;

line-height: 28px;

margin: 0 0 0 -50px;

opacity: 0;

position: absolute;

top: 100%;

-webkit-transition: margin-top .3s, opacity .3s;

-moz-transition: margin-top .3s, opacity .3s;

-ms-transition: margin-top .3s, opacity .3s;

-o-transition: margin-top .3s, opacity .3s;

transition: margin-top .3s, opacity .3s;

width: 100px;

}

.tooltip:before {

content: "";

height: 8px;

left: 50%;

margin: -4px 0 0 -4px;

position: absolute;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

width: 8px;

}

.like,

.like .tooltip,

.like .tooltip:before { background: #65B1F8; }

.like:hover { background: #65B1F8; }

.favourite,

.favourite .tooltip,

.favourite .tooltip:before { background: #c93037; }

.favourite:hover { background: #b02b32; }

.comment,

.comment .tooltip,

.comment .tooltip:before { background: #43438e; }

.comment:hover { background: #393978; }

.share,

.share .tooltip,

.share .tooltip:before { background: #FF8000; }

.share:hover { background: #FF8000; }

</style>

Ghi chú: Bạn cần thay đổi Terocket thành địa chỉ Facebook, Twitter...& www.terocket.com là địa chỉ website bạn nha!

OK, vậy là đã xong thủ thuật blog [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger này rồi. Chỉ cần vài bước đơn giản là đã xong đúng không nào!

Nếu ai đã thành công với thủ thuật blog tạo nút buttons social này rồi thì hãy share đến bạn bè của mình nha, nếu ai chưa làm được, hoặc chưa hiểu chổ nào, hãy gửi ý kiến hỏi đáp dưới đây, Terocket sẽ giải đáp nhá!

Thủ thuật blogspot liên quan đến nút Buttons Social tại Terocket

Trứng Vịt - Terocket

[Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger

Live Demo

Tạo một widget blogger HTML/Javascript và copy đoạn mã code dưới đây vào là Lưu lại

Thủ thuật blogspot liên quan đến nút Buttons Social tại Terocket

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1