.

Adding Responsive Social Media Icons to Your Blogger Site - Complete guide (2023)

 Adding Responsive Social Media Icons to Your Blogger Site - Complete guide

Learn the Steps to Incorporate Eye-catching and Mobile-Friendly Social Media Icons on Your Blogger Platform

Boosting interaction within your content community can be achieved by integrating social media icons into your blog. In the era of digital prominence, establishing an online presence is an indisputable necessity. Ensuring accessibility across multiple platforms is pivotal. Social media serves as the conduit through which individuals can connect with you, often unintentionally.

By embedding social media icons on your website and linking them to your respective social networks, you open avenues to a broader audience. This strategy enables you to tap into a wider demographic, reaching individuals who might not even be aware that they've stumbled upon your digital presence.

In today's business landscape, social media icons have evolved into indispensable tools. They not only enhance user engagement on blogs but also play a pivotal role in disseminating knowledge about various social media platforms. For those immersed in blogging, Google's Blogger likely serves as your platform of choice.

In this instructional guide, we will delve into the process of seamlessly incorporating HTML and CSS code to integrate social media icons into your Blogger interface. Let's embark on this tutorial, unraveling the straightforward approach to enhance your blog's connectivity.

How to Add Social Media Icons in blogger?

Follow some steps to Add Social Media Icons in blogger.


Step1) First of all, log in to the blogger.com dashboard.

Step2) Now go to the Layout Section.

Step3) In Layout Section, go to the Sidebar widget.

Step4) Now in Sidebar Widget add a HTML/ Javascript Gadget.

Step5) Now, Copy this Code and paste it into HTML/Javascript Widget as given below.

 Adding Responsive Social Media Icons to Your Blogger Site - Complete guide
Code:
xml
<html> <head> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } .social-media { display: flex; flex-wrap: wrap; } .social-media a .fa { font-size: 20px; line-height: 50px; color: #000; } .social-media a { display: block; width: 50px; height: 50px; margin: 3px; text-align: center; background: rgba(0, 0, 0, 0.1); transition: 0.3s; border-radius: 50px; } .social-media a:before { content: ''; top: -6px; left: 3px; width: 100%; height: 10%; background: rgba(0, 0, 0, 0.5); transform: skewX(-45deg); } .social-media a:after { content: ''; top: -2.5px; left: 50px; width: 10%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: skewY(-45deg); } .social-media .social-media .blogtriggers-facebook { color: #3b5998; } .social-media a:hover { transform: translate(-10%, 10%); box-shadow: 10px 0 35px #000; transition: 0.3s; } .social-media .blogtriggers-facebook { background: #3b5998; } .social-media .blogtriggers-facebook .fa { color: #fff; } .social-media .blogtriggers-twitter { background: #55acee; } .social-media .blogtriggers-twitter .fa { color: #fff; } .social-media .blogtriggers-youtube { background: #cd201f; } .social-media .blogtriggers-youtube .fa { color: #fff; } .social-media .blogtriggers-instagram { background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1); } .social-media .blogtriggers-instagram .fa { color: #fff; } .social-media .blogtriggers-quora { background: #b92b27; } .social-media .blogtriggers-quora .fa { color: #fff; } .social-media .blogtriggers-linkedin { background: #0077b5; } .social-media .blogtriggers-linkedin .fa { color: #fff; } .social-media .blogtriggers-whatsapp { background: #25d366; } .social-media .blogtriggers-whatsapp .fa { color: #fff; } .social-media .blogtriggers-pinterest { background: #b3001b; } .social-media .blogtriggers-pinterest .fa { color: #fff; } .social-media .blogtriggers-telegram { background: #0088cc; } .social-media .blogtriggers-telegram .fa { color: #fff; } a { text-decoration: none; text-align: center; } .tutorial-button { margin: 10px 0px; width: 30%; height: 50px; background: rgba(205, 32, 31, 0.3); position: relative; transition: 0.2s; } .tutorial-button p { padding: 12px; text-align: center; color: #333; font-size: 1rem; font-family: sans-serif; transition: 0.2s; } .tutorial-button:hover { background: rgba(205, 32, 31, 1); box-shadow: 5px 5px 5px black; transition: 0.2s; } .tutorial-button:hover p { color: #fff; transition: 0.2s; } </style> </head> <body> <div class="social-media"> <div class="demo"> <a href="https://facebook.com/blogtriggers" target="_blank" class="blogtriggers-facebook"><i class="fa fa-facebook"></i></a> </div> <a href="https://twitter.com/blogtriggers" target="_blank" class="blogtriggers-twitter"><i class="fa fa-twitter"></i></a> <a href="https://www.youtube.com/channel/UCZVn54mHcoFmaq6se7gtS-w" target="_blank" class="blogtriggers-youtube"><i class="fa fa-youtube"></i></a> <a href="https://instagram.com/blogtriggers" target="_blank" class="blogtriggers-pinterest"><i class="fa fa-instagram"></i></a> <a href="https://blogtriggers.quora.com" target="_blank" class="blogtriggers-quora"><i class="fa fab fa-quora"></i></a> <a href="https://www.linkedin.com/in/blogtriggers/" target="_blank" class="blogtriggers-linkedin"><i class="fa fa-linkedin"></i></a> <a href="https://whatsapp.com/" target="_blank" class="blogtriggers-whatsapp"><i class="fa fab fa-whatsapp"></i></a> <a href="https://in.pinterest.com/blogtriggers/_saved/" target="_blank" class="blogtriggers-pinterest"><i class="fa fab fab fa-pinterest"></i></a> <a href="https://t.me/blogtriggers" target="_blank" class="blogtriggers-telegram"><i class="fa fab fab fa-telegram"></i></a> </div> Made By <a href="https://www.blogtriggers.com" target="_blank"><b><i><u> Blogtriggers</u></i> </b></a> With ❤</a> </body> </html>
Step5) Now Click on Save.

Advantages of Incorporating Social Media Icons on Your Blogger Site

👉 Expanding Your Audience: Integrating social media icons into your header can substantially broaden your blog's readership.

👉 Enhancing Credibility and Interaction: By featuring these icons, your blog gains credibility and prompts readers to engage with your content. They serve as a visual signal that your business or blog has a presence on various social networking platforms.

👉 Simplifying Connectivity: These icons provide a seamless means to exhibit an active audience and maintain contact with your readers.

👉 Swift Social Following: By simply clicking on the icons, people can swiftly connect with you on your social networks, streamlining the process of building a follower base.

👉 Amplifying Engagement: The incorporation of social media icons fuels interaction and engagement, driving a surge of traffic to your posts.

👉 Bridging to Social Platforms: If your posts secure high rankings and your content is top-notch, users are more likely to follow your social media accounts through your website.

👉 Elevating Visibility and SEO: The addition of social media icons augments your website's visibility and elevates its search engine optimization.

👉 Streamlining Sharing: By integrating social media badges into your blog's sidebar, you sidestep the need for readers to navigate back and forth between pages to share content with friends.

In Conclusion:
Social media icons function as clickable buttons that provide direct access to your official social media pages. Their primary purpose is to infuse interactivity and visual appeal into blogs and websites, fostering engagement with readers. By seamlessly incorporating these icons into your blog, you provide readers with compelling incentives to share your content, particularly across platforms like Facebook and Twitter.

If you have already embraced and enjoyed the benefits of social media icons for bloggers, their integration can undoubtedly be a valuable addition to your blog. Within this article, I've shared my own experiences in incorporating social media icons into bloggers, aiming to provide insights that might prove helpful to you.

Post a Comment

Previous Post Next Post