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.
 |
| Share Code Tạo Widget Social Media Cho Blogspot |
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ả!
Copyright © Phạm Văn Linh
Thông báo !:
=========
Mình cần bán web và app này. Mọi người cần liên hệ nhé
=========
Nháy đúp liên tục nút [‣] để phát video
Liên hệ QUẢNG CÁO, góp ý, báo lỗi ➤ Tại Đây
=========
Các bạn đang xem truyền hình trực tuyến trên tại ứng dụng TiVi 5G - Trang Xem Tivi online tốt nhất, ổn định nhất, đáp ứng nhiều người truy cập cùng lúc. Xem Share Code Tạo Widget Social Media Cho Blogspot - Tivi Online Share Code Tạo Widget Social Media Cho Blogspot - Xem Share Code Tạo Widget Social Media Cho Blogspot Chất Lượng Cao.
