Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger
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.
FollowCircle usLike usSubscribe@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; }
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á!
Lượt xem: 60
Nguồn:thcsnguyentriphuong-hoavang.edu.vn Copy link
Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

