Adding the social media Icons to Blogger Header makes it easier for readers to follow your blog on social networking sites like facebook, twitter and google+ since they're placed in a better location on your blog.. These social media icons will be placed at the top right corner of the blog's header, and with a rotating effect when a cursor is hovered on them. Below are the guidelines on how to Add Social Media Icons to Blogger Header.
- From your blogger dashboard,
- Navigate to template.
- Click on 'Edit HTML'
- Click Inside your template, using Ctrl+F keys search for ]]>
- Copy the code below and paste 'above' ]]>
Also Read: Floating Social Share Buttons For Blogger
Add Facebook Invite Friends Button With Timer In Blogger
/* Social icons for Blogger
----------------------------------------------- */
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
- Next, search for this line of code below in your template
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Copy this code below and paste 'above' that line of code.
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/USERNAME'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADy-58f_fxKnfJLqUbcchTZIYWrQPB19yEmBcW9oCsYLTsolsEiV2h2JX-78GiqM_CR8NUlv8QYm7KrRWeL9iQ8frWURvdmlLOQ-GcgtmCZIe5s1lSOdT3VlEG5SJWvl8-JII9ma5v7I/s1600/Facebook.png'/>a>li>
<li class='media_icon'><a href='http://twitter.com/#!/USERNAME'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoWrjXkzDZIC8KefXvutiv3pytIyRNZQsGaXCfX_J_xOfEXjWcxuDzCHgq-nECmin6BySoDZ4j73u9RZsYIarMq-QoW80frFalfELApCKQCceTvZjhRIK-L_2w3EBeQh3RQ3LwC-w1Yg/s1600/Twitter.png'/>a>li>
<li class='media_icon'><a href='https://plus.google.com/ID/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiopDwK5SH9zXIY_e4Sd6vdZeP5OYTLWnJABVaz8KtXA6aWv9d6Spl1NmGPOS02zi4Eu8DmBXoVQh10qIBRYCur2W6wWlJd1IDJ6los7w5QTg2ZdsAizsfHP3fbNcxJUgbtz-QId1fcJI/s1600/googleplus.png'/>a>li>
<li class='media_icon'><a href='http://BLOG-NAME.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3HiPyKreAv3b_vbwb71T8EHucCkViV-zFhX3EIXbP4LcZltNklVZqZvYDMOsQJJqbIvxxcdoMZR3Ak9Nwa22n1F5YzN82mTwKvK9o-H1UbH8kSRkfAQVLmO9YQnv7zarHlUWU6F5UwM/s1600/RSS.png'/>a>li>
ul>div
- Customize the last code above by replacing the text in blue with your Facebook page username, twitter username, google+ ID and your blog URL.
- To change the default images, replace the URL in red with your image URL.
- To add more social media icons, include this line of code before tag
<li class='media_icon'><a href='SOCIAL-MEDIA-URL'><img border='0' src='YOUR-IMAGE-URL'/>a>li>
- Save the template.
Adding the social media Icons to Blogger Header makes it easier for readers to follow your blog on social networking sites like facebook, twitter and google+ since they're placed in a better location on your blog.. These social media icons will be placed at the top right corner of the blog's header, and with a rotating effect when a cursor is hovered on them. Below are the guidelines on how to Add Social Media Icons to Blogger Header.
- From your blogger dashboard,
- Navigate to template.
- Click on 'Edit HTML'
- Click Inside your template, using Ctrl+F keys search for ]]>
- Copy the code below and paste 'above' ]]>
Also Read: Floating Social Share Buttons For Blogger
Add Facebook Invite Friends Button With Timer In Blogger
/* Social icons for Blogger
----------------------------------------------- */
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
- Next, search for this line of code below in your template
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Copy this code below and paste 'above' that line of code.
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/USERNAME'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADy-58f_fxKnfJLqUbcchTZIYWrQPB19yEmBcW9oCsYLTsolsEiV2h2JX-78GiqM_CR8NUlv8QYm7KrRWeL9iQ8frWURvdmlLOQ-GcgtmCZIe5s1lSOdT3VlEG5SJWvl8-JII9ma5v7I/s1600/Facebook.png'/>a>li>
<li class='media_icon'><a href='http://twitter.com/#!/USERNAME'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoWrjXkzDZIC8KefXvutiv3pytIyRNZQsGaXCfX_J_xOfEXjWcxuDzCHgq-nECmin6BySoDZ4j73u9RZsYIarMq-QoW80frFalfELApCKQCceTvZjhRIK-L_2w3EBeQh3RQ3LwC-w1Yg/s1600/Twitter.png'/>a>li>
<li class='media_icon'><a href='https://plus.google.com/ID/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiopDwK5SH9zXIY_e4Sd6vdZeP5OYTLWnJABVaz8KtXA6aWv9d6Spl1NmGPOS02zi4Eu8DmBXoVQh10qIBRYCur2W6wWlJd1IDJ6los7w5QTg2ZdsAizsfHP3fbNcxJUgbtz-QId1fcJI/s1600/googleplus.png'/>a>li>
<li class='media_icon'><a href='http://BLOG-NAME.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3HiPyKreAv3b_vbwb71T8EHucCkViV-zFhX3EIXbP4LcZltNklVZqZvYDMOsQJJqbIvxxcdoMZR3Ak9Nwa22n1F5YzN82mTwKvK9o-H1UbH8kSRkfAQVLmO9YQnv7zarHlUWU6F5UwM/s1600/RSS.png'/>a>li>
ul>div
- Customize the last code above by replacing the text in blue with your Facebook page username, twitter username, google+ ID and your blog URL.
- To change the default images, replace the URL in red with your image URL.
- To add more social media icons, include this line of code before tag
<li class='media_icon'><a href='SOCIAL-MEDIA-URL'><img border='0' src='YOUR-IMAGE-URL'/>a>li>
- Save the template.
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment