How To Add Social Follow Button Like My Website

4.4/5 - (67 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/uploads/2021/06/services-banner1.png" 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;
		}


One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
Avatar of ANAND

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

13 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
  4. MashaAllah sir bohat bohat zabardast. I make my complete website customize after watching your tutorials on youtube and help of your codes.
    thank you so much.. Now i am yours permanent fan.

    Reply

Leave a Comment