Also Read

How To Add A Beautiful Floating Social Media Button In Blogger?

Social media buttons or social buttons are interactive symbols shown on a portion of your pages to permit your site visitors to their own social profiles, like Facebook, Pinterest, Twitter, LinkedIn, and other social media platform. In this article you will come to know how to add a beautiful floating social media button in blogger.

Social media button for sharing can give more engagement to your readers or visitors, particularly when they need to tell someone about the new content. They find significant and valuable about their new buy that they simply need to show to their friends on social media. Subsequently, social button for following can further develop your site's visitors experience.

What Is A Floating Social Media Button?

Sometimes we found some beautiful button below of a site saying subscribe to our channel or like us on facebook etc. Today we will learn how to add a beautiful floating social media button in blogger?

Why Floating Social Media Button Important?

A floating social media button helps  a blogger to increase the engagement of a reader and also increase the subscription or like of their social media platform.

How Do I Add Social Media Buttons On Blogger?

Step 1: 

Go to your Blogger dashboard.

Step 2: 

Click Theme > Edit HTML.

Step 3: 

Click anywhere into the code and press Ctrl + F.

Step 4: 

Now search for </head>.

Step 5: 

Copy the below code and paste just above </head>.

<style> .AT-sub { position: fixed; left: 55px; bottom: 55px; 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: #1c61f1; 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>

Step 6: 

Again search for </body>.

Step 7: 

Copy the below code and paste just above </body>.

<div class='AT-sub jhfdiuh0' id='at746427'><div class='AT-sub-close' onclick='document.getElementById("at746427").style.display="none"'><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='Your Page/Channel Name' src='Your Image Url'/></div><div class='AT-sub-content'><span class='title'>Your Page/Channel Name</span><span class='desc'>Like Our Facebook Page</span></div> <div class='at-btn'> <a href='Your Social Media Link?sub_confirmation=true' target='_blank'> <span class='bt-text'>Like</span></a></div></div>

Now customize the code. 

• Change Your Image URL,
• Change Your Page/Channel Name,
• Change Your Social Media Link,

Step 8: 

Now save your theme.

You are done.

Conclusion

Hope you have successfully added these codes on your blog. If you like this way to add a beautiful social media button in blogger, please share it to your friends.