WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Social Sliding Icons

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1Accespted Social Sliding Icons Sat Dec 18, 2010 5:53 pm

Emilio

Emilio
Registered Member
Registered Member
Social Sliding Images
Sliding icons using JavaScript


Today I'll show you to put some social icons that slides out on your website. You've maybe seen on many websites or blogs that they have a twitter or facebok icons to keep socializing. Here is how we do that and how it works.

Social Sliding Icons Demo4

The CSS: Place the Css between the <head></head>
Code:
<style type="text/css">
body {
   background: #FFF;
   margin: 0;
   padding: 0;
   font: 10px normal Verdana, Arial, Helvetica, sans-serif;
   color: #444;
}

ul#socialicons {
    position:bottom;
    margin: 15px;
    padding: 5px;
    top: 10px;
    left: 90px;
    list-style: none;
    z-index: 999;
opacity:.90;
filter:alpha(opacity=90);
filter: “alpha(opacity=90)”;
}
ul#socialicons li {
    width: 10px;
}
ul#socialicons li a {
    display: block;
    margin-right: 30px;
    width: 35px;
    height: 32px;   
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center center;
    border:0px solid #AFAFAF;
   
}
ul#socialicons .facebook a{
    background-image: url('http://cdn5.iconfinder.com/data/icons/socialmediaicons_v120/32/facebook.png');
}
ul#socialicons .twitterl a      {
    background-image: url('http://cdn5.iconfinder.com/data/icons/socialmediaicons_v120/32/twitter.png');
}


</style>

The Html + Javascript: Place that after the <body>

Code:
<script type="text/javascript" src="http://wirrickss.webs.com/Sliding%20Icons.js"></script>

Put this after the Javascript
Code:
<ul id="Socialicons">
 <li class="facebook"><a href="YOURLINK" title="Be Fan"></a></li><br>
 <li class="twitterl"><a href="YOURLINK" title="Follow me on Twitter!"></a></li><br>
</ul>

Put this Script before the </body> tag
Code:
<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-30px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-20px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-30px'},200);
                    }
                );
            });
        </script>

Icons more transparent

To make the icons more transparent you can change the Opacity.

opacity:.90; filter:alpha(opacity=90); filter: “alpha(opacity=90)”;

The Red Numbers say how transparent the icons are.
If you want for example that the icons are 50% visible you quickly change it into :

opacity:.50; filter:alpha(opacity=50); filter: “alpha(opacity=50)”;

And thats how the visiblity of the icons work.

Adding More Social Icons:

To add more icons like Myspace, Digg, Rss, ...
Just add this to the rest of your "Socialicons" ID

Code:
<li class="CLASS FOR CSS HERE"><a href="YOURLINK" title="TITLE HERE"></a></li><br>

And put this to your css

Code:
ul#socialicons .CLASS NAME HERE a      {
    background-image: url('ICON LINK HERE');
}

Don't forget to add class names , icon image links and titles!

Have a great day!

Get More Icons

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://www.graphilicious.forumotion.Com

2Accespted Re: Social Sliding Icons Sat Dec 18, 2010 6:03 pm

verrell123

verrell123
Registered Member
Registered Member
THAT'S GREAT Emilio!

It very use for me!

http://www.freshartz.co.cc/

3Accespted Re: Social Sliding Icons Sat Dec 18, 2010 9:43 pm

ankillien

ankillien
Administrator
Administrator
Nice tutorial Smile

You showed how to customize it but didn't explain how it works!

4Accespted Re: Social Sliding Icons Sat Dec 18, 2010 10:02 pm

Guest


Guest
Great tut Smile
Twitted Wink

5Accespted Re: Social Sliding Icons Sat Dec 18, 2010 10:06 pm

ankillien

ankillien
Administrator
Administrator
Emilio, are those codes written by you? or you found them on some other site?

6Accespted Re: Social Sliding Icons Sat Dec 18, 2010 10:20 pm

Emilio

Emilio
Registered Member
Registered Member
I found the Javascript file to slide them , And played around
And decided to make a social sliding Thingy

http://www.graphilicious.forumotion.Com

7Accespted Re: Social Sliding Icons Sun Dec 19, 2010 1:21 am

Matti

Matti
Registered Member
Registered Member
Nice tutorial.

http://csshelp.forumotion.net/

8Accespted Re: Social Sliding Icons Tue Dec 21, 2010 8:27 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Good work Emilio and good idea to! Smile

http://woops.dk

9Accespted Re: Social Sliding Icons Tue Dec 21, 2010 9:49 pm

Guest


Guest
Could we have an demo? I'm too lazy to set it up myself Razz

10Accespted Re: Social Sliding Icons Tue Dec 21, 2010 10:02 pm

Guest


Guest
Saxaca wrote:Could we have an demo? I'm too lazy to set it up myself Razz

Take a look at the first post.. Crying or Very sad

11Accespted Re: Social Sliding Icons Wed Dec 22, 2010 9:55 pm

Emilio

Emilio
Registered Member
Registered Member
Saxaca wrote:Could we have an demo? I'm too lazy to set it up myself Razz

http://www.creative-labz.com/h10-social-icons

http://www.graphilicious.forumotion.Com

12Accespted Re: Social Sliding Icons Thu Dec 23, 2010 1:12 am

Guest


Guest
Oh lol.
Well, after seeing that.. i think i'm off to set it up! Very Happy

13Accespted Re: Social Sliding Icons Sun Dec 26, 2010 4:42 pm

blade99

blade99
Registered Member
Registered Member
i cant understand where should i put this? xD can you explain properly?

http://dreamland.canadianforum.net/

14Accespted Re: Social Sliding Icons Sun Dec 26, 2010 5:39 pm

Guest


Guest
thats not a tutorial only forum forums,but for websites.
If you want to use it for forums then thats a different way to do it.

15Accespted Re: Social Sliding Icons Sun Dec 26, 2010 9:34 pm

ankillien

ankillien
Administrator
Administrator
Tutorial Accepted

Thanks for the contribution Emilio Smile

16Accespted Re: Social Sliding Icons Fri Dec 31, 2010 9:42 pm

blade99

blade99
Registered Member
Registered Member
can you put where we should put it?

http://dreamland.canadianforum.net/

17Accespted Re: Social Sliding Icons Sat Jan 01, 2011 11:17 pm

ankillien

ankillien
Administrator
Administrator
blade99 wrote:can you put where we should put it?

Put those codes in an HTML page and it will work.

18Accespted Re: Social Sliding Icons Sun Jan 02, 2011 10:52 am

blade99

blade99
Registered Member
Registered Member
in html page only?

http://dreamland.canadianforum.net/

19Accespted Re: Social Sliding Icons Sun Jan 02, 2011 11:00 am

ankillien

ankillien
Administrator
Administrator
blade99 wrote:in html page only?

Yes, it will work on HTML page.

If you want it on your forum, then add the codes in templates. If you want to know where to add, first you need to decide where you want it to show up and then you should learn some basic HTML so you can understand the templates Smile

20Accespted Re: Social Sliding Icons Sun Jan 02, 2011 12:23 pm

blade99

blade99
Registered Member
Registered Member
i liked to put in forum tell me where templates where to put.

http://dreamland.canadianforum.net/

21Accespted Re: Social Sliding Icons Sun Jan 02, 2011 9:44 pm

ankillien

ankillien
Administrator
Administrator
blade99 wrote:i liked to put in forum tell me where templates where to put.

I already answered you...

first you need to decide where you want it to show up and then you should learn some basic HTML so you can understand the templates

Please do not expect spoon feeding. You should try learning something. We can't help with coding well unless you understand at least the basics.

22Accespted Re: Social Sliding Icons Mon Jan 03, 2011 6:34 pm

Guest


Guest
ankillien wrote:We can't help with coding well unless you understand at least the basics.

yeah Very Happy

23Accespted Re: Social Sliding Icons Tue Jan 04, 2011 5:04 pm

blade99

blade99
Registered Member
Registered Member
where should i actually apply them i know in html pages but i want to appear it on forum...

http://dreamland.canadianforum.net/

24Accespted Re: Social Sliding Icons Wed Jan 05, 2011 8:48 pm

Guest


Guest
blade99 wrote:where should i actually apply them i know in html pages but i want to appear it on forum...

Answer:

ankillien wrote:We can't help with coding well unless you understand at least the basics.
Wink

25Accespted Re: Social Sliding Icons Sat May 14, 2011 1:37 pm

lordadmer

lordadmer
Registered Member
Registered Member
wow! nice can you share the live preview?

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Social Sliding Icons

Permissions in this forum:
You cannot reply to topics in this forum