• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
No Result
View All Result
Đoàn Hải Blog - Kiến Thức Đó Đây
No Result
View All Result

Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot

admin by admin
Tháng Chín 15, 2021
Home Blogspot Thủ Thuật Blogspot
Social Icons là những công cụ giúp chuyển hướng người đọc sang một trang mạng xã hội như facebook, google+,…của bạn. Với Social Icons vừa tăng tính chuyên nghiệp cho Blog của bạn vừa tăng Traffic giúp người đọc tiếp cận hơn với các bạn !
Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot
Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot
Hôm nay đây mình sẽ chia sẻ cho các bạn bộ Social Icons với các hiệu ứng khác nhau cho các bạn thoải mái lựa chọn !!
Mình tóm gọn Code cũng như CSS vào một phần để các bạn dễ thêm nhé !

Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot

<section class="s1">
      <a href="#" class="iconbtn fab fa-facebook-square"></a>
      <a href="#" class="iconbtn fab fa-google-plus"></a>
      <a href="#" class="iconbtn fab fa-twitter-square"></a>
      <a href="#" class="iconbtn fab fa-instagram"></a>
    </section>
    <section class="s2">
      <a href="#" class="iconbtn fab fa-facebook-square"></a>
      <a href="#" class="iconbtn fab fa-google-plus"></a>
      <a href="#" class="iconbtn fab fa-twitter-square"></a>
      <a href="#" class="iconbtn fab fa-instagram"></a>
    </section>
    <section class="s3">
      <a href="#" class="iconbtn fab fa-facebook-square"></a>
      <a href="#" class="iconbtn fab fa-google-plus"></a>
      <a href="#" class="iconbtn fab fa-twitter-square"></a>
      <a href="#" class="iconbtn fab fa-instagram"></a>
    </section>
    <section class="s4">
      <a href="#" class="iconbtn fab fa-facebook-square"></a>
      <a href="#" class="iconbtn fab fa-google-plus"></a>
      <a href="#" class="iconbtn fab fa-twitter-square"></a>
      <a href="#" class="iconbtn fab fa-instagram"></a>
    </section>
<style>
section{
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.s1{
  background: #3498db;
}
.s2{
  background: #e74c3c;
}
.s3{
  background: #2ecc71;
}
.s4{
  background: #34495e;
}
.iconbtn{
  width: 80px;
  height: 80px;
  text-decoration: none;
  margin: 20px;
  position: relative;
  font-size: 30px;
  border-radius: 50%;
}
.iconbtn::before{
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.iconbtn::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 0;
}
.s1 .iconbtn,.s2 .iconbtn{
  color: #fff;
}
.s1 .iconbtn::after{
  border: 4px dashed;
}
.s1 .iconbtn:hover::after{
  animation: ro 7s linear infinite;
}

.s2 .iconbtn{
  border: 4px solid;
}
.s2 .iconbtn:hover{
  animation: ro 2s linear infinite;
}

.s3 .iconbtn{
  border: 4px solid #fff;
  color: #2ecc71;
}
.s3 .iconbtn::after{
  background: #fff;
  transition: 0.2s;
}
.s3 .iconbtn:hover::after{
  transform: scale(.9);
}

.s4 .iconbtn{
  border: 4px solid #fff;
  color: #34495e;
}
.s4 .iconbtn::after{
  background: #fff;
  transition: 0.4s;
}
.s4 .iconbtn:hover::after{
  transform: scale(1.3);
  opacity: 0;
}
.s4 .iconbtn:hover{
  color: #fff;
}
@keyframes ro {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>

Code trên là với 4 loại hiệu ứng nhé!
Thắc mắc hãy Comment để mình hỗ trợ nhé! Chúc các bạn thành công !!

Đánh giá bài viết
[Total: 1 Average: 5]

Bài viết liên quan:

  1. Hướng dẫn thêm Google Analytics vào Blogger 2022
  2. Chèn bài viết liên quan vào giữa bài viết blogspot
  3. Tạo Khung Chứa Code Cho Blogspot Đẹp Với Highlight Js
  4. How to Create a Blogger Account?
  5. Customizable Related Posts Widget for Blogger
Tags: Social Icons
admin

admin

Next Post
Cách thêm thanh Mục Lục trong Blogger 2022

Cách thêm thanh Mục Lục trong Blogger 2022

Cài Facebook Messenger Live Chat vào Blogger

Cài Facebook Messenger Live Chat vào Blogger

Thêm tiện ích Google Translate vào Blogspot đơn giản

Thêm tiện ích Google Translate vào Blogspot đơn giản

Subscribe
Login
Notify of
guest
guest
0 Comments
Inline Feedbacks
Xem tất cả các bình luận

Chứng chỉ SSL là gì? • Kiến nghêu

Cách tạo các biến thể sản phẩm trong WordPress

Cách thêm tawk.to vào trang web wordpress

Cách gắn Pixel Facebook trên trang web WordPress của bạn một cách dễ dàng

CÁCH SỬ DỤNG WIDGET TRONG WORDPRESS

Hướng dẫn quản lý thành viên trên website wordpress

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply