If you are looking for how to add a Social Media Follow Box Widget to the Blogger website then this post is just for you.
I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.
We only used then HTML and CSS. Are you upset about your website speed? do not worry it doesn't affect your website speed.
Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
So without wasting important time let's check How To Add Social Media Follow Box Widget To Blogger?
You can see the demo here:-
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]>
/*]]>*/
and paste the following CSS Codes just above to it.
/* Sidebar Social */ .scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background-color:white;padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden} .widget-content .scW:not(:first-child){margin-top:25px} .scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0} .scC{width:calc(100% - 50px);margin-left:8px} .scW.ig::after{background:#e1306c} .scW.yt::after{background:#ff0000} .scW.tg_or_tw::after{background:#229ed9} .scW.fb::after{background:#3b5998}.scC >*{display:block;font-size:13px;padding:1px 0} .scC >*:first-child{font-weight:600} .scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center} .scI >svg{width:28px;height:28px} .scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c} .scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000} .scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9} .drK .scW{background-color:#242424;color:white} .drK .scI{background-color:#303030}
Don't forget to change .drK
with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!
Here are the three-four social media background tenses that we have documented with the type class: ig,yt,tg_or_tw,tg
. You can add more ex:.scW.tg_or_tw::after{background:#e1306c}
and change the HTML if you want ex:tg_or_tw"
Step 6: Save the html changes by clicking on this icon
Step 7: Then go to the Layout or place which you want to add Social Media Follow Box
Step 8: Now edit the HTML code and change the svg icons, Title and text and add your own link in it.
Join our Telegram channel@the_pro_project
Subscribe our YouTube channel@the_pro_project
Follow our Instragram account@the_pro_project
Like our Facebook page@the_pro_project
Follow our Twitter account@the_pro_project
Here we have added svg codes according to social media symbol you can change your svg code with below codes if you want
Step 9: Now save the code and publish the widgets.
Now the Social Media Follow Box is successfully added to your blogger website. This is fully responsive and works perfectly in all types of devices. You can also adjust this further according to your website.
Double click on the code boxes below to copy the codes
Some of the icon packs shared are licensed under Creative Commons (Attribution-ShareAlike 3.0 Unported) which means to appreciate the creator, add a credit link to the icon maker.
License information last checked: January 13, 2022
Credit: iconfinder.com/bombasticon
Credit: iconfinder.com/iconofoxy
To appreciate our workshop, consider keeping the credits in canons.
We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.
In this article I have made a tutorial on How To Add Social Media Follow Box Widget To Blogger? I Hope you have liked this article and please do share with your friends and follow up blog for more.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved
© Copyright:
www.the-pro-project.blogspot.com