The forum of the forums
Welcome on the Forumotion Support Forum.

To take full advantage of everything offered by our forum, please log in if you are already a member or join our community if you're not yet....



Create a free forum like this one.
Touch Social 5 5 9

Touch Social

The forum of the forums :: Other Services :: Graphic Design Section :: Gallery :: Buttons

View previous topic View next topic Go down

Touch Social

Post by DadyKing on January 30th 2012, 9:31 am



Touch Social






Tutorial of adding codes in your admin panel




Font: Calibri

Font Size: 20pt, Sharp

Image:

Creation File:






CSS
Code:

 
        #takip {
            position: fixed;
            right: 0;
            top: 220px;
            z-index: 999;
        }
        .takip {
        background-image: url('http://i49.servimg.com/u/f49/16/79/78/79/social17.png');
        background-repeat: no-repeat;
        height: 42px;
        width: 42px;
        top: 100px;
        margin-left: auto;
        opacity:0.3;
        filter:alpha(opacity=50); /* For IE8 and earlier */
        }
        .takip:hover {
        background-image: url('http://i49.servimg.com/u/f49/16/79/78/79/social17.png');
        cursor: pointer;
        opacity:1;
        filter:alpha(opacity=100); /* For IE8 and earlier */
        }
       
        .facebook {
            background-position: 0px 0px;
        }
        .twitter {
            background-position: 0px -42px;
        }
        .Google {
            background-position: 0px -84px;
        }
        .Youtube {
            background-position: 0px -126px;
        }
        .rss {
            background-position: 0px -168px;
        }
       



HTML
Code:

  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Social Media Buttons</title>
        <script src="dkthemes.forumotion.in/38797.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $(".takip").mouseover(function(){
              $(this).filter(':not(:animated)').animate({width:135},{duration:500});
        });
        $(".takip").mouseout(function(){
            $(this).animate({width:42});
        });
        });
        </script>
       
       
        <div id="takip">
            <div class="facebook takip" onclick="location.href='http://www.facebook.com/'">
            </div>
            <div class="twitter takip" onclick="location.href='http://www.twitter.com/'">
            </div>
            <div class="Google takip" onclick="location.href='http://www.flickr.com/'">
            </div>
            <div class="Youtube takip" onclick="location.href='http://www.friendfeed.com/'">
            </div>
            <div class="rss takip" onclick="location.href='http://www.vimeo.com/'">
            </div>


Last edited by DadyKing on February 1st 2012, 9:23 am; edited 12 times in total

DadyKing
Forumotion Member

Male
Posts: 228
Age: 23
Language: english
Location: mumbai
Points: 471
Join date: 2010-07-19

http://www.mobitehk.com/

Back to top Go down

Re: Touch Social

Post by upestana_ on January 30th 2012, 9:40 am

Brilliant 10/10

upestana_
Forumotion Member

Posts: 54
Language: English
Points: 73
Join date: 2011-11-23

Back to top Go down

Re: Touch Social

Post by WHITESABBATH on January 30th 2012, 1:25 pm

Superb DK.. rock Adding the "Google+1" button was hitting a home run.

Any chances you'll be doing a set for the left side?

WHITESABBATH
Forumotion Member

Male
Posts: 932
Points: 1960
Join date: 2009-03-28

Back to top Go down

Re: Touch Social

Post by Th1nK on January 30th 2012, 1:48 pm

Fantastic 10/10!

Th1nK
Forumotion Member

Male
Posts: 171
Language: Bulgarian
Location: Secret
Points: 207
Join date: 2011-01-16

http://truck-games.darkbb.com

Back to top Go down

Re: Touch Social

Post by DadyKing on January 30th 2012, 2:48 pm

WHITESABBATH wrote:Superb DK.. Adding the "Google+1" button was hitting a home run.

Any chances you'll be doing a set for the left side?


You just have to replace link with yours, in HTML

DadyKing
Forumotion Member

Male
Posts: 228
Age: 23
Language: english
Location: mumbai
Points: 471
Join date: 2010-07-19

http://www.mobitehk.com/

Back to top Go down

Re: Touch Social

Post by midoweb96 on January 30th 2012, 2:55 pm

very nice work DadyKing .

midoweb96
Forumotion Member

Posts: 154
Language: Css - Html - Jquery
Location: United States of America
Points: 141
Join date: 2011-12-17

Back to top Go down

Re: Touch Social

Post by WHITESABBATH on January 30th 2012, 5:15 pm

DadyKing wrote:
WHITESABBATH wrote:Superb DK.. Adding the "Google+1" button was hitting a home run.

Any chances you'll be doing a set for the left side?


You just have to replace link with yours, in HTML
i understand the coding aspect ..However, if i code these buttons to go on the left side,won't the "icons" be "hidden" (?) until cursored over?

WHITESABBATH
Forumotion Member

Male
Posts: 932
Points: 1960
Join date: 2009-03-28

Back to top Go down

Re: Touch Social

Post by Th1nK on January 31st 2012, 1:23 am

DadyKing can I use them for navbar? Like "Home" and etc. And can you tell me how to add new images?

Th1nK
Forumotion Member

Male
Posts: 171
Language: Bulgarian
Location: Secret
Points: 207
Join date: 2011-01-16

http://truck-games.darkbb.com

Back to top Go down

Re: Touch Social

Post by DadyKing on January 31st 2012, 3:45 am

Th1nK wrote:DadyKing can I use them for navbar? Like "Home" and etc. And can you tell me how to add new images?

You just have to change the image...


and link as well

DadyKing
Forumotion Member

Male
Posts: 228
Age: 23
Language: english
Location: mumbai
Points: 471
Join date: 2010-07-19

http://www.mobitehk.com/

Back to top Go down

Re: Touch Social

Post by FL.ux on January 31st 2012, 3:47 am

soooooo. cool. . .

nice job DadyKing thumright

Very Happy

FL.ux
Forumotion Member

Male
Posts: 842
Age: 16
Language: I hope I could be a FM staff :'(
Location: I shall fly to the subterranean sky.
Points: 763
Join date: 2011-11-13

Back to top Go down

Re: Touch Social

Post by Reva-bosS on January 31st 2012, 3:48 am

very good thanks

Reva-bosS
Forumotion Member

Male
Posts: 262
Language: Greek
Location: Greece
Points: 252
Join date: 2011-09-10

Back to top Go down

Re: Touch Social

Post by Kalimdor on January 31st 2012, 11:34 pm

Cool work DadyKing Smile

Kalimdor
Forumotion Member

Male
Posts: 904
Age: 16
Language: Romanian, English, Français, Español
Location: Romania
Points: 684
Join date: 2011-11-16

http://softdesign.wikiforum.ro/

Back to top Go down

Re: Touch Social

Post by detective sai on February 1st 2012, 12:04 am

great DK
bravo for you

detective sai
Forumotion Member

Male
Posts: 7
Age: 13
Language: indonesia
Points: 9
Join date: 2011-01-30

http://beyourself.forumjonction.com/

Back to top Go down

Re: Touch Social

Post by Th1nK on February 1st 2012, 1:00 am

OK thank you dady and have a very nice day Smile!
PS:
When I hover them they don't move like in the clip! Ideas?

Th1nK
Forumotion Member

Male
Posts: 171
Language: Bulgarian
Location: Secret
Points: 207
Join date: 2011-01-16

http://truck-games.darkbb.com

Back to top Go down

Re: Touch Social

Post by DadyKing on February 1st 2012, 9:24 am

Added Tutorial of how to add codings in forumotion admin panel
http://www.youtube.com/watch?v=W5G2tLDmB-E

DadyKing
Forumotion Member

Male
Posts: 228
Age: 23
Language: english
Location: mumbai
Points: 471
Join date: 2010-07-19

http://www.mobitehk.com/

Back to top Go down

Re: Touch Social

Post by Raizen on February 2nd 2012, 10:49 pm

Cool !! 10/10 Wink

Raizen
Forumotion Member

Male
Posts: 1511
Language: English & Tagalog
Location: Philippines (PH)
Points: 1729
Join date: 2011-04-18

http://forumotionservice.forumotion.com/

Back to top Go down

Re: Touch Social

Post by ReDMaD on February 13th 2012, 9:19 am

Your proposal has been accepted, congratulations!

----------------------------



~~~~~~~~~~



ReDMaD
Graphic Designer
Graphic Designer

Male
Posts: 1435
Language: English - German
Location: Germany ~ Please do not send me PM's for support or graphic requests.
Points: 1817
Join date: 2010-01-28

http://help.forumotion.com

Back to top Go down

View previous topic View next topic Back to top

The forum of the forums :: Other Services :: Graphic Design Section :: Gallery :: Buttons

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