How to Add Social Media Icons with Hover
Dec. 17th, 2014 05:29 pm![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount Status: All
Theme: All
Actions: Social Media Icons with Hover
Requested by:![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
dikana
Source: Icons Set
Trying to get this effect on your sidebar?
This is a very simple code:
You can put this in your blurb section of your sidebar. And by repeating it you'll get a set of social media icons, just put the links one right after another.
However it is possible you want to go from this:
to this:
See Sidebar at![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-community.gif)
workshop_rees <-Because it stopped working in the post but is working in the sidebar of my test journal.
Let's start the process which isn't that hard really.
1. First things first. You need your images. Something you will notice about the images I gave you the link to (source link at the top of post) is that the hover images are separated from the color ones. This doesn't really work. They have to be one image. I'll put a border around them so you can see that the hover image is part of the color image. I did this but essentially this is what you'll look for online.
The reason for this is that the coding doesn't allow for a starting image and then a hover image but it does allow us to move what we are seeing in the image. So the link image is going to be the first 48px by 48px section which is the color image. Then the hover will move and show the second 48px by 48px section which is the hover image we want to see.
So you'll need to decide now what size you want your images to be. These are 48x48 (each double image is 48x96) but if you want smaller you can resize them to 36x36 which means that when you put them together in one image it will be 36x72 (double images together). If I were you I'd look for the hover images online unless you can make icons and can work with programs like Photoshop.
2. We need to set them up on our sidebar. Go to blurb section of your sidebar. Here you will be able to add them to your sidebar.
3. This might seem odd but there are actually no images to put in here. Each social media icon you are adding needs to be put in like this. The class is what will give them an image and hover capabilities.
4. Next we need to add some coding to your Custom CSS Layout. Above I gave the Facebook link the class of facebooklink which means I need to represent this in the coding. This applies to any social media icon you add. So if in the class I'd put tumblrlink then my coding would have to be .tumblrlink to get the coding to work.
Now going back to talking about what the image is showing in the coding: You'll notice that the facebooklink is set to width and height of 48px which is how big these circles are but my full image with hover image is 48px by 96px because it is double height. Right after the FACEBOOK IMAGE link it says top which means it is showing the first 48x48 of the top of the image.
However, you'll notice that in the facebooklink:hover it says the background position is 48px 48px. This is because we want it to start 48pxs down from the top of the image and be 48x48 to show the hover image. Got that?
Oh, extra note... the float coding means that they will appear one right after another so at the end of the step three coding I've added a < br > which ensures anything you want to add after he social media icons will start on the next link. You may need a < br > before the social media coding in step three if you have text before the icons on our sidebar.
5. Once you've saved the links to your sidebar and added this coding to your Custom CSS Coding (I like to stick it where I'm putting it so in my coding it would be in my sidebar section of the coding) and, of course, saved. You should be able to go to your journal, refresh and see the hover effect working. Sometimes there is a slight delay and you'll have to hover over them a second to get them working. But it should do the trick.
Hover Images I created from the source for your convenience.
Please do NOT hotlink these images. Save them to your computer and upload them into your own photo-sharing service.
If you have any questions or require additional help please comment to this post.
Theme: All
Actions: Social Media Icons with Hover
Requested by:
dikanaSource: Icons Set
Trying to get this effect on your sidebar?
This is a very simple code:
You can put this in your blurb section of your sidebar. And by repeating it you'll get a set of social media icons, just put the links one right after another.
However it is possible you want to go from this:
to this:
See Sidebar at
workshop_rees <-Because it stopped working in the post but is working in the sidebar of my test journal.Let's start the process which isn't that hard really.
1. First things first. You need your images. Something you will notice about the images I gave you the link to (source link at the top of post) is that the hover images are separated from the color ones. This doesn't really work. They have to be one image. I'll put a border around them so you can see that the hover image is part of the color image. I did this but essentially this is what you'll look for online.
The reason for this is that the coding doesn't allow for a starting image and then a hover image but it does allow us to move what we are seeing in the image. So the link image is going to be the first 48px by 48px section which is the color image. Then the hover will move and show the second 48px by 48px section which is the hover image we want to see.
So you'll need to decide now what size you want your images to be. These are 48x48 (each double image is 48x96) but if you want smaller you can resize them to 36x36 which means that when you put them together in one image it will be 36x72 (double images together). If I were you I'd look for the hover images online unless you can make icons and can work with programs like Photoshop.
2. We need to set them up on our sidebar. Go to blurb section of your sidebar. Here you will be able to add them to your sidebar.
3. This might seem odd but there are actually no images to put in here. Each social media icon you are adding needs to be put in like this. The class is what will give them an image and hover capabilities.
4. Next we need to add some coding to your Custom CSS Layout. Above I gave the Facebook link the class of facebooklink which means I need to represent this in the coding. This applies to any social media icon you add. So if in the class I'd put tumblrlink then my coding would have to be .tumblrlink to get the coding to work.
Now going back to talking about what the image is showing in the coding: You'll notice that the facebooklink is set to width and height of 48px which is how big these circles are but my full image with hover image is 48px by 96px because it is double height. Right after the FACEBOOK IMAGE link it says top which means it is showing the first 48x48 of the top of the image.
However, you'll notice that in the facebooklink:hover it says the background position is 48px 48px. This is because we want it to start 48pxs down from the top of the image and be 48x48 to show the hover image. Got that?
Oh, extra note... the float coding means that they will appear one right after another so at the end of the step three coding I've added a < br > which ensures anything you want to add after he social media icons will start on the next link. You may need a < br > before the social media coding in step three if you have text before the icons on our sidebar.
5. Once you've saved the links to your sidebar and added this coding to your Custom CSS Coding (I like to stick it where I'm putting it so in my coding it would be in my sidebar section of the coding) and, of course, saved. You should be able to go to your journal, refresh and see the hover effect working. Sometimes there is a slight delay and you'll have to hover over them a second to get them working. But it should do the trick.
Hover Images I created from the source for your convenience.
Please do NOT hotlink these images. Save them to your computer and upload them into your own photo-sharing service.
If you have any questions or require additional help please comment to this post.
layout_lounge
(no subject)
Date: 2014-12-18 11:54 am (UTC)(no subject)
Date: 2014-12-18 09:36 pm (UTC)(no subject)
Date: 2014-12-20 12:20 am (UTC)(no subject)
Date: 2014-12-18 01:41 pm (UTC)Your instructions are so clear, you make it seem so easy, haha. I've tried it and it looks wonderful, just how I wanted. Thanks again! BTW, I'd like to center the icons, how could I do it? I've tried the "center" tag in the blurb code and the "text-aling" feature in CSS, but neither works.
I'm very sorry for bothering you so much, but I appreciate your help a lot. You're the best!
Thanks! :)
(no subject)
Date: 2014-12-18 09:37 pm (UTC)Get back to you soon.
(no subject)
Date: 2014-12-20 12:22 am (UTC)(no subject)
Date: 2014-12-20 10:45 am (UTC)I'm gonna be looking forward more of your awesome tutorials, I'm learning a lot of things thanks to you :D You're even making me love HTML and CSS, haha (and that's pretty laudable, LOL).
Thank you again!! BTW, merry Christmas! Have a wonderful holidays! :)
(no subject)
Date: 2014-12-22 08:05 pm (UTC)Thanks. I have some ideas and I'm so glad I can make it so you love HTML and CSS!
Merry Christmas!
(no subject)
Date: 2014-12-18 03:58 pm (UTC)(no subject)
Date: 2014-12-18 09:43 pm (UTC)