Share Code Tạo Widget Social Media Cho Blogspot

Hướng Dẫn Tạo Widget Social Media

Hế lô các bạn, chào mừng các bạn đã đến với bài viết tiếp theo trong chuyên mục Blogger Tricks. Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn thêm một code tạo widget liên kết cá nhân cực đẹp nữa.

Demo Và Hướng Dẫn

Demo:

Hướng Dẫn:

Cái này cũng dễ thôi, mình đã hướng dẫn một lần rồi nên nói mọi người cũng dễ hiểu thôi.

Bước 1: Vào trang chủ Blogger, chọn Bố cục -> Thêm tiện ích->HTML/JavaScript.

Bước 2: Đặt tên Widget, rồi copy toàn bộ đoạn code dưới đây, thay link cá nhân dán vào phần nội dung.


<style>
    *{box-sizing:border-box}*:focus,*:active{outline:none!important;-webkit-tap-highlight-color:transparent}.wrapper{display:flex;justify-content: center;}.wrapper .icon-container{position:relative;width:50px;height:50px;background-color:#ffffff;color:#121212;display:flex;align-items:center;justify-content:center;margin:0 10px;border-radius:30%;box-shadow:0 5px 15px -5px rgb(0 0 0 / 10%);cursor:pointer;font-size:25px;text-decoration:none;opacity:0.99;overflow:hidden}.wrapper .icon-container::before{content:"";width:120%;height:120%;position:absolute;top:90%;left:-110%;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:all 0.35s;transition-timing-function:cubic-bezier(0.31,-0.105,0.43,1.59);z-index:1}.wrapper .icon-container .icons{-webkit-transform:scale(0.8);transform:scale(0.8);transition:all 0.35s;transition-timing-function:cubic-bezier(0.31,-0.105,0.43,1.59);z-index:2}.wrapper .icon-container.facebook{color:#3b5998}.wrapper .icon-container.twitter{color:#5da9dd}.wrapper .icon-container.youtube{color:#fe0108}.wrapper .icon-container.github{color:#1b1f23}.wrapper .icon-container.linkedin{color:#0077b5}.wrapper .icon-container.telegram{color: #2a9ed7;}.wrapper .icon-container:hover .icons{color:#ffffff;-webkit-transform:scale(1);transform:scale(1)}.wrapper .icon-container:hover::before{top:-10%;left:-10%}.wrapper .icon-container.facebook:hover::before{background-color:#3b5998}.wrapper .icon-container.twitter:hover::before{background-color:#5da9dd}.wrapper .icon-container.youtube:hover::before{background-color:#fe0108}.wrapper .icon-container.github:hover::before{background-color:#1b1f23}.wrapper .icon-container.linkedin:hover::before{background-color:#0077b5}.wrapper .icon-container.telegram:hover::before{background-color: #2a9ed7;}
</style>
<div class="wrapper">
  <a href="link-facebook" target="blank" class="icon-container facebook">
    <i class="icons fab fa-facebook-f"></i>
  </a>
  <a href="link-twitter" target="blank" class="icon-container twitter">
    <i class="icons fab fa-twitter"></i>
  </a>
  <a href="link-youtube" target="blank" class="icon-container youtube">
    <i class="icons fab fa-youtube"></i>
  </a>
  <a href="link-github" target="blank" class="icon-container github">
    <i class="icons fab fa-github"></i>
  </a>
  <a href="link-linkedin" target="blank" class="icon-container linkedin">
    <i class="icons fab fa-linkedin-in"></i>
  </a>
  <a href="link-telegram" target="blank" class="icon-container telegram">
    <i class="icons fab fa-telegram-plane"></i>
  </a>
</div>

Bước 3: Di chuyển Widget đến vị trí mà các bạn mong muốn.
Bước 4: Lưu lại, vậy là xong!

Lời Kết

Trên đây là toàn bộ hướng dẫn của mình về cách tạo widget liên kết cá nhân cực đẹp. Nếu có bất kì thắc mắc gì các bạn có thể comment ở bên dưới cho mình biết nhé! Chúc các bạn một ngày làm việc và học tập hiệu quả!