Social media icon buttons you see it on every blog and it help a lot to connect your blog visitor to your social profiles, which is good for giving your visitor latest feed update through out social networking site but the thing is if add my social button in my blog, then how much chance is there for visitors to interact with it, the main point is you have added it in the right place.
The common place which literally social media icon's place is the right sidebar but that's not good enough you should add socail media button twice so every user/visitor of your blog can easily see your profile buttons .
In this I'll show you how to add social media button in the blogger blog header.You can also check my previous post which is how to add, reddit share button on a blogger blog, and if you also want more share button for blogger blog then here it is>> Facebook, twitter or google plus.
first of all
You have to add this code to your head section just copy below code .
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>and then paste inside the <head> tag
let's get started
In order to add social media icon to blogger blog header then first you have to login to your blogger account and then go to Template>> Edit HTML>> and click any ware inside the HTML code editor and then use search box by pressing CTRL + F
Once you open the search box then paste the following code and hit enter.
</b:skin>and now copy the following CSS code.
.social-profiles-widget{
width: 100%;
height: auto;
padding: 10px 0px;
}
.social-profiles-widget ul{list-style:none;float: RIGHT;}
.social-profiles-widget ul li{
list-style:none;
margin:0px;
display:inline;
}
.social-profile .fa{
width: 40px;
height: 40px;
color: rgba(255,255,255,0.8);
text-align: center;
line-height: 40px;
font-size: 1.3em;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.social-profile.circle .fa{
border-radius:20%;
}
.social-profile .fa-facebook{
background:#3b5998;
}
.social-profile .fa-twitter{
background:#55acee;
}
.social-profile .fa-youtube{
background:#cc181e;
}
.social-profile .fa-reddit{
background:#cee3f8;
}
.social-profile .fa-google-plus{
background:#d34836;
}
.social-profile .fa:hover, .social-profile .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}and then paste it before </b:skin> like this.
<b:section class='header' id='header' then just above it paste the following html code.
<div class='social-profiles-widget'>
<ul class='social-profile circle'>
<li><a href='************Facebook url*****************/'><i class='fa fa-facebook'/></a></li>
<li><a href='***********Twitter url*****************'><i class='fa fa-twitter'/></a></li>
<li><a href='************Youtube channel***************'><i class='fa fa-youtube'/></a></li>
<li><a href='***************Google + url******************/'><i class='fa fa-google-plus'/></a></li>
<li><a href='************Reddit url******/'><i class='fa fa-reddit'/></a></li>
</ul>
</div>
Note: You have to change each url with your own profile url.
Save template and your done !
If you find this article then share it please and you can also follow us on twitter and like our facebook page .thank you :)
“The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.”
nice
ReplyDeleteI will prefer this blog because it has much more informative stuff.
ReplyDeleteNice bro i like it
ReplyDeleteNice work, I can check while am doing on my work.
ReplyDelete