How to add Social Media Icons to Blogger Header
Alfa Theme | March 20, 2020
How to add Social Media Icons to Blogger Header
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 startedIn 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; }
MODIF:
and then paste it before </b:skin> like this.
And now search for the following code .
<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>
MODIF:
Note: You have to change each url with your own profile url.
Save template and your done !
Tags :
Sample Post
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 startedIn 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; }
MODIF:
.social-profiles-widget {
width: 50%;
height: auto;
padding: 0;
float: right;
margin-right: 30px;
margin-top: 10px;
}
.social-profiles-widget ul {
list-style: none;
float: RIGHT;
margin: 0;
padding: 0;
}
.social-profiles-widget ul li{
list-style:none;
margin:0px;
display:inline;
}
.social-profile .fa{
width: 32px;
height: 32px;
color: rgba(255,255,255,0.8);
text-align: center;
line-height: 32px;
font-size: 1em;
-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:50%;
}
.social-profile .fa-facebook{
background:#3b5998;
}
.social-profile .fa-twitter{
background:#55acee;
}
.social-profile .fa-youtube{
background:#cc181e;
}
.social-profile .fa-instagram{
background:#333;
}
.social-profile .fa-linkedin {
background:#3371b7;
}
.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.
And now search for the following code .
<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>
MODIF:
<div class='social-profiles-widget'>
<ul class='social-profile circle'>
<li><a href='#'><i class='fa fa-facebook'/></a></li>
<li><a href='#'><i class='fa fa-twitter'/></a></li>
<li><a href='#'><i class='fa fa-youtube'/></a></li>
<li><a href='#'><i class='fa fa-instagram'/></a></li>
<li><a href='#'><i class='fa fa-linkedin'/></a></li>
</ul>
</div>
Note: You have to change each url with your own profile url.
Save template and your done !
http://www.meralesson.com/2016/03/how-to-add-social-media-icon-to-blog-header.html
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
No comments on How to add Social Media Icons to Blogger Header
Post a Comment
No SPAM, Please...!