New Social Follow widget for Blogger
Hello guys! Welcome to Shiva Technic World in this post I am going to give you a New Social Follow widget code for Blogger. So let's start.
You can add this anywhere on Layout.
YouTube
<div class="widget-content">
<a class="stw discount dis-31" href="https://www.youtube.com/c/ShivaTechnicWorld"target="_blank">
<div class="stw-content">
<span class="title">Subscribe our YouTube Channel</span>
<span class="desc">To Get Latest Video Notification!</span>
</div>
<div class="stw-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>
/* CSS */
.stw{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}
.stw .stw-img{width:50px;height:50px}
.stw .stw-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}
.stw .stw-content{width:calc(100% - 50px);padding-right:15px}
.stw .stw-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.stw .stw-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.stw.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}
.stw.fletro .stw-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.stw.fletro .stw-img{width:100px;height:auto;flex-shrink:0}
.stw.fletro .stw-img img{position:absolute;bottom:0;right:0;max-width:110px}
.stw.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 .stw{color:#161617}
.night-mode .stw{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div><div class="widget-content">
<a class="stw-in discount dis-31" href="https://www.instagram.com/shivatechnicworld" target="_blank">
<div class="stw-in-content">
<span class="title">Follow our Instagram</span>
<span class="desc">Message Me Any Time on Instagram.</span>
</div>
<div class="stw-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>
/* CSS */
.stw-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}
.stw-in .stw-in-img{width:50px;height:50px}
.stw-in .stw-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}
.stw-in .stw-in-content{width:calc(100% - 50px);padding-right:15px}
.stw-in .stw-in-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.stw-in .stw-in-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.stw-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}
.stw-in.fletro .stw-in-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.stw-in.fletro .stw-in-img{width:100px;height:auto;flex-shrink:0}
.stw-in.fletro .stw-in-img img{position:absolute;bottom:0;right:0;max-width:110px}
.stw-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 .stw-in{color:#161617}
.night-mode .stw-in{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div>Telegram
<div class="widget-content">
<a class="stw discount dis-31" href="https://telegram.me/shivatechnicworld"target="_blank">
<div class="stw-content">
<span class="title">Join our Telegram Channel</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="stw-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>
/* CSS */
.stw{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}
.stw .stw-img{width:50px;height:50px}
.stw .stw-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}
.stw .stw-content{width:calc(100% - 50px);padding-right:15px}
.stw .stw-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.stw .stw-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.stw.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}
.stw.fletro .stw-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.stw.fletro .stw-img{width:100px;height:auto;flex-shrink:0}
.stw.fletro .stw-img img{position:absolute;bottom:0;right:0;max-width:110px}
.stw.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 .stw{color:#161617}
.night-mode .stw{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div><div class="widget-content">
<a class="stw-in discount dis-31" href="Your_link" target="_blank">
<div class="stw-in-content">
<span class="title">Join our Telegram channel</span>
<span class="desc">To get latest Information</span>
</div>
<div class="stw-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>
/* CSS */
.stw-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}
.stw-in .stw-in-img{width:50px;height:50px}
.stw-in .stw-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}
.stw-in .stw-in-content{width:calc(100% - 50px);padding-right:15px}
.stw-in .stw-in-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.stw-in .stw-in-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.stw-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}
.stw-in.fletro .stw-in-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.stw-in.fletro .stw-in-img{width:100px;height:auto;flex-shrink:0}
.stw-in.fletro .stw-in-img img{position:absolute;bottom:0;right:0;max-width:110px}
.stw-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 .stw-in{color:#161617}
.night-mode .stw-in{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div>Replace the yellow-marked social media link with your social media link. Hope this post will help you.
Watch tutorial
Join the conversation