How to Create Floating Social Media Widget in Blogger Website
Currently, 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 such as Facebook, Twitter, Telegram, etc. It does not only help to build your presence outside your blog on social media sites but also brings new visitors from those social networking sites.
In this article, we will add an attractive Floating Social Media Widget. So follow the steps carefully, if you don't follow carefully then this widget does not work.
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: #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>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("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='The Kathait' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCuIIAG_Fwagq9JHaDfq3puVYGIYOOQLNi9sX0k7vDSTsrbJ2cIa0eRvg_6Se4PnLCmaKwHDsh_axyShRxF_sPTPV7EtVhGHQH9yhOtn_O-nJ3UnxlJ0pTXrkXzQWDkgZrwvBm5y5_b61b/s512/The+Kathait.png'/>
</div>
<div class='AT-sub-content'>
<span class='title'>The Kathait</span>
<span class='desc'>Join Our Telegram Channel</span>
</div>
<div class='at-btn'>
<a href='https://telegram.me/thekathait?sub_confirmation=true' target='_blank'>
<span class='bt-text'>Join</span></a>
</div></div>- Put the URL of the picture 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 'The Kathait' 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.
Floating Youtube Subscribe Button On Blogging
One of the easiest ways to grow your social media following is by placing the Youtube subscribe button on your blog. If you have decent blog traffic, subscribe buttons for different social networking sites, will make it easier for your readers to follow you.
- Log in to your blogger account.
- Go to Theme > Edit HTML.
- Scroll Down and find the </body> tag.
- Then Add this Following CSS above </head>
<style>
/* Subscribe button by The Kathait */
.AT-sub { position:fixed; left: 55px;visibility:hidden; 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: 338px; min-width: 280px; color: #000000; overflow: hidden; z-index: 50;transition: 0.5s ease;} .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;justify-content: center; width: 94px; height: 25px;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-sub-content .desc { display: block; font-size: 10px;color: #000; text-align: left;padding-left: 12px }.AT-sub.show-btn{ visibility: visible; transform: translate(20px, 18px) transition: 0.5s ease; } .AT-sub.hide-btn{ opacity: 0; transform: translate(50px, 18px); transition: 0.5s ease; }.bt-text{padding-top: 7px; display: flex;}.at-btn a{color:inherit}
</style>
<script>//<![CDATA[
const subContainer = document.querySelector(".AT-sub"); const closeBtn = subContainer.querySelector(".AT-sub-close"); closeBtn.addEventListener("click", () => { document.cookie = "WebsiteName01=anutrickz01; max-age=" + 24*60*60; subContainer.classList.add("hide-btn"); setTimeout(()=>{ subContainer.classList.add("hide"); }, 2000); }); const siteCookie01 = document.cookie.indexOf("WebsiteName01="); if(siteCookie01 != -1){ subContainer.classList.remove("show-btn"); } else{ subContainer.classList.add("show-btn");}
//]]>
</script>Same way add this following HTML code below </body>
<div class='AT-sub show-btn'>
<div class='AT-sub-close'><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='P S Kathait' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCuIIAG_Fwagq9JHaDfq3puVYGIYOOQLNi9sX0k7vDSTsrbJ2cIa0eRvg_6Se4PnLCmaKwHDsh_axyShRxF_sPTPV7EtVhGHQH9yhOtn_O-nJ3UnxlJ0pTXrkXzQWDkgZrwvBm5y5_b61b/s512/The+Kathait.png'/>
</div>
<div class='AT-sub-content'>
<span class='title'>P S Kathait</span>
<span class='desc'>Subscribe our Youtube Channel</span>
</div>
<div class='at-btn'>
<a href='https://www.youtube.com/c/PSKathait?sub_confirmation=true' target='_blank'>
<span class='bt-text'>Subscribe</span></a>
</div></div>That's it then Save the Theme.
If the code does not work or you’ve faced any error/problem, please download the source code files from the given download button.
Now, the social media widget is completely created and working properly if you follow all the steps correctly. If there are questions or steps that are not understood, please write down the questions and problems via the comments column provided below.
Post a Comment