Tạo khung liên hệ hiệu ứng pulse độc đáo cho blogspot

Đối với mỗi blog/website, việc người đọc có thể gửi thắc mắc hay góp ý đến tác giả blog đó là điều vô cùng quan trọng. Nhưng nhiều khi việc để địa chỉ liên hệ ở đâu đó sẽ làm khó khăn trong việc tìm kiếm, chính vì vậy hôm nay mình sẽ chia sẻ cho các bạn một khung tích hợp nút đến trang liên hệ cũng như gửi thẳng tin nhắn qua mail. Sau đây hãy cùng mình tìm hiểu bài thủ thuật này nhé.

Tạo khung liên hệ hiệu ứng pulse độc đáo cho blogspot

Các bước thực hiện

Bước 1: Truy cập quản trị blogger (blogger.com) - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn thư viện Font Awesome (v4.7) trước thẻ
</head>
(nếu có sẵn thư viện này rồi thì bỏ qua bước này)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
Bước 3: Dán đoạn CSS dưới đây trước
]]></b:skin>
@-webkit-keyframes pulse{ 0%{ -webkit-transform:scale(1); transform:scale(1) } 50%{ -webkit-transform:scale(1.1); transform:scale(1.1) } 100%{ -webkit-transform:scale(1); transform:scale(1) } } @keyframes pulse{ 0%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } 50%{ -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1) } 100%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } } .pulse{ -webkit-animation-name:pulse; animation-name:pulse } .phucuong-fixbot { width: 100%; position: fixed; bottom: 0; background: rgba(35,44,59,1); z-index: 8000; left: 0; } .pc-link { position: relative; padding: 8px 15px; text-decoration: none; -webkit-transition: all .4s ease; transition: all .4s ease; color: #fff; font-weight: bold; display: inline-block; font-family: 'Roboto',sans-serif,Arial; } .pc-contact { background: #008638; display: inline-block; text-shadow: 1px 1px 2px rgba(0,0,0,.3); left: 50px; } .pc-contact:before { content: ""; display: block; position: absolute; top: -13%; left: -2%; border: 1px solid #008638; width: 104%; height: 250%; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .pc-contact:after { content: ""; background-color: rgba(21,255,101,.21); opacity: .75!important; display: block; position: absolute; top: -21%; left: -5%; width: 110%; height: 120%; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; z-index: -1; } .pc-contact:hover { background: rgba(0,0,0,.7); } .pc-info { margin-left: 6%; font-weight: normal; } .pc-info:hover { color: #008638; } .pc-info i { padding-right: 8px; }
Bước 4: Dán đoạn HTML hiển thị khung liên hệ trước thẻ
</body>
<div class="phucuong-fixbot"> <a href="https://www.phucuongblogger.com/p/contact.html" class="pc-link pc-contact">Gửi tin nhắn</a> <a href="mailto:phucuongblog@gmail.com" class="pc-link pc-info" rel="nofollow" target="_blank"><i class="fa fa-envelope"></i>phucuongblog@gmail.com</a> </div>

Thay:

  • https://www.phucuongblogger.com/p/contact.html thành địa chỉ trang liên hệ của bạn
  • mailto:phucuongblog@gmail.com thành địa chỉ mail của bạn
Bước 5: Lưu Template lại.

Lời kết

Trên đây là toàn bộ hướng dẫn để làm 1 khung liên hệ hiệu ứng pulse độc đáo cho blogspot rồi đấy. Chỉ cần vài dòng CSS đơn giản chúng ta đã có những tiện ích chuyên nghiệp hơn rồi, với sự sáng tạo của bạn thì hoàn toàn có thể khai thác sâu code để phát triển lên những cái mới mẻ hơn. Chúc các bạn thành công.
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    35 nhận xét:

    1. cái khung cmt huyền thoại giờ vẫn chưa có time nâng cấp :v

      Trả lờiXóa
      Trả lời
      1. A update nó cứ bị lỗi ý :v chưa rõ cách fix nên a keme nó rồi e :))

        Xóa
      2. vậy thì a cần phải tận dụng nó. cái này được cái là tùy biến vô tư. blog a chắc áp dụng được cái này nè :v

        Xóa
      3. À cái này trước a thử áp dụng 1 lần rồi xong a xóa đi đó chứ. Giờ để như này cũng đc rồi e. Mà code bên e dùng js màu rồi à?

        Xóa
      4. vâng ạ :v cho đẹp :v e thấy cũng dễ nhìn nữa

        Xóa
      5. Theme em dùng khi nâng cấp nó cũng bị lỗi anh ạ không biết cách sửa :))

        Xóa
      6. A cũng thế, nó cứ kiểu gì ấy nên a kệ nó rồi :v

        Xóa
    2. Chờ
      uất
      chuất
      sắc
      CHUẤT lắm anh ạ :))))))))))

      Trả lờiXóa
    3. Thanks 2 đứa nha hihi. Ủng hộ a nhiều nhé.

      Trả lờiXóa
    4. Cường giỏi quá nên có vẻ một số đồng chí gato nhỉ :))))

      Trả lờiXóa
      Trả lời
      1. Giỏi gì đâu a, phải gọi là mới vào nghề nhưng đã kiếm miếng cơm tranh vs các bạn ý nên các bạn ý cư xử thế thôi. Rảnh mai e kể cho a nghe, a k tin vào mắt mình ai làm chuyện này đâu :D

        Xóa
      2. Đa số gây với Cường toàn nít ranh, làm đồ án cũng ko xong vs chúng nó,đau đầu nhức óc :v

        Xóa
      3. Khổ lắm ấy chứ :(

        Xóa
    5. Trả lời
      1. Lâu này chưa qua blog ae đc, sr e nhé. 6 tuần nữa xong đồ án a sẽ come back.

        Xóa
    6. templ này load nhanh vs mượt a nhỉ :D

      Trả lờiXóa
      Trả lời
      1. Ừ cả lượng truy cập nhiều hơn hẳn ấy e :3

        Xóa
    7. a Cường lâu lâu ra bài :v toàn ra bài pro thế này ai mà chịu nổi đc :v

      Trả lờiXóa
      Trả lời
      1. Lâu quá a còn chưa ghé blog e đấy, để rảnh a ghé tổng thể lại. Chất đâu e, toàn CSS cả HTML thôi, cốt cho mn học là chính ấy mà.

        Xóa
    8. Trả lời
      1. Thanks ô :D Dạo này t share mấy cái chỉ có css vs html cho mn còn học đc 1 xíu code :3

        Xóa
    9. Đẹp + hợp với nhiều blog lắm anh!

      Trả lờiXóa
    10. Hãy like cho Cường vì điều này, sắp tới em có giải phải xuống Hà Nội, ko biết có gặp đc Cường ko nhỉ

      Trả lờiXóa
      Trả lời
      1. E xuống Hà Nội làm gì đấy? Mà a cường nhé, gọi mỗi Cường là bất lịch sự nha.

        Xóa
    11. Khoái nhất mấy cái css dạng keyframe của ô share,hơi bị bắt mắt :v

      Trả lờiXóa
    12. Tui cũng đang xây dựng temp này nè, mà tui nghĩ ông nên font chữ nào khác đi, cảm giác nhìn font chữ nó cứng cứng sao ý.

      Trả lờiXóa
      Trả lời
      1. Đa phần ngta vẫn dùng Roboto mà ô, có gì cứng đâu, t thấy bt mà.

        Xóa

    Nhận bài viết mới