Top 5 Social Media Icons Widget Html Code - Add Social Icons widget to Blogger
Bloggers use social media to inform and entertain their readers. However, many blogs lack social media presence. This makes it difficult for people to directly communicate with a blog. Responsive design allows users to access a blog from any device, whereas social media icons allow readers to interact with the blog directly. By incorporating social media functionality into your blog, you'll build loyal readers and promote your content.
Top 5 Stylish Social Media Icon Html Code
Social media icon Widget for bloggers is an image or set of images that appear on social networking websites such as Facebook and Twitter. A responsive design is a web design method that adapts itself to different device sizes. In other words, a responsive design
Just Double Tap To Copy The HTML Code.
the method allows websites to change their display based on the user's device. Bloggers can also use responsive designs when creating their own websites. This allows them to easily update their content and interact with new audiences.
Top 5 Social Media Icon Names
- Telegram Group Or Channel Join Icon Html Code Widget
- Youtube Subscribe Icon Html Code
- Twitter Icon Widget Html Code For Bloggers
- Facebook icon Widget Html Code For Blogger
- Instagram Follow Icon Html Code
Telegram Join Icon Widget For Blogger
Telegram icon HTML Preview and widget Code Double tap to copy and paste in your blogger widget and see the magic
<div class="widget-content">
<a class="scW tg" data-text="Join" href="https://telegram.im/@FreeElements4u" target="_blank">
<div class="scC">
<span>Join our Telegram channel</span>
<span>@freeelements</span>
</div>
<div class="scI">
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z"></path></g></svg>
</div>
</a>
<style>
/* Sidebar Social */
.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background:var(--contentB);padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden}
.widget-content .scW:not(:first-child){margin-top:25px}
.scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0}
.scC{width:calc(100% - 50px);margin-left:8px}
.scW.ig::after{background:#e1306c}
.scW.yt::after{background:#ff0000}
.scW.tg::after{background:#229ed9}
.scC >*{display:block;font-size:13px;padding:1px 0}
.scC >*:first-child{font-weight:600}
.scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center}
.scI >svg{width:28px;height:28px}
.scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c}
.scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000}
.scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9}
.drK .scW{background:var(--darkBa);color:var(--darkT)}
.drK .scI{background:var(--darkBs)}</style>
</div>
Widgets take apps to another level by creating a larger space than a typical app icon to give you quick access to information without having to open the associated app.
Youtube Subscribe Icon and Widget for blogger
Youtube icon HTML Preview and widget Code Double tap to copy and paste in your blogger widget and see the magic
<div class="widget-content">
<a class="scW tg" data-text="Sub" href="https://www.youtube.com/@free_elements" target="_blank">
<div class="scC">
<span>Subsribe Us On Youtube</span>
<span>@freeelements</span>
</div>
<div class="scI">
<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'></path><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'></path></g></svg>
</div>
</a>
<style>
/* Sidebar Social */
.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background:var(--contentB);padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden}
.widget-content .scW:not(:first-child){margin-top:25px}
.scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0}
.scC{width:calc(100% - 50px);margin-left:8px}
.scW.ig::after{background:#e1306c}
.scW.yt::after{background:#ff0000}
.scW.tg::after{background:#229ed9}
.scC >*{display:block;font-size:13px;padding:1px 0}
.scC >*:first-child{font-weight:600}
.scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center}
.scI >svg{width:28px;height:28px}
.scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c}
.scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000}
.scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9}
.drK .scW{background:var(--darkBa);color:var(--darkT)}
.drK .scI{background:var(--darkBs)}</style>
</div>
Instagram Follow Icon Widget For Bloggers
Instagram icon HTML Preview and widget Code Double tap to copy and paste in your blogger widget and see the magic
<div class="widget-content">
<a class="scW tg" data-text="Follow" href="https://www.youtube.com/@free_elements" target="_blank">
<div class="scC">
<span>Follow Us On Instragram</span>
<span>@freeelements</span>
</div>
<div class="scI">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path class='svg-c' d='M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z'/><circle class='svg-c' cx='23' cy='9' r='1'/><path d='M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z'/></svg>
</div>
</a>
<style>
/* Sidebar Social */
.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background:var(--contentB);padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden}
.widget-content .scW:not(:first-child){margin-top:25px}
.scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0}
.scC{width:calc(100% - 50px);margin-left:8px}
.scW.ig::after{background:#e1306c}
.scW.yt::after{background:#ff0000}
.scW.tg::after{background:#229ed9}
.scC >*{display:block;font-size:13px;padding:1px 0}
.scC >*:first-child{font-weight:600}
.scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center}
.scI >svg{width:28px;height:28px}
.scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c}
.scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000}
.scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9}
.drK .scW{background:var(--darkBa);color:var(--darkT)}
.drK .scI{background:var(--darkBs)}</style>
</div>
Twitter Icon Widget For Bloggers
Twitter icon HTML Preview and widget Code Double tap to copy and paste in your blogger widget and see the magic
<div class="widget-content">
<a class="scW tg" data-text="Follow" href="https://www.youtube.com/@free_elements" target="_blank">
<div class="scC">
<span>Follow Us On Twitter</span>
<span>@freeelements</span>
</div>
<div class="scI">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z'/></svg>
</div>
</a>
<style>
/* Sidebar Social */
.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background:var(--contentB);padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden}
.widget-content .scW:not(:first-child){margin-top:25px}
.scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0}
.scC{width:calc(100% - 50px);margin-left:8px}
.scW.ig::after{background:#e1306c}
.scW.yt::after{background:#ff0000}
.scW.tg::after{background:#229ed9}
.scC >*{display:block;font-size:13px;padding:1px 0}
.scC >*:first-child{font-weight:600}
.scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center}
.scI >svg{width:28px;height:28px}
.scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c}
.scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000}
.scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9}
.drK .scW{background:var(--darkBa);color:var(--darkT)}
.drK .scI{background:var(--darkBs)}</style>
</div>
Facebook icon Widget For Blogger
Facebook icon HTML Preview and widget Code Double tap to copy and paste in your blogger widget and see the magic
<div class="widget-content">
<a class="scW tg" data-text="Follow" href="https://www.youtube.com/@free_elements" target="_blank">
<div class="scC">
<span>Follow Us On Facebook</span>
<span>@freeelements</span>
</div>
<div class="scI">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'/></svg>
</div>
</a>
<style>
/* Sidebar Social */
.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background:var(--contentB);padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden}
.widget-content .scW:not(:first-child){margin-top:25px}
.scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0}
.scC{width:calc(100% - 50px);margin-left:8px}
.scW.ig::after{background:#e1306c}
.scW.yt::after{background:#ff0000}
.scW.tg::after{background:#229ed9}
.scC >*{display:block;font-size:13px;padding:1px 0}
.scC >*:first-child{font-weight:600}
.scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center}
.scI >svg{width:28px;height:28px}
.scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c}
.scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000}
.scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9}
.drK .scW{background:var(--darkBa);color:var(--darkT)}
.drK .scI{background:var(--darkBs)}</style>
</div>
Thanks For Visiting Our Site
I have explained in detail all the features of the Top 5 Social Media Icons Widget Html and give you a free Html Social Media Icon Widget Code For Blogger Free.
I hope this post can be useful for all bloggers. Thank you for visiting our website Free Elements and join our telegram group for more updated Free Elements.
Warning!
If You want more widget then Comment!
I hope this post can be useful for all bloggers. Thank you for visiting our website Free Elements and join our telegram group for more updated Free Elements.
Comments
Post a Comment