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.
cellpadding="0"
cellspacing="0"
class="tr-caption-container"
style="margin-left: auto; margin-right: auto;"
>
imageanchor="1"
style="margin-left: auto; margin-right: auto;"
>
data-original-height="1000"
data-original-width="1635"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVzkerd23rF4F3OVnKRWiZR7N3D4PcNq9BS_H06qJ0bYlRCTaRn8t1mWwAnAWNrQK8mXpIoZFD5-5MEltRbuT_3zocmGwTsHIW8ZHU8abfbr_91Y29JM4dRn8KhitfNikC6Q044NwRCw/s16000/social-link.png"
/>
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