Let the Social Media Roll
Account Status: All
Theme: All
Actions: Social Media Icons with Hover Roll
If you'd like to see the social icons spin check out the icons on the sidebar. These images will not work on a post unless you have a paid account but the will work on the sidebar of any account type. I suspect LJ doesn't let image classes work in non-paid accounts.
1. Let's get the images. I'm including the blank image so if need be you can create your own social media icon which I did do with the bloglovin icon.
Go to: Social Media Icons @Layout Lounge for more icons
Next the coding for you blurb/free text box on your sidebar.
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. The coding for the images:
You can make as many of these links as you like. I would suggest keeping them on ONE line. This ensures they are on one line when they show up on your sidebar. After you've put in all the social media icons you wish to use, save your sidebar changes.
4. Next we need to add some coding to your Custom CSS Layout. Above I gave all the links the class of social-roll which means I need to represent this in the coding. This applies to any social media icon you add. Again I like putting these in the sidebar section of the coding since it will end up on the sidebar.
.social-roll {
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-roll:hover {
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
5. Save your Customized Coding changes and then refresh your journal to see the effect.
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 Roll
If you'd like to see the social icons spin check out the icons on the sidebar. These images will not work on a post unless you have a paid account but the will work on the sidebar of any account type. I suspect LJ doesn't let image classes work in non-paid accounts.
1. Let's get the images. I'm including the blank image so if need be you can create your own social media icon which I did do with the bloglovin icon.
Go to: Social Media Icons @Layout Lounge for more icons
Next the coding for you blurb/free text box on your sidebar.
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. The coding for the images:
You can make as many of these links as you like. I would suggest keeping them on ONE line. This ensures they are on one line when they show up on your sidebar. After you've put in all the social media icons you wish to use, save your sidebar changes.
4. Next we need to add some coding to your Custom CSS Layout. Above I gave all the links the class of social-roll which means I need to represent this in the coding. This applies to any social media icon you add. Again I like putting these in the sidebar section of the coding since it will end up on the sidebar.
.social-roll {
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-roll:hover {
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
5. Save your Customized Coding changes and then refresh your journal to see the effect.
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.