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

Goto page : Previous  1, 2

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

1Accespted Social Sliding Icons on Sat Dec 18, 2010 4:23 pm

Emilio


Registered Member
Registered Member
First topic message reminder :

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.



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

21Accespted Re: Social Sliding Icons on Sun Jan 02, 2011 10:53 am

blade99


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

http://dreamland.probb.ca/

22Accespted Re: Social Sliding Icons on Sun Jan 02, 2011 8:14 pm

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.

23Accespted Re: Social Sliding Icons on Mon Jan 03, 2011 5:04 pm

Guest


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


yeah Very Happy

24Accespted Re: Social Sliding Icons on Tue Jan 04, 2011 3:34 pm

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.probb.ca/

25Accespted Re: Social Sliding Icons on Wed Jan 05, 2011 7:18 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

26Accespted Re: Social Sliding Icons on Sat May 14, 2011 12:07 pm

lordadmer


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

27Accespted Re: Social Sliding Icons on Sat Jul 23, 2011 12:31 pm

Behavior???


Registered Member
Registered Member
I managed to get this working on my forum, but how can I make this whole thing horizontal, instead of vertical? and How do I center it?

http://www.thedungeons.info

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

Goto page : Previous  1, 2

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

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