Beranda
Blogger
Blogger Widgets

How to Create Floating Social Media Widget in Blogger | Social Media Widget for Blogger

How to Create Floating Social Media Widget in Blogger

Nowadays, Social Media plays a crucial role in connecting people and developing relationships, not only with key influencers and journalists covering your company’s sector, but also provides a great opportunity to establish customer service by gathering input, answering questions and listening to their feedback. Everyone would want to connect with your readers on popular social media platforms like Facebook, Twitter, Telegram etc. It not only helps to build your presence outside your blog in social media sites, but also bring new visitors from those social networking sites.

To help you with this, I have created a Social Media Widget for Blogger. In this article, I will introduce you how to use this widget.

Demo of Social Media Widget

Create Social Media Widget in Blogger

Steps to Create Social Media Widget

Step 1: Look for the code </head> on your template and paste the following code just above the </head> code.

<style>
.AT-sub { position: fixed; left: 55px; bottom: 20px; 
background-color: #f2f2f2; padding: 12px 15px 12px 12px; 
border-radius: 15px; box-shadow: 0 4px 12px 0 rgba(9,32,76,.05); 
display: flex; align-items: center; max-width: 300px; 
min-width: 280px; color: #000000; overflow: hidden; z-index: 50;} .AT-sub .AT-sub-close { position: absolute; top: 4px; right: 8px; } 
.AT-sub .AT-sub-close svg { width: 22px; height: 22px; fill: #000; } 
.AT-sub .AT-sub-img { width: 70px; height: 50px; } .AT-sub .AT-sub-img img { display: flex; 
align-items: center; justify-content: center; width: 50px; } .AT-sub .AT-sub-content { width: calc(100% - 70px); padding-left: 1px; } .AT-sub 
.AT-sub-content a { display: block; color: inherit; } .at-btn{font-weight: 700; font-size: 11px; 
display: flex; align-items: center; justify-content: flex-end; 
width: 73px; height: 25px; padding-right: 12px; background-color: #e4393c; 
border-radius: 4px; color: #fff; margin-top: 12px; bottom: 0; right: 0; } .AT-sub .AT-sub-content .title { display: block; font-weight: 700; font-size: 13px; 
text-align: left; padding-left: 12px }.AT-sub .at-btn a { display: block; color: inherit; color:#fff; } .AT-sub .AT-sub-content .desc { display: block; 
font-size: 10px; margin-top: 5px; color: #000; text-align: left;padding-left: 12px }.bt-text{margin-left:9px}
</style>

Sometimes the </head> code is not found in certain templates, instead you can look for code like this: & lt; / head & gt; or & lt;! - <head /> - & gt; & lt; / head & gt;

Step 2: Search for the code </body> on your blog and paste the following code just above the </body> code.

<div class='AT-sub jhfdiuh0' id='at746427'>
<div class='AT-sub-close' onclick='document.getElementById(&quot;at746427&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='AT-sub-img'><img alt='AS Themes World'  src='image_url_here'/>
</div>
<div class='AT-sub-content'>
<span class='title'>AS Themes World</span>
<span class='desc'>Join Our Telegram Channel</span>
</div>
  <div class='at-btn'>
  <a href='https://telegram.me/freeblogger_templates?sub_confirmation=true' target='_blank'>
  <span class='bt-text'>Join</span></a>
</div></div>
  • Put the url of image in place of image_url_here that we've marked.
  • Change the link with your Social Media account link that we've marked. 
  • You can also change the sentence to your liking by changing the sentence 'AS Themes World' and 'Join Our Telegram Channel' and others that we've marked. 
  • You can also customize the corner text by changing the 'Join' that we've marked.

Now, social media widget is completely created and working properly if you follow the all steps correctly. If there are questions or steps that are not understood, please write down the questions and problems through the comments column provided below.

Posting Komentar