Cách thêm tool bar liên hệ Telegram Youtube cho Blogger



Cách thêm tool bar liên hệ Telegram Youtube

Hello xin chào tất cả các bạn, đi lướt dạo thấy tool bar này hay hữu ích nên mình viết bài này chia sẻ cách thêm tool bar liên hệ Telegram, Youtube cho mọi người luôn.

Cách để sử dụng Tool Bar này

  • Đăng nhập vào Blogger chuyển đến phần bố cục và thêm tiện ích HTML
  • Sao chép toàn bộ source code ở dưới đây và đặt tiêu đề
  • Nếu bạn muốn thay đổi icon mạng xã hội, bạn có thể lên google để tìm SVG rồi gắn vào nhé.

Source Youtube

<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">

<a class="penawaran2 discount dis-31" href="https://www.youtube.com/channel/UC_cvqGCoG762dH480wi9dQA" target="_blank">
<div class="penawaran2-content">
<span class="title">Join our Youtube Channel</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="penawaran2-img"><span><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewbox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M501.299,132.766c-5.888,-22.03 -23.234,-39.377 -45.264,-45.264c-39.932,-10.701 -200.037,-10.701 -200.037,-10.701c0,0 -160.105,0 -200.038,10.701c-22.025,5.887 -39.376,23.234 -45.264,45.264c-10.696,39.928 -10.696,123.236 -10.696,123.236c0,0 0,83.308 10.696,123.232c5.888,22.03 23.239,39.381 45.264,45.268c39.933,10.697 200.038,10.697 200.038,10.697c0,0 160.105,0 200.037,-10.697c22.03,-5.887 39.376,-23.238 45.264,-45.268c10.701,-39.924 10.701,-123.232 10.701,-123.232c0,0 0,-83.308 -10.701,-123.236Z" style="fill:#ed1f24;fill-rule:nonzero;"/><path d="M204.796,332.803l133.018,-76.801l-133.018,-76.801l0,153.602Z" style="fill:#fff;fill-rule:nonzero;"/></path></path></g></svg></span></div>
</a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran2{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:6px;color:#161617;overflow:hidden}
.penawaran2 .penawaran2-img{width:50px;height:50px}
.penawaran2 .penawaran2-img span{display:flex;align-items:center;justify-content:center;height:100%;background-color:#ebeced;border-radius:8px;color:#505050;font-weight:700;font-size:28px}
.penawaran2 .penawaran2-content{width:calc(100% - 50px);padding-right:15px}
.penawaran2 .penawaran2-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran2 .penawaran2-content .desc{display:block;font-size:11px;margin-top:9px;color:#505050}
.penawaran2.fletro{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.penawaran2.fletro .penawaran2-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran2.fletro .penawaran2-img{width:100px;height:auto;flex-shrink:0}
.penawaran2.fletro .penawaran2-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran2.discount:after{content:'Join';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:25px;padding-right:10px;background-color:#000000;border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran2{color:#161617}
.night-mode .penawaran2{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran2 .penawaran2-img span{background-color:#003366}
</style>
</div>
</div>

Source Telegram

<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">

<a class="penawaran2 discount dis-31" href="https://t.me/quanglinhblog" target="_blank">
<div class="penawaran2-content">
<span class="title">Join our Telegram Channel</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="penawaran2-img"><span><svg enable-background="new 0 0 24 24" height="512" viewbox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z" fill="#039be5"></path></svg></span></div>
</a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran2{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:6px;color:#161617;overflow:hidden}
.penawaran2 .penawaran2-img{width:50px;height:50px}
.penawaran2 .penawaran2-img span{display:flex;align-items:center;justify-content:center;height:100%;background-color:#ebeced;border-radius:8px;color:#505050;font-weight:700;font-size:28px}
.penawaran2 .penawaran2-content{width:calc(100% - 50px);padding-right:15px}
.penawaran2 .penawaran2-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran2 .penawaran2-content .desc{display:block;font-size:11px;margin-top:9px;color:#505050}
.penawaran2.fletro{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.penawaran2.fletro .penawaran2-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran2.fletro .penawaran2-img{width:100px;height:auto;flex-shrink:0}
.penawaran2.fletro .penawaran2-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran2.discount:after{content:'Join';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:25px;padding-right:10px;background-color:#000000;border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran2{color:#161617}
.night-mode .penawaran2{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran2 .penawaran2-img span{background-color:#003366}
</style>
</div>
</div>

Lời kết

Rất đơn giản và dễ làm đúng không ạ, nếu các bạn có thắc mắc hay khiếu nại bản quyền, vui lòng comment xuống phía dưới cho mình biết nhé. Chúc các bạn có một ngày làm việc thật là hiệu quả.

Copyright © Quang Linh Chia Sẻ

6 Comments

Add a Comment

Your email address will not be published. Required fields are marked *