If you want to do guest posting click here. Guest Post!
Home
Blogger Tips & Tricks

How to Create a Join Us Sidebar Widget in Blogger

How to Create a Join Us Sidebar Widget in Blogger

How to: What are Join US Widgets:

Hello friends, welcome to P S Kathait blog today in this article, we will show you how to make a beautiful and attractive Join Us Sidebar Widget. By the way, you must know what the Join Us Sidebar Widget.

As you can see in the image, the JOIN US Widget is a beautiful and attractive-looking sidebar widget for your Blogger and WordPress websites, with this widget you can present your users to help you or even people you have shared on other social media. You can also subscribe to drop on platforms such as YouTube channels or also invite on groups like Telegram, WhatsApp, and YouTube.

Exclusive for new blog users:

If you are new to blogging or have just created a new website, then you need to connect your article readers to your social media accounts so that they can get you every update through your blog, keep your article readers updated. This will actually go a long way in helping your site get ranked in Google very quickly. And your blog will continue to get good traffic. …

Benefits of joining social media platforms:

Are you torn whether it is necessary to connect your users to our blog from social media platform or any other platform?
So yes, it is important to link all social media platforms to your blog, this will make your blog website top in Google search, and your blog website will get more focus than the first. It also helps you to rank in SEO. So it is really necessary to link all your social media platforms to your blog websites. It also helps you to stream your traffic from one platform to another.

Where and where to use it:

First of all, find a suitable place to use this widget, you can use this widget in sidebar gadgets, in the post, on-page, or on the home page.
We have given you some scripts below, you just have to copy-paste the script given below, and save it, nothing else it is very easy.. Just don't forget to change the link. Below we have colored some lines, you have to replace them with your URL.

If you have any problem in coding, then I have given a video after the end of the article, you can see the video and put the sidebar widget on your blog website.


So Let’s see how to use it :

For YouTube script
 <div class="widget-content">  
 <a class="pskathait discount dis-31" href="https://www.youtube.com/c/pskathait"target="_blank">  
 <div class="pskathait-content">  
 <span class="title">Join our YouTube Channel</span>  
 <span class="desc">To Get Latest Video Notification!</span>  
 </div>  
 <div class="pskathait-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>  
 <style>  
 /* Widget Promo Produk */  
 .pskathait{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}  
 .pskathait .pskathait-img{width:50px;height:50px}  
 .pskathait .pskathait-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}  
 .pskathait .pskathait-content{width:calc(100% - 50px);padding-right:15px}  
 .pskathait .pskathait-content .title{display:block;font-weight:700;font-size:12px;margin:0}  
 .pskathait .pskathait-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}  
 .pskathait.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}  
 .pskathait.fletro .pskathait-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}  
 .pskathait.fletro .pskathait-img{width:100px;height:auto;flex-shrink:0}  
 .pskathait.fletro .pskathait-img img{position:absolute;bottom:0;right:0;max-width:110px}  
 .pskathait.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 .pskathait{color:#161617}  
 .night-mode .pskathait{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}  
 .night-mode .penawaran1 .penawaran1-img span{background-color:#003366}  
 </style>  
 </div>
Please note important steps:
  • Change the link with your YouTube channel
  • You can also change the typed word and title
  • and then save it, it's done
For Telegram script
 <div class="widget-content">  
 <a class="pskathait discount dis-31" href="https://t.me/pskathait_In"target="_blank">  
 <div class="pskathait-content">  
 <span class="title">Join our Telegram Channel</span>  
 <span class="desc">To Get Latest Notification!</span>  
 </div>  
 <div class="pskathait-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>  
 <style>  
 /* Widget Promo Produk */  
 .pskathait{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}  
 .pskathait .pskathait-img{width:50px;height:50px}  
 .pskathait .pskathait-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}  
 .pskathait .pskathait-content{width:calc(100% - 50px);padding-right:15px}  
 .pskathait .pskathait-content .title{display:block;font-weight:700;font-size:12px;margin:0}  
 .pskathait .pskathait-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}  
 .pskathait.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}  
 .pskathait.fletro .pskathait-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}  
 .pskathait.fletro .pskathait-img{width:100px;height:auto;flex-shrink:0}  
 .pskathait.fletro .pskathait-img img{position:absolute;bottom:0;right:0;max-width:110px}  
 .pskathait.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 .pskathait{color:#161617}  
 .night-mode .pskathait{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}  
 .night-mode .penawaran1 .penawaran1-img span{background-color:#003366}  
 </style>  
 </div>
Please note important steps:
  • Change the link with your Telegram channel or group
  • You can also change the typed word and title
  • and then save it, it's done
For Instagram script
 <div class="widget-content">  
 <a class="pskathait-in discount dis-31" href="https://www.instagram.com/pskathait" target="_blank">  
 <div class="pskathait-in-content">  
 <span class="title">If You Are Facing Any Issue !</span>  
 <span class="desc">Message Me Any Time on Insta.</span>  
 </div>  
 <div class="pskathait-in-img"><span>  
 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16"><lineargradient id="a" x1="1.464" x2="14.536" y1="14.536" y2="1.464" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#FFC107"/><stop offset=".507" stop-color="#F44336"/><stop offset=".99" stop-color="#9C27B0"/></stop></stop></stop></lineargradient><path fill="url(#a)" d="M11 0H5a5 5 0 0 0-5 5v6a5 5 0 0 0 5 5h6a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zm3.5 11c0 1.93-1.57 3.5-3.5 3.5H5c-1.93 0-3.5-1.57-3.5-3.5V5c0-1.93 1.57-3.5 3.5-3.5h6c1.93 0 3.5 1.57 3.5 3.5v6z"/><lineargradient id="b" x1="5.172" x2="10.828" y1="10.828" y2="5.172" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#FFC107"/><stop offset=".507" stop-color="#F44336"/><stop offset=".99" stop-color="#9C27B0"/></stop></stop></stop></lineargradient><path fill="url(#b)" d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6.5A2.503 2.503 0 0 1 5.5 8c0-1.379 1.122-2.5 2.5-2.5s2.5 1.121 2.5 2.5c0 1.378-1.122 2.5-2.5 2.5z"/><lineargradient id="c" x1="11.923" x2="12.677" y1="4.077" y2="3.323" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#FFC107"/><stop offset=".507" stop-color="#F44336"/><stop offset=".99" stop-color="#9C27B0"/></stop></stop></stop></lineargradient><circle cx="12.3" cy="3.7" r=".533" fill="url(#c)"/></circle></path></path></svg></span></div>  
 </a>  
 <style>  
 /* Widget Promo Produk */  
 .pskathait-in{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}  
 .pskathait-in .pskathait-in-img{width:50px;height:50px}  
 .pskathait-in .pskathait-in-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}  
 .pskathait-in .pskathait-in-content{width:calc(100% - 50px);padding-right:15px}  
 .pskathait-in .pskathait-in-content .title{display:block;font-weight:700;font-size:12px;margin:0}  
 .pskathait-in .pskathait-in-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}  
 .pskathait-in.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}  
 .pskathait-in.fletro .pskathait-in-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}  
 .pskathait-in.fletro .pskathait-in-img{width:100px;height:auto;flex-shrink:0}  
 .pskathait-in.fletro .pskathait-in-img img{position:absolute;bottom:0;right:0;max-width:110px}  
 .pskathait-in.discount:after{content:'Follow 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:#fb3958;border-radius:80px 0 0 0;color:#fff;position:absolute;bottom:0;right:0}  
 .dark-mode .pskathait-in{color:#161617}  
 .night-mode .pskathait-in{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}  
 .night-mode .penawaran1 .penawaran1-img span{background-color:#003366}  
 </style>  
 </div>
Please note important steps:
  • Change the link with your Instagram channel or group
  • You can also change the typed word and title
  • and then save it, it's done
For Whatsaap script
 <div class="widget-content">  
 <a class="pskathait-in discount dis-31" href="https://wa.me/91xxxxxxxxxx" target="_blank">  
 <div class="pskathait-in-content">  
 <span class="title">If You Are Facing Any Issue !</span>  
 <span class="desc">Message Me Any Time</span>  
 </div>  
 <div class="pskathait-in-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>  
 <style>  
 /* Widget Promo Produk */  
 .pskathait-in{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}  
 .pskathait-in .pskathait-in-img{width:50px;height:50px}  
 .pskathait-in .pskathait-in-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}  
 .pskathait-in .pskathait-in-content{width:calc(100% - 50px);padding-right:15px}  
 .pskathait-in .pskathait-in-content .title{display:block;font-weight:700;font-size:12px;margin:0}  
 .pskathait-in .pskathait-in-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}  
 .pskathait-in.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}  
 .pskathait-in.fletro .pskathait-in-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}  
 .pskathait-in.fletro .pskathait-in-img{width:100px;height:auto;flex-shrink:0}  
 .pskathait-in.fletro .pskathait-in-img img{position:absolute;bottom:0;right:0;max-width:110px}  
 .pskathait-in.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 .pskathait-in{color:#161617}  
 .night-mode .pskathait-in{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}  
 .night-mode .penawaran1 .penawaran1-img span{background-color:#003366}  
 </style>  
 </div>
Please note important steps:
  • change number with your WhatsApp number
  • You can also change the typed word and title
  • and then save it, it's done

Join Us Creating a sidebar widget is really easy. But if you face any problem then you can contact me through the contact form.

Have a Great Day!



Post a Comment