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

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

Hi tất cả các bạn hôm nay mình thấy cái tool bar Telegram Youtube khá hay nên mình quyết định share cho các bạn luôn.

Cách để sử dụng tool bar

Bước 1: Đăng nhập vào Blogger ➤ Bố cục ➤ Thêm tiện ích HTML/JAVASCRIPT.

Bước 2: Sao chép toàn bộ Source dưới đây và đặt tiêu đề cho bố cục.

Bước 3: Nếu bạn muốn thay đổi icon thì có thể lên google tìm SVG 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

Trêm đây là toàn bộ cách thêm tool bar liên hệ Telegram và Youtube mà mình đã chia sẻ. Nếu có vấn đề về khiếu nại hay bản quyền vui lòng comment xuống dưới, chúc các bạn một ngày làm việc hiệu quả.

Copyright © Nguyễn Phong Pro