Hi friends welcome to AS Themes World, today we are going to create social media widget of Telegram, YouTube and WhatsApp for blogger. The above image is the preview of the amazing 'Social Media Widget'.
Social media Widget is important because it allows you to reach to your target audience. When a business can use social media to connect with its audience, it can use social media to generate traffic, brand awareness, leads, sales, and many more.
Now follow the steps to create a widget of YouTube, WhatsApp, and Telegram for Blogger.
Telegram Widget
<!--Telegram Widget-->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran2 discount dis-31" href="https://telegram.me/freeblogger_templates" 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:3px;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:2px;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 Now';
font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;
width:75px;height:20px;
padding-right:10px;background-color:#29c1fd;
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>
- Change the link with your Telegram channel or group that we've marked.
- You can also change the sentence to your liking by changing the sentence 'Join Our Telegram Channel' and 'To Get Latest Notifications! ' and others that we've marked.
- You can also customize the corner text by changing the 'Join Now'. And also you can change the width, height and color of the corner text that we've marked.
YouTube Widget
<!--YouTube Widget-->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran1 discount dis-31" href="https://www.youtube.com/c/AbhiGraphicss" target="_blank">
<div class="penawaran1-content">
<span class="title">Subcribe To Our YOUTUBE Channel</span>
<span class="desc">To Get Video Tutorials!</span>
</div>
<div class="penawaran1-img"><span><!doctype svg public '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><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>
</!doctype></span></div></a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran1{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:3px;color:#161617;overflow:hidden}
.penawaran1 .penawaran1-img{width:50px;height:50px}
.penawaran1 .penawaran1-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}
.penawaran1 .penawaran1-content{width:calc(100% - 50px);padding-right:15px}
.penawaran1 .penawaran1-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran1 .penawaran1-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran1.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}
.penawaran1.fletro .penawaran1-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran1.fletro .penawaran1-img{width:100px;height:auto;flex-shrink:0}
.penawaran1.fletro .penawaran1-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran1.discount:after{content:'Subcribe';font-weight:700;font-size:12px;display:flex;align-items:center;
justify-content:flex-end;width:70px;height:23px;padding-right:10px;background-color:#fd2929;
border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran1{color:#161617}
.night-mode .penawaran1{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div>
</div>
- Change the link with your YouTube Channel that we've marked.
- You can also change the sentence to your liking by changing the sentence 'Subscribe To Our YOUTUBE Channel' and 'To Get Video Tutorials ! ' and others that we've marked.
- You can also customize the corner text by changing the 'Subscribe'. And also you can change the width, height and color of the corner text that we've marked.
WhatsApp Widget
<!--Whatsapp Widget-->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran3 discount dis-31" href="https://wa.me/919166850937" target="_blank">
<div class="penawaran3-content">
<span class="title">For Any Help Message on WhatsApp</span>
<span class="desc">We will reply in few minutes...</span>
</div>
<div class="penawaran3-img"><span><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31_3-whatsapp"><g><g><path d="M256.063,16.75h-0.125C124.379,16.75,17.397,124.051,17.397,256 c0,52.336,16.819,100.848,45.422,140.232l-29.732,88.873l91.716-29.394c37.725,25.063,82.731,39.538,131.26,39.538 c131.559,0,238.541-107.335,238.541-239.25C494.604,124.083,387.621,16.75,256.063,16.75L256.063,16.75z M256.063,16.75" style="fill:#5ACF5F;"/><path d="M394.896,354.596c-5.758,16.304-28.604,29.817-46.824,33.771 c-12.473,2.657-28.754,4.785-83.568-18.006c-70.125-29.127-115.28-100.575-118.795-105.21 c-3.375-4.637-28.336-37.827-28.336-72.165c0-34.331,17.386-51.052,24.398-58.223c5.751-5.897,15.267-8.583,24.394-8.583 c2.954,0,5.606,0.146,7.997,0.267c7.008,0.302,10.524,0.717,15.151,11.813c5.756,13.909,19.77,48.239,21.445,51.771 c1.701,3.53,3.396,8.311,1.012,12.945c-2.24,4.788-4.205,6.91-7.725,10.975c-3.521,4.073-6.865,7.182-10.381,11.544 c-3.219,3.798-6.859,7.867-2.801,14.896c4.055,6.879,18.07,29.812,38.707,48.235c26.641,23.775,48.229,31.372,55.957,34.604 c5.756,2.395,12.615,1.822,16.816-2.663c5.34-5.774,11.938-15.342,18.645-24.759c4.771-6.76,10.795-7.599,17.119-5.208 c6.441,2.244,40.531,19.143,47.541,22.641c7.006,3.529,11.635,5.203,13.334,8.165 C400.652,324.361,400.652,338.271,394.896,354.596L394.896,354.596z M394.896,354.596" style="fill:#FCFCFC;"/></g></g></g><g id="Layer_1"/></svg></span></div>
</a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran3{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:3px;color:#161617;overflow:hidden}
.penawaran3 .penawaran3-img{width:50px;height:50px}
.penawaran3 .penawaran3-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}
.penawaran3 .penawaran3-content{width:calc(100% - 50px);padding-right:15px}
.penawaran3 .penawaran3-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran3 .penawaran3-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran3.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}
.penawaran3.fletro .penawaran3-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran3.fletro .penawaran3-img{width:100px;height:auto;flex-shrink:0}
.penawaran3.fletro .penawaran3-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran3.discount:after{content:'Message';
font-weight:700;font-size:12px;display:flex;align-items:center;
justify-content:flex-end;width:75px;height:20px;padding-right:10px;
background-color:#25D366;border-radius:80px 0 0 0;
color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran3{color:#161617}
.night-mode .penawaran3{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran3 .penawaran3-img span{background-color:#003366}
</style>
</div>
</div>
- Change the whatsapp no with your WhatsApp number that we've marked.
- You can also change the sentence to your liking by changing the sentence 'For Any Help Message on WhatsApp' and 'We will reply in few minutes... ' and others that we've marked.
- You can also customize the corner text by changing the 'Message'. And also you can change the width, height and color of the corner text that we've marked.
At this point, your social media widget has been completely created, if you follow all the steps correctly we can guarantee that the social media is working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.
This is the first part of social media widget. In the next part we will create widget for Instagram, Messanger and Twitter. If you want a widget other than these social media, then put your widget name in the comment box I will make post on that widget codes.
So stay tuned and join our telegram channel to get notifications.