next
Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
How To Add Social Media Icons to Blogger Header
70 comments
This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog headerbut now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.
You can see a demo in this test blog.
Adding Social Media Icons to Blogger HeaderStep 1.From your Blogger dashboard, go toTemplateand click on theEdit HTMLbutton:
Step 2.To expand the style, click on the small arrow on the left of... (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the]]>tag (screenshot 2) and add this code just above it:
/* 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;
}
Screenshot 1:
Screenshot 2:
Step 3.Now search for this line
Step 4.And just above it, add this code:
Customization
- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add beforea line like this for each extra icon you want:
I do not even know how I ended up here, but I thought this post was great.
ReplyDeleteI don't know who you are but certainly you are going to a famous blogger if you are not
already ;) Cheers!
Review my site; buy instagram Followers cheap