How To Add Social Follow Button Like My Website

4.3/5 - (33 votes)

This article is all about how to add social follow buttons to a WordPress website or you can say how to add social icons in a WordPress website without plugins.

Contents In The Article hide

HTML Code

<img src="https://webinsights.in/wp-content/webpc-passthru.php?src=https://webinsights.in/wp-content/uploads/2021/06/services-banner1.png&nocache=1" class="myimg" alt="">
<p> <a href="#" target="_blank" class="social yt"> YouTube</a> </p>
<p> <a href="#" target="_blank" class="social fb"> Facebook</a> </p>
<p> <a href="#" target="_blank" class="social insta"> Insta</a> </p>

CSS Code

Paste below CSS Code to your additional CSS Box.

.myimg{
			max-width: 100%;
			margin-bottom:30px;
		}
		.social{
			background-color: #10b98e;
			padding: 10px;
			color:white;
			text-decoration: none;
			display: block;
			border-radius: 30px;
			text-align: center;
			font-size: 16px;
		
		}
		.social:hover{
			box-shadow: 1px 1px 8px #888888;
			color:white;
		}
		
		.social.fb{
			background-color:#4267B2;
			margin-top: -10px;
		}
		.social.yt{
			background-color:#c4302b;
			margin-top: -10px;
		}
		.social.insta{
			background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
			margin-top: -10px;
		}


Sharing Is Caring...

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

10 thoughts on “How To Add Social Follow Button Like My Website”

  1. Please make a video on these awesome new floating share icons. and please tell me how I set featured image size differently on mobile phones using CSS like you.

    Reply
  2. Fi you’re going to post these codes atleast provide proper instructions on how to use them. This was so useless

    Reply
  3. sir, please teach us how you created the box in your headings, and also how to change the colors of the widget, I tried changing the color, but it’s not implemented on the website, I’m using your premium theme.

    and also I gave you the login link but now my access is redirecting to temporary access please help me resolve it.

    Reply

Leave a Comment

Limited Time Offer
10% Discount on WP rocket
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Limited Time Offer
10% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Copy This Code And Click On Claim Now
Increase Your Website Speed With Cloud Hosting (Limited Time Deal)
10
days
10
hours
10
minutes
10
seconds
Increase Your Website Speed With Cloud Hosting
10
days
10
hours
10
minutes
10
seconds