To add social media logos in the left sidebar using HTML and CSS, you can use the following code snippet. This example assumes you have the social media logo images available in your project directory. If you don't have the images, you can use Font Awesome icons instead.
Open Blogger Theme > Edit HTML window
Copy and paste the below code above the </body> tag
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:if cond='data:blog.pageType == "item"'>
<!-- Css Code Starts-->
<style scoped='' type='text/css'>
.fixed-leftSd,.fixed-rightSd{position:fixed;top:192px;width:120px;height:300px; margin: 15px; z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:-15px;}
.fixed-rightSd{right:-10px;}
.close-fixedSd{position:absolute;width:160px;height:21px;line-height:15px;font-size:11px;font-weight:400;top:-20px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}
@media screen and (max-width:1300px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}
.sidebarSocialMedia {
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
background-color: #05064b;
padding: 10px;
border-radius: 0 10px 10px 0;
}
.social-icon {
text-decoration: none;
color: white;
margin: 10px 0;
font-size: 24px;
transition: color 0.3s;
}
.social-icon:hover {
color: #0073e6;
}
/* Specific colors for each social media icon */
.social-icon.facebook {
color: #ffffff; /* Facebook blue */
}
.social-icon.twitter {
color: #1da1f2; /* Twitter blue */
}
.social-icon.youtube {
color: #ff0000;
}
.social-icon.linkedin {
color: #3f9cff; /* LinkedIn blue */
}
/* Hover effect */
.social-icon:hover {
opacity: 0.7; /* Slight opacity change on hover */
}
.social-icon.instagram{
color: #cca9ec; /* Instagram blue */
}
</style>
<!-- Css Code ends-->
<!-- HTML Code Starts-->
<div class='fixed-leftSd'>
<div class='sidebarSocialMedia'>
<a class='social-icon youtube' href='https://www.youtube.com/channel/UChNkR5niBAMF9yOE6_S1_KA?sub_confirmation=1' target='_blank'>
<i class='fab fa-youtube'/>
</a>
<a class='social-icon facebook' href='/' target='_blank'>
<i class='fab fa-facebook-f'/>
</a>
<a class='social-icon twitter' href='/' target='_blank'>
<i class='fab fa-twitter'/>
</a>
<a class='social-icon instagram' href='/' target='_blank'>
<i class='fab fa-instagram'/>
</a>
<a class='social-icon linkedin' href='/' target='_blank'>
<i class='fab fa-linkedin-in'/>
</a>
</div>
</div>
<!-- HTML Code Ends-->
</b:if>
</b:if>
This approach allows each social media icon to have its distinct color, making them visually recognizable and consistent with their respective brand colors.
You will ge the below output.
