I have gotten a couple of questions asking how I do things to my blog. Codes, design, all of that stuff. And I love sharing that with you guys, so today I am going to show you how I do that. As part of my little page, Techie Stuff. Where you can find a lot of different little gadgets to help spice up your blog.
Today I am showing you all how to add floating social media buttons, just like the ones I have on LovelyParis Designs' website. (
Click here to see them live!). I love these because they aren't really in your way, but there so you can see them all the time and on every page. So people won't just see them on your home page, but wherever they go on your blog. So now I'm going to show you guys how it is done!
1. Go to Template > Back Up/ Restore > Back Up your template, just in case!
2. Go to the Template tab again> Edit HTML> Find the code </head> and paste this code right below that:
<div class='social-top' style='font-style: normal;'>
<div><li class='social1'><a href='YOUR FACEBOOK URL'><img class='social-image' height='40px' src='http://i1157.photobucket.com/albums/p595/whimsicalblogs/emma-fb.png' width='40px'/></a></li></div>
<div>
<li class='social1'><YOUR TWITTER URL'><img class='social-image' height='40px' src='http://i1157.photobucket.com/albums/p595/whimsicalblogs/emma-twitter.png' width='40px'/></a></li></div>
<div>
<li class='social1'><a href='YOUR INSTAGRAM URL'><img class='social-image' height='40px' src='http://i1157.photobucket.com/albums/p595/whimsicalblogs/emma-instagram.png' width='40px'/></a></li></div>
<div>
<li class='social1'><a href='YOUR PINTEREST URL'><img class='social-image' height='40px' src='http://i1157.photobucket.com/albums/p595/whimsicalblogs/emma-pinterest1.png' width='40px'/></a></li></div>
<div>
<li class='social1'><a href='mailto:YOUR EMAIL HERE'><img class='social-image' height='40px' src='http://i1157.photobucket.com/albums/p595/whimsicalblogs/emma-email.png' width='40px'/></a></li></div>
</div>
3. Once you paste that, go to the Template Tab again and this time go to Customize.
4. Go to Advanced> Add CSS, paste this code, click enter, and then click "Apply to Blog"
/* SOCIAL MEDIA ICONS
------------------------------------------------------------------
*/
.social-top {
padding-top: 10px;
margin-right: 16px;
position: fixed;
padding: 0px;
z-index: 10;
margin-top: 80px;
top: 100px;
left: 10px;
clear:both;
float:left;
}
#floatingicons2{
position: fixed;
top: 100px;
left: 10px;
padding: 0px;
z-index: 10;
margin-top: 80px;
}
.social-top li {
display: inline-block;
width: 40px;
height: 40px;
background-color: #000;
border-radius: 150px;
color: white;
border: 0px solid #fff;
}
.social1 {
padding-bottom: 0px;
padding-bottom: 0px;
}
.social-image {
height: 40px;
width: 40px;
margin-bottom: 10px;
}
.social-top li.social1:hover {
background-color: #feebe7;
border: 1px solid #fff;
color: #000;
}
.social-top li.twitter:hover {
background-color: #cccccc;
color: #000;
}
.social-top li:hover a {
color: #000;
}
.social-top a {
display: block;
line-height: 40px;
text-align: center;
width: 100%;
height: 100%;
color: white;
}
To change the colors of the buttons:
TO CHANGE THE BACKGROUND COLOR OF THE BUTTONS.
CHANGE HOVER BACKGROUND COLOR.
I hope that you guys find this post helpful and that it works well for you all! Enjoy and I will see you guys next time!
