Hướng Dẫn Tạo Widget Liên Kết Cá Nhân

Hello my friend, chào mừng các bạn đã đến với bài viết tiếp theo của mình. Thực ra là bài này mình có share rồi nhưng do khi chuyển sang template mới mình phát hiện nó bị lỗi nên đã sửa lại và đăng đăng một bài chia sẻ mới.

Share Code Tạo Widget Liên Kết Cá Nhân Cho Blogspot

Nhìn tiêu đề cũng như ảnh ở trên có thể một số bạn đã đoán ra nó là cái gì rồi đúng không, cái này mình có share từ lúc mới bắt đầu làm blog nhưng hồi đó còn non viết bài còn sơ sài mà khi chuyển sang template này bài nó còn bị lỗi nên mình quyết định đăng mới chứ không chỉnh sửa lại bài cũ 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>
    *:focus,*:active{outline:none!important;-webkit-tap-highlight-color:transparent}.wrapper{display:inline-flex}.wrapper .icon{position:relative;background-color:#ffffff;color:#000;border-radius:50%;padding:15px;margin:10px;width:50px;height:50px;font-size:18px;display:flex;justify-content:center;align-items:center;flex-direction:column;box-shadow:0 10px 10px rgba(0,0,0,0.1);cursor:pointer;transition:all 0.2s cubic-bezier(0.68,-0.55,0.265,1.55)}.wrapper .tooltip{position:absolute;top:0;font-size:14px;background-color:#ffffff;color:#ffffff;padding:5px 8px;border-radius:5px;box-shadow:0 10px 10px rgba(0,0,0,0.1);opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55)}.wrapper .tooltip::before{position:absolute;content:"";height:8px;width:8px;background-color:#ffffff;bottom:-3px;left:50%;transform:translate(-50%) rotate(45deg);transition:all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55)}.wrapper .icon:hover .tooltip{top:-45px;opacity:1;visibility:visible;pointer-events:auto}.wrapper .icon:hover span,.wrapper .icon:hover .tooltip{text-shadow:0 -1px 0 rgba(0,0,0,0.1)}.wrapper .facebook:hover,.wrapper .facebook:hover .tooltip,.wrapper .facebook:hover .tooltip::before{background-color:#3b5999;color:#ffffff}.wrapper .twitter:hover,.wrapper .twitter:hover .tooltip,.wrapper .twitter:hover .tooltip::before{background-color:#46c1f6;color:#ffffff}.wrapper .instagram:hover,.wrapper .instagram:hover .tooltip,.wrapper .instagram:hover .tooltip::before{background-color:#e1306c;color:#ffffff}.wrapper .github:hover,.wrapper .github:hover .tooltip,.wrapper .github:hover .tooltip::before{background-color:#333333;color:#ffffff}.wrapper .youtube:hover,.wrapper .youtube:hover .tooltip,.wrapper .youtube:hover .tooltip::before{background-color:#de463b;color:#ffffff}
</style>
<center>
  <div class="wrapper">
    <div class="icon facebook" onclick="window.open('link-facebook')">
      <div class="tooltip">Facebook</div>
      <span><i class="fab fa-facebook-f"></i></span>
    </div>
    <div class="icon twitter" onclick="window.open('link-twitter')">
      <div class="tooltip">Twitter</div>
      <span><i class="fab fa-twitter"></i></span>
    </div>
    <div class="icon instagram" onclick="window.open('link-instagram')">
      <div class="tooltip">Instagram</div>
      <span><i class="fab fa-instagram"></i></span>
    </div>
    <div class="icon github" onclick="window.open('link-github')">
      <div class="tooltip">Github</div>
      <span><i class="fab fa-github"></i></span>
    </div>
    <div class="icon youtube" onclick="window.open('link-youtube')">
      <div class="tooltip">Youtube</div>
      <span><i class="fab fa-youtube"></i></span>
    </div>
  </div>
</center>

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

Vậy là trên đây mình đã chia sẻ đến các bạn cách tạo một widget liên kết cá nhân khá đẹp vào dễ làm. Nếu thấy bài viết hay thì hãy để lại cho mình một comment bên dưới và vote cho mình 5 sao nhé! Hẹn gặp lại các bạn vào các bài viết tiếp theo.