Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | How to add Telegram Youtube contact tool bar for Blogger

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Hello everyone, I was browsing around and found this tool bar useful, so I wrote this article to share how to add Telegram, Youtube contact tool bar for everyone.


how-to-add-telegram-youtube-contact-tool-bar-for-blogger





How to use this Tool Bar


  • Login to Blogger go to layout section and add HTML widget
  • Copy the entire source code below and title it
  • If you want to change the social network icon, you can google to find SVG and then attach it.


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>

Epilogue


Very simple and easy to do right, if you have any questions or complaints about copyright, please comment below to let me know. Hope you have a very productive day.
Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.