Do You Want to Add Social Icons Widget Don’t Worry about it? Blog’s Learner has been helping you, everyone want to add an attractive social widget on a custom website and WordPress but new developers don’t know how to create and add this widget so I’m teaching you how to do this so let’s get started

There are many ways to add to the Social Media Widget.

  • Custom Code
  • WordPress Plugin

Custom Code With Help off HTML/CSS/

Go to the Dashboard -> Appearance -> Widgets

Follow the Step: 1 Social Media Widget

Click Widgets menu -> Then you can See Below Type of Widgets Then Click -> Custom HTML

Step:2

After Click Custom HTML You can Add ->Press ->Blogs ->Footer >You can Use Anywhere. But in this post, I’m used ->Press sidebar ->Then Click Add Widget

Step: 3

After Add Widget Add Title: -> Follow Us on Then Copy Code and Paste Content: Box

Step:4

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 12px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
	.fa-whatsapp {
  background: #1c8b82;
  color: white;
}
</style>
</head>
<body>

<!-- Add font awesome icons -->
<a href="# /Add Social Media Link//"> class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#"class="fa fa-wordpress ></a>
<a " class="fa fa-instagram"></a>
<a href="#" class="fa fa-whatsapp"></a>
 
</body>
</html> 

After Pasting Code The Click Saved ->Ok

Output :-

Step:5

LEAVE A REPLY

Please enter your comment!
Please enter your name here