How to Create a Join Us Widgets in Blogger


So Let's see how to create it :

For Youtube


<div class="widget-content"> <a class="MrMj discount dis-31" href="https://youtube.com/channel/UCix9SgFgRJfdU09JSo_9hHQ" target="_blank"> <div class="MrMj-content"> <span class="title">Join our YouTube Channel</span> <span class="desc">To Get Latest Video Notification!</span> </div> <div class="MrMj-img"><span><svg height="512pt" viewBox="0 -77 512.00213 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m501.453125 56.09375c-5.902344-21.933594-23.195313-39.222656-45.125-45.128906-40.066406-10.964844-200.332031-10.964844-200.332031-10.964844s-160.261719 0-200.328125 10.546875c-21.507813 5.902344-39.222657 23.617187-45.125 45.546875-10.542969 40.0625-10.542969 123.148438-10.542969 123.148438s0 83.503906 10.542969 123.148437c5.90625 21.929687 23.195312 39.222656 45.128906 45.128906 40.484375 10.964844 200.328125 10.964844 200.328125 10.964844s160.261719 0 200.328125-10.546875c21.933594-5.902344 39.222656-23.195312 45.128906-45.125 10.542969-40.066406 10.542969-123.148438 10.542969-123.148438s.421875-83.507812-10.546875-123.570312zm0 0" fill="#f00"/><path d="m204.96875 256 133.269531-76.757812-133.269531-76.757813zm0 0" fill="#fff"/></svg></span></div> </a> <a href="https://www.techypranav.eu.org" id="hello">Techy Pranav PKD ART</a> <script> document.getElementById("hello").style.visibility = "hidden"; </script> <style> /* Widget Promo Produk */ .MrMj{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} .MrMj .MrMj-img{width:50px;height:50px} .MrMj .MrMj-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} .MrMj .MrMj-content{width:calc(100% - 50px);padding-right:15px} .MrMj .MrMj-content .title{display:block;font-weight:700;font-size:12px;margin:0} .MrMj .MrMj-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050} .MrMj.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} .MrMj.fletro .MrMj-content{width:calc(100% - 100px);padding:15px 10px 15px 15px} .MrMj.fletro .MrMj-img{width:100px;height:auto;flex-shrink:0} .MrMj.fletro .MrMj-img img{position:absolute;bottom:0;right:0;max-width:110px} .MrMj.discount:after{content:'Subscribe';font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:22px;padding-right:10px;background-color:#e61d23;border-radius:80px 0 0 0;color:#fff;position:absolute;bottom:0;right:0} .dark-mode .MrMj{color:#161617} .night-mode .MrMj{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0} .night-mode .penawaran1 .penawaran1-img span{background-color:#003366} </style> </div>


For 
Telegram

<div class="widget-content"> <a class="pranavkd discount dis-31" href="https://t.me/pkdartgroup" target="_blank"> <div class="pranavkd-content"> <span class="title">Join our Telegram Group</span> <span class="desc">To Get Latest Notification!</span> </div> <div class="pranavkd-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> <a href="https://www.techypranav.eu.org" id="hello">Techy Pranav PKD ART</a> <script> document.getElementById("hello").style.visibility = "hidden"; </script> <style> /* Widget Promo Produk */ .pranavkd{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} .pranavkd .pranavkd-img{width:50px;height:50px} .pranavkd .pranavkd-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} .pranavkd .pranavkd-content{width:calc(100% - 50px);padding-right:15px} .pranavkd .pranavkd-content .title{display:block;font-weight:700;font-size:12px;margin:0} .pranavkd .pranavkd-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050} .pranavkd.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} .pranavkd.fletro .pranavkd-content{width:calc(100% - 100px);padding:15px 10px 15px 15px} .pranavkd.fletro .pranavkd-img{width:100px;height:auto;flex-shrink:0} .pranavkd.fletro .pranavkd-img img{position:absolute;bottom:0;right:0;max-width:110px} .pranavkd.discount:after{content:'Join';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:22px;padding-right:10px;background-color:#9bd8fc;border-radius:80px 0 0 0;color:#fff;position:absolute;bottom:0;right:0} .dark-mode .pranavkd{color:#161617} .night-mode .pranavkd{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0} .night-mode .penawaran1 .penawaran1-img span{background-color:#003366} </style> </div>
For

Whatsapp

<div class="widget-content"> <a class="techypranav discount dis-31" href="https://wa.me/message/CBU75G2QR2J6M1" target="_blank"> <div class="techypranav-content"> <span class="desc"><b color="black">If You Are Facing Any Issue !</b></span> <span class="desc">Message Me Any Time</span> </div> <div class="techypranav-img"><span> <svg height="512pt" viewBox="-1 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m10.894531 512c-2.875 0-5.671875-1.136719-7.746093-3.234375-2.734376-2.765625-3.789063-6.78125-2.761719-10.535156l33.285156-121.546875c-20.722656-37.472656-31.648437-79.863282-31.632813-122.894532.058594-139.941406 113.941407-253.789062 253.871094-253.789062 67.871094.0273438 131.644532 26.464844 179.578125 74.433594 47.925781 47.972656 74.308594 111.742187 74.289063 179.558594-.0625 139.945312-113.945313 253.800781-253.867188 253.800781 0 0-.105468 0-.109375 0-40.871093-.015625-81.390625-9.976563-117.46875-28.84375l-124.675781 32.695312c-.914062.238281-1.84375.355469-2.761719.355469zm0 0" fill="#e5e5e5"/><path d="m10.894531 501.105469 34.46875-125.871094c-21.261719-36.839844-32.445312-78.628906-32.429687-121.441406.054687-133.933594 109.046875-242.898438 242.976562-242.898438 64.992188.027344 125.996094 25.324219 171.871094 71.238281 45.871094 45.914063 71.125 106.945313 71.101562 171.855469-.058593 133.929688-109.066406 242.910157-242.972656 242.910157-.007812 0 .003906 0 0 0h-.105468c-40.664063-.015626-80.617188-10.214844-116.105469-29.570313zm134.769531-77.75 7.378907 4.371093c31 18.398438 66.542969 28.128907 102.789062 28.148438h.078125c111.304688 0 201.898438-90.578125 201.945313-201.902344.019531-53.949218-20.964844-104.679687-59.09375-142.839844-38.132813-38.160156-88.832031-59.1875-142.777344-59.210937-111.394531 0-201.984375 90.566406-202.027344 201.886719-.015625 38.148437 10.65625 75.296875 30.875 107.445312l4.804688 7.640625-20.40625 74.5zm0 0" fill="#fff"/><path d="m19.34375 492.625 33.277344-121.519531c-20.53125-35.5625-31.324219-75.910157-31.3125-117.234375.050781-129.296875 105.273437-234.488282 234.558594-234.488282 62.75.027344 121.644531 24.449219 165.921874 68.773438 44.289063 44.324219 68.664063 103.242188 68.640626 165.898438-.054688 129.300781-105.28125 234.503906-234.550782 234.503906-.011718 0 .003906 0 0 0h-.105468c-39.253907-.015625-77.828126-9.867188-112.085938-28.539063zm0 0" fill="#64b161"/><g fill="#fff"><path d="m10.894531 501.105469 34.46875-125.871094c-21.261719-36.839844-32.445312-78.628906-32.429687-121.441406.054687-133.933594 109.046875-242.898438 242.976562-242.898438 64.992188.027344 125.996094 25.324219 171.871094 71.238281 45.871094 45.914063 71.125 106.945313 71.101562 171.855469-.058593 133.929688-109.066406 242.910157-242.972656 242.910157-.007812 0 .003906 0 0 0h-.105468c-40.664063-.015626-80.617188-10.214844-116.105469-29.570313zm134.769531-77.75 7.378907 4.371093c31 18.398438 66.542969 28.128907 102.789062 28.148438h.078125c111.304688 0 201.898438-90.578125 201.945313-201.902344.019531-53.949218-20.964844-104.679687-59.09375-142.839844-38.132813-38.160156-88.832031-59.1875-142.777344-59.210937-111.394531 0-201.984375 90.566406-202.027344 201.886719-.015625 38.148437 10.65625 75.296875 30.875 107.445312l4.804688 7.640625-20.40625 74.5zm0 0"/><path d="m195.183594 152.246094c-4.546875-10.109375-9.335938-10.3125-13.664063-10.488282-3.539062-.152343-7.589843-.144531-11.632812-.144531-4.046875 0-10.625 1.523438-16.1875 7.597657-5.566407 6.074218-21.253907 20.761718-21.253907 50.632812 0 29.875 21.757813 58.738281 24.792969 62.792969 3.035157 4.050781 42 67.308593 103.707031 91.644531 51.285157 20.226562 61.71875 16.203125 72.851563 15.191406 11.132813-1.011718 35.917969-14.6875 40.976563-28.863281 5.0625-14.175781 5.0625-26.324219 3.542968-28.867187-1.519531-2.527344-5.566406-4.046876-11.636718-7.082032-6.070313-3.035156-35.917969-17.726562-41.484376-19.75-5.566406-2.027344-9.613281-3.035156-13.660156 3.042969-4.050781 6.070313-15.675781 19.742187-19.21875 23.789063-3.542968 4.058593-7.085937 4.566406-13.15625 1.527343-6.070312-3.042969-25.625-9.449219-48.820312-30.132812-18.046875-16.089844-30.234375-35.964844-33.777344-42.042969-3.539062-6.070312-.058594-9.070312 2.667969-12.386719 4.910156-5.972656 13.148437-16.710937 15.171875-20.757812 2.023437-4.054688 1.011718-7.597657-.503906-10.636719-1.519532-3.035156-13.320313-33.058594-18.714844-45.066406zm0 0" fill-rule="evenodd"/></g></svg></span></div> </a> <a href="https://www.techypranav.eu.org" id="hello">Techy Pranav PKD ART</a> <script> document.getElementById("hello").style.visibility = "hidden"; </script> <style> /* Widget Promo Produk */ .techypranav{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} .techypranav .techypranav-img{width:50px;height:50px} .techypranav .techypranav-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} .techypranav .techypranav-content{width:calc(100% - 50px);padding-right:15px} .techypranav .techypranav-content .title{display:block;font-weight:700;font-size:12px;margin:0} .techypranav .techypranav-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050} .techypranav.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} .techypranav.fletro .techypranav-content{width:calc(100% - 100px);padding:15px 10px 15px 15px} .techypranav.fletro .techypranav-img{width:100px;height:auto;flex-shrink:0} .techypranav.fletro .techypranav-img img{position:absolute;bottom:0;right:0;max-width:110px} .techypranav.discount:after{content:'Message Me';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:92px;height:22px;padding-right:10px;background-color:#29c0a8;border-radius:80px 0 0 0;color:#fff;position:absolute;bottom:0;right:0} .dark-mode .techypranav{color:#161617} .night-mode .techypranav{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0} .night-mode .penawaran1 .penawaran1-img span{background-color:#003366} </style> </div>



Important Steps :
Change the Number with your WhatsApp Number
you can also change the slogan and title
And Then Save it, its done
Read Also :
Close