Style :
Step 1: Login to Blogger Dashboard , Go to Template > Edit HTML
Click any ware in the template and press CTRL+F then find <head> tag just below to it add below code
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
Step2: Go to layout > Click on add gadget > select Html/Java script . > add below code in content area then drag it to place where you want on the site
<style>
#fawesomeicons {
margin: 0;
padding: 0;
}
#fawesomeicons ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#fawesomeicons li {
list-style: none;
margin: 0;
padding: 0;
}
#fawesomeicons li a, #fawesomeicons li a:link, #fawesomeicons li a:visited {
color: #FFF;
display: block;
font:normal 18px Tahoma, Geneva, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#fawesomeicons li a:hover, #fawesomeicons li a:active {
background: red; /* Menu hover */
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#fawesomeicons li {
float: left;
padding: 0;
}
</style>
<div id=fawesomeicons>
<ul id=fawesomeicons>
<li><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></i></a></li>
<li><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></i></a></li>
<li><a href='#' rel='nofollow' target='_blank' title='GooglePlus'><i class='fa fa-google-plus'/></i></a></li>
<li><a href='#'><i class='fa fa-user'/> About Us</i></a></li>
<li><a href='#'><i class='fa fa-envelope'/> Contact Us</i></a></li> </ul>
</div>
Note:
- Replace # tags with your links
- If you want change color of the icons change the color code :(FFF) in green color
- If you want to change font size , change the size where (18) in red color
- If you want hover back ground color change the color code :(red) in brown color
No comments:
Post a Comment