Cách tạo nút liên hệ kiểu nổi CỰC CHẤT cho Blogger

Thông thường, nó có hình tròn, màu sắc rực rỡ và như tên gọi, nổi trên tầm nhìn để thu hút sự chú ý của người dùng. Ngoài ra, nó phải có một số loại hoạt ảnh dựa trên các sự kiện tiêu điểm và nhấp chuột để cung cấp cho người dùng phản hồi trực quan.

{tocify} $title={Nội dung bài viết}

Cách tạo nút liên hệ kiểu nổi đa dạng cho Blogger

Đầu tiên, đăng nhập vào Blogger -> Chủ đề -> Chỉnh sửa HTML -> Sau đó thêm mã CSS này trước ~~</head>~~

<style>.social-button-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out;z-index: 999; } .social-button-container.visible { transform: translateX(-10px);z-index: 999; } .social-button { border-radius: 16px;background: -webkit-linear-gradient(to right, #ee0979, #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ee0979, #ff6a00);height: 50px; box-shadow: 0 10px 20px 0 rgba(30,30,30,.07); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px);border: 1px solid #ebeced; } .social-button button.close-btn { border: 0; color: #fff;background: none; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-button button.close-btn:focus { outline: none; } .social-button p { background-color:#fefefe; border-radius: 10px 10px 0px 0px; color: #000; font-size: 12px; line-height: 18px; padding: 2px 17px 0px; position: absolute; bottom: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-button p a { color: #FF7500; text-decoration: none; } .social-button h4 { margin-top: -22px;margin-bottom: 20px; color: #fff; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-button ul { display: flex; list-style-type: none; padding: 0; margin: 0; } button{border:none} .social-button ul li { margin: 0 10px; } .social-button ul li a svg{height: 24px; width: 24px; fill:#fff} .social-button ul li a { border: 1px solid #fff; border-radius: 50%; color: #001F61; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; text-decoration: none; } .social-button ul li a:hover { border: none; box-shadow: 0 9px 12px -9px #FF6A00; } .floating-btn svg{vertical-align: -12px;width: 24px; height: 24px;} .floating-btn { border-radius: 50px; background: -webkit-linear-gradient(to right, #ee0979, #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ee0979, #ff6a00);padding: 6px 8px;color: #fff;right: 20px; cursor: pointer; position: fixed; bottom: 70px; z-index: 999;outline:none } .floating-btn:focus { outline: none; } @media screen and (max-width: 480px) { .social-panel-button.visible { transform: translateX(0px); } .floating-btn { } }</style> {codeBox}

Tiếp theo, thêm mã vào ~~<body>~~

<div class='social-button-container'>
<div class='social-button'>
<p>Created with by
<a href='/' target='_blank'>ReLub.Net</a></p>
<button class='close-btn'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='currentColor'/>
</svg></button>
<h4>Get in touch on</h4>
<ul>
<li>
<a href='https://www.insurancefinances.com/' target='_blank' title='facebook'>
<svg viewBox='0 0 512 512'>
<path d='M288,176v-64c0-17.664,14.336-32,32-32h32V0h-64c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64l32-80H288z'/>
</svg>
</a>
</li>
<li>
<a href='https://www.insurancefinances.com/' target='_blank' title='telegram'>
<svg viewBox='0 0 24 24'><path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/></svg>
</a>
</li>
<li>
<a href='https://www.insurancefinances.com/' target='_blank' title='youtube'>
<svg viewBox='0 0 512 512'>
<path d='M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904 C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728 c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816 c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096 C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z'/>
</svg>
</a>
</li>
<li>
<a href='https://www.insurancefinances.com/' target='_blank' title='instagram'>
<svg fill='#3f729b' viewBox='0 0 512.00096 512.00096'><path d='m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm-117.40625 395.996094c-77.195312 0-139.996094-62.800782-139.996094-139.996094s62.800782-139.996094 139.996094-139.996094 139.996094 62.800782 139.996094 139.996094-62.800782 139.996094-139.996094 139.996094zm143.34375-246.976563c-22.8125 0-41.367188-18.554687-41.367188-41.367187s18.554688-41.371094 41.367188-41.371094 41.371094 18.558594 41.371094 41.371094-18.558594 41.367187-41.371094 41.367187zm0 0'/><path d='m256 146.019531c-60.640625 0-109.980469 49.335938-109.980469 109.980469 0 60.640625 49.339844 109.980469 109.980469 109.980469 60.644531 0 109.980469-49.339844 109.980469-109.980469 0-60.644531-49.335938-109.980469-109.980469-109.980469zm0 0'/><path d='m399.34375 96.300781c-6.257812 0-11.351562 5.09375-11.351562 11.351563 0 6.257812 5.09375 11.351562 11.351562 11.351562 6.261719 0 11.355469-5.089844 11.355469-11.351562 0-6.261719-5.09375-11.351563-11.355469-11.351563zm0 0'/></svg>
</a>
</li>
</ul>
</div>
</div>
<button class='floating-btn'>
<svg viewBox='0 0 24 24'>
<path d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' fill='currentColor'/>
</svg>
</button>
<script>
//<![CDATA[
const floating_btn = document.querySelector('.floating-btn');const close_btn = document.querySelector('.close-btn');const social_panel_container = document.querySelector('.social-button-container');floating_btn.addEventListener('click',() =>{social_panel_container.classList.toggle('visible')}
);close_btn.addEventListener('click',() =>{social_panel_container.classList.remove('visible')}
);//]]>
</script> {codeBox}

Sau khi đã thêm xong bạn có thể điều chỉnh lại liên kết, biểu tượng svg,... để phù hợp với trang của mình.

Tài nguyên SVG tốt nhất cho người viết blog

Bạn có thể tìm các biểu tượng SVG cho trang web của mình tại các liên kết mà tôi cung cấp bên dưới.

SVG icons in Jagodesain docs

feathericons

ionic.io

iconfinder

Ở đây, lưu ý rằng một số mã SVG có kiểu định sẵn trong đó, vì vậy nó có thể khác trong trang web thực tế và bạn phải chỉnh sửa mã SVG theo trang web của mình.

Lời kết

Như vậy, mình đã hướng dẫn xong cách tạo nút liên hệ kiểu nổi đa dạng cho Blogger chỉ với HTML và CSS. Các bạn hãy thực hiện theo thử nhé. Nếu các bạn có thắc mắc về chủ đề này thì có thể để lại bình luận bên dưới, mình sẽ giải đáp cho các bạn sớm nhất có thể. Chúc các bạn thành công.