How to position my floating bar a little bit higher and align my social media buttons?


#1

Hello, i’ve added social icon buttons to the left sidebar on my blog although they’re not well aligned and I would like to have a few bits of spaces between them. How can I achieve that? Note: There’s already space between each social media code, but that only leaves a little bit of space I want to add more space

Also, I want to position my floating bar a little bit higher. How do I do that, as I dont understand it’s code.

Would appreciate it a lot if anyone can help a newbie out like me, thanks

Blog’s URL: www.theticblog.com


#2

Firstly, remove the already placed widget code (Follow Us widget) and place this code:

<a class="tictac" href="http://www.facebook.com/theticblog"><img alt="Like us on Facebook" src="http://i.imgur.com/97j7Z2K.png" width="50px"></a>
<a href="https://twitter.com/TheticBlog" class="tictac"><img alt="Follow us on Twitter" src="http://i.imgur.com/RAcoBA6.png" width="50px"></a>
<a href="https://plus.google.com/+Theticblog1/posts" class="tictac"><img alt="Follow us on Google Plus" src="http://i.imgur.com/kTXSiEq.png" width="50px"></a>
<a href="https://instagram.com/theticblog/" class="tictac"><img alt="Follow us on Instagram" src="http://i.imgur.com/QCew8d6.png" width="50px"></a>
<a href="http://ask.fm/theticblog" class="tictac"><img alt="Ask us an question on AskFM" src="http://i.imgur.com/PTvacul.png" width="50px"></a>

Now, for adding space, add this code just below the widget code I given above:

<style>
    .tictac {margin-right:7px;}
</style>

So, it would create space between all images in the widget. You can change the space size by editing the value in margin-right in the above code.

Now, find this code in your template:

#pageshare {
    position: fixed;
    bottom: 15%;
    right: 935px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
    padding: 0 0 2px 0;
    z-index: 10;
}

and replace it with this one:

#pageshare {
    position: fixed;
    bottom: 25%;
    right: 1188px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
    padding: 0 0 2px 0;
    z-index: 10;
}

And then save your template. Done! :smile:


#3

The social bar spacing worked but sadly the social floating bar didn’t :frowning: That was also a widget btw, not in template I replaced the floating bar code you provided me with the similar code in widget and still didn’t work. Thanks very much.

P.s: I removed the floating bar as it’s annoying so no need to help me out furthermore, you have my gratitude thanks alot mate :slight_smile: