Nowadays, social media plays a critical role in connecting people and developing relationships not only with key influences and journalists covering your company's sector, but also providing an excellent opportunity to improve customer service by collecting feedback, answering questions and listening to their feedback.
Everyone would like to connect with your readers on popular social media platforms like Facebook, Twitter, Telegram, etc. This not only helps to strengthen your presence outside of your blog on social media sites, but also attracts new visitors from those social media sites. networks.
You can also change the offer to your liking by changing the sentences "Blogger-Vlogger" and "Join our YouTube channel" and others that we have noted.
You can also customize the text in the corner by changing the Join box.
Floating YouTube subscribe button while blogging
One of the easiest ways to grow your social media followers is to place a Youtube sign up button on your blog. If you have decent blog traffic, the subscribe buttons on different social media sites will help your readers follow you.
In this article, we will add an attractive floating social media widget. So follow the instructions carefully, if you don't follow them carefully, this widget will not work.
Step 1: Find the </head> code in your template and paste the following code just above the </head> code.
CSS 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 </head> code is missing from certain templates, instead you can search for code like this: & lt; / head & gt; or & lt;! - <head /> - & gt; & lt; / head & gt;
Step 2. Find the </body> code on your blog and paste the following code just above the </body> code.
JAVASCRIPT CODE
</script>
<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='VLOGGER-BLOGGER' src='https://yt3.ggpht.com/-cUgy4Jzuqznq4hfAvfpka9UjroXTngXu-eXM9EJTf7zUAWbwCC2i8J8VIZH5gfapCWrAr1ZFw=s88-c-k-c0x00ffffff-no-rj'/>
</div>
<div class='AT-sub-content'>
<span class='title'>VLOGGER-BLOGGER</span>
<span class='desc'>Join Our Youtube</span>
</div>
<div class='at-btn'>
<a href='https://www.youtube.com/channel/UChoaJD94jjSTY4uz8Dw4GXQ?sub_confirmation=1' target='_blank'>
<span class='bt-text'>Join</span></a>
</div></div>Description
Place the url of the image instead of the image_url_here we marked
Change the link to the link of your social media account that we have tagged.
The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.
Post a Comment
Post a Comment