Home
Blogger Tips & Tricks
Blogger Widgets

How to Add Stylish Social Media Widget in Blogger Website

How to Add Stylish Social Media Widget in Blogger Website
How to Add Stylish Social Media Widget in Blogger Website 

Hello, Welcome to Accomodatio. Today we are going to create social media widgets of Pinterest, Telegram, WhatsApp & Facebook for blogger. These social media widgets are very cool and attractive. I hope you like these.

What is Social Media

Social media are interactive digitally-mediated technologies that facilitate the creation or sharing/exchange of information, ideas, career interests, and other forms of expression via virtual communities and networks.

Advantages of Social Media

Social Media plays a crucial role in connecting people and developing relationships. People can easily interact with you by using Social Media. It also helps in answering questions and listening to the feedback of the peoples.

Steps to Create Widget

Now follow the following simple steps to create widgets in Blogger.

Step 1. On Blogger Dashboard, click Layout and add a new HTML/JavaScript widget.

Step 2. Now, copy the codes of Widget that you want to add and paste in it.

Pinterest Widget

<div class="widget-content">
<a class="aspin" href="#" target="_blank">
<div class="aspin-content">
<span class="title">Follow Us on Pinterest</span>
<span class="desc">Get Updates of Every Pin</span>
</div>
<div class="aspin-img">
<img alt="Pinterest" class=" lazyloaded" data-src="https://1.bp.blogspot.com/-iW0D6nN0nYw/YKIucI2oQjI/AAAAAAAAGgA/H7i0ezGMPo4RshP3c7Qrr5OkShf_5plJgCLcBGAsYHQ/s512/Pinterest.png" src="https://1.bp.blogspot.com/-iW0D6nN0nYw/YKIucI2oQjI/AAAAAAAAGgA/H7i0ezGMPo4RshP3c7Qrr5OkShf_5plJgCLcBGAsYHQ/s512/Pinterest.png" />
</div>
</a>
</div>
<style>
.aspin{position:relative;display:flex;align-items:center;width:100%;background-color:#DD636E;margin:15px 0 0;padding:12px 15px;border:1px solid #000;border-radius:10px;color:#000;overflow:hidden}
.aspin .aspin-img{width:50px;height:50px}
.aspin .aspin-content{width:calc(100% - 50px);padding-right:15px}
.aspin .aspin-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.aspin .aspin-content .desc{display:block;font-size:11px;margin-top:2px;color:#fff}
.aspin.stark{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.aspin.stark .aspin-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.aspin.stark .aspin-img{width:100px;height:auto;flex-shrink:0}
.aspin.stark .aspin-img img{position:absolute;bottom:0;right:0;max-width:110px}
.dark-mode .aspin{color:#161617}
  </style>
Instructions:
  • Add your Pinterest Account link where we have marked #.
  • You can also change the sentence to your liking by changing the sentence 'Follow Us on Pinterest' and 'Get Updates of Every New Pin' and others that we've marked.

Telegram Widget

<div class="widget-content">
<a class="astelegram" href="#" target="_blank">
<div class="astelegram-content">
<span class="title">Join Telegram Channel</span>
<span class="desc">Get Updates of Every New Post</span>
</div>
<div class="astelegram-img">
<img alt="Telegram" class=" lazyloaded" data-src="https://1.bp.blogspot.com/-RXioWrjZ9ME/YKIixWLS2tI/AAAAAAAAGfw/1KO3vdhQQMYH9nGoQpaYZEpnAXMoLCk9wCLcBGAsYHQ/s512/Telegram.png" src="https://1.bp.blogspot.com/-RXioWrjZ9ME/YKIixWLS2tI/AAAAAAAAGfw/1KO3vdhQQMYH9nGoQpaYZEpnAXMoLCk9wCLcBGAsYHQ/s512/Telegram.png" />
</div>
</a>
  </div>
<style>
.astelegram{position:relative;display:flex;align-items:center;width:100%;background-color:#57B7EB;margin:15px 0 0;padding:12px 15px;border:1px solid #000;border-radius:10px;color:#000;overflow:hidden}
.astelegram .astelegram-img{width:50px;height:50px}
.astelegram .astelegram-content{width:calc(100% - 50px);padding-right:15px}
.astelegram .astelegram-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.astelegram .astelegram-content .desc{display:block;font-size:11px;margin-top:2px;color:#fff}
.astelegram.stark{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.astelegram.stark .astelegram-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.astelegram.stark .astelegram-img{width:100px;height:auto;flex-shrink:0}
.astelegram.stark .astelegram-img img{position:absolute;bottom:0;right:0;max-width:110px}
.dark-mode .astelegram{color:#161617}
  </style>
Instructions:
  • Add your Telegram Account link where we have marked #.
  • You can also change the sentence to your liking by changing the sentence 'Join Telegram Channel' and 'Get Updates of Every New Post' and others that we've marked.

WhatsApp Widget

<div class="widget-content">
<a class="aswa" href="https://wa.me/91XXXXXXXXXX" target="_blank">
<div class="aswa-content">
<span class="title">Chat With Us on WhatsApp</span>
<span class="desc">We will reply as soon as possible..</span>
</div>
<div class="aswa-img">
<img alt="WhatsApp" class=" lazyloaded" data-src="https://1.bp.blogspot.com/-5_UUf_8VzMA/YKIucPbexnI/AAAAAAAAGgE/f5lSLRCv44M6jyhCTHX-6RzTar2FKtUKwCLcBGAsYHQ/s512/WhatsApp.png" src="https://1.bp.blogspot.com/-5_UUf_8VzMA/YKIucPbexnI/AAAAAAAAGgE/f5lSLRCv44M6jyhCTHX-6RzTar2FKtUKwCLcBGAsYHQ/s512/WhatsApp.png" />
</div>
</a>
</div>
  <style>
.aswa{position:relative;display:flex;align-items:center;width:100%;background-color:#95D6A4;margin:15px 0 0;padding:12px 15px;border:1px solid #000;border-radius:10px;color:#000;overflow:hidden}
.aswa .aswa-img{width:50px;height:50px}
.aswa .aswa-content{width:calc(100% - 50px);padding-right:15px}
.aswa .aswa-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.aswa .aswa-content .desc{display:block;font-size:11px;margin-top:2px;color:#fff}
.aswa.stark{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.aswa.stark .aswa-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.aswa.stark .aswa-img{width:100px;height:auto;flex-shrink:0}
.aswa.stark .aswa-img img{position:absolute;bottom:0;right:0;max-width:110px}
.dark-mode .aswa{color:#161617}
  </style>
Instructions:
  • Add your WhatsApp Number in place of XXXXXXXXXX, here 91 is the country code.
  • You can also change the sentence to your liking by changing the sentence 'Chat With Us on WhatsApp' and 'We will reply as soon as possible...' and others that we've marked.

Facebook Widget

<div class="widget-content">
<a class="asfacebook" href="#" target="_blank">
<div class="asfacebook-content">
<span class="title">Like Our Facebook Page</span>
<span class="desc">Get Updates of Every New Post</span>
</div>
<div class="asfacebook-img">
<img alt="Facebook" class=" lazyloaded" data-src="https://1.bp.blogspot.com/-ADPrZ8d8BvM/YKIjbusBiRI/AAAAAAAAGf4/Joc1EL_7wHgAuht4ajgbsZ62-HYywIuywCLcBGAsYHQ/s512/Facebook.png" src="https://1.bp.blogspot.com/-ADPrZ8d8BvM/YKIjbusBiRI/AAAAAAAAGf4/Joc1EL_7wHgAuht4ajgbsZ62-HYywIuywCLcBGAsYHQ/s512/Facebook.png" />
</div>
</a>
</div>
  <style>
.asfacebook{position:relative;display:flex;align-items:center;width:100%;background-color:#57B7EB;margin:15px 0 0;padding:12px 15px;border:1px solid #000;border-radius:10px;color:#000;overflow:hidden}
.asfacebook .asfacebook-img{width:50px;height:50px}
.asfacebook .asfacebook-content{width:calc(100% - 50px);padding-right:15px}
.asfacebook .asfacebook-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.asfacebook .asfacebook-content .desc{display:block;font-size:11px;margin-top:2px;color:#fff}
.asfacebook.stark{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.asfacebook.stark .asfacebook-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.asfacebook.stark .asfacebook-img{width:100px;height:auto;flex-shrink:0}
.asfacebook.stark .asfacebook-img img{position:absolute;bottom:0;right:0;max-width:110px}
.dark-mode .asfacebook{color:#161617}
  </style>
Instructions:
  • Add your Facebook Account link where we have marked #.
  • You can also change the sentence to your liking by changing the sentence 'Like Our Facebook Page' and 'Get Updates of Every New Post' and others that we've marked.
You May Like These :

Now, I hope you successfully add these widgets to your blog. If you want widgets of other social platform then write down in comment box we will make an article on that social platform widget.

© Copyright Accomodatio

Post a Comment