Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger - Thcs Nguyễn Tri Phương
Scroll To Top
TRANG CHỦ TRANG CHỦ

TRANG CHỦ » WINDOWS » Thủ thuật máy tính » Thủ thuật Blogspot

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

Đăng lúc: Thứ hai - 09/03/2015 13:24 | Người đăng bài viết: Trường THCS Nguyễn Tri Phương | Đã xem: 914 | Phản hồi: 0
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!

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!

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, 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!
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/phavaphu" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/phavaphu" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/phavaphu" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://www.phavaphu.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 phavaphu thành địa chỉ Facebook, Twitter...& www.phavaphu.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á!

Về đầu bài viết

Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

Những tin cũ hơn

 
QUY ĐỊNH THỜI GIAN VÀO LỚP. NĂM HỌC 2015 - 2016
Xem tại đây
Download tại đây
Khó khăn cũng giống như … chiếc máy giặt Nó sẽ quăng ta, vặn ta rồi lại ném ta vòng vòng.

LỊCH CÔNG TÁCღ

THÀNH VIÊNღ

LỊCHღ


BẢN ĐỒ HÀNH CHÍNHღ

THỐNG KÊ TRUY CẬPღ

Đang truy cậpĐang truy cập : 20


Hôm nayHôm nay : 744

Tháng hiện tạiTháng hiện tại : 29083

Tổng lượt truy cậpTổng lượt truy cập : 3393698

THĂM DÒ Ý KIẾNღ

Bạn biết http://thcsnguyentriphuong-hoavang.edu.vn qua:

Bạn bè, người thân

Công cụ tìm kiếm (Cốc Cốc, google, Bing...)

Quảng cáo (tạp chí, băng đĩa,...)

Lựa chọn khác

MỖI LÚC MỘT NỤ CƯỜIღ




Trang web hiển thị tốt nhất với trình duyệt Coccoc, FirefoxGoogle Chrome và cài Flash Player với độ phân giải 1024x768 pixels trở lên!
Website được thiết kế bởi: Phạm Văn Phương - trường thcs Trần Quang Khải
Hỗ trợ thiết bị di động.   Liên hệ kỹ thuật