Tutorial : Social Icons .

In jos

Tutorial : Social Icons .

Mesaj Scris de struMf la data de Vin Iul 20, 2012 5:59 pm



Salutare Vizitator !

Sa trecem la treaba .

Pasul 1 .
Pentru inceput mergem in :
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS si adaugam urmatorul cod :

Cod:
#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;
            }

Pasul 2 .
Acum trebuie sa adaugam codul HTML, deci mergem in :
Panou de administrare > Afisare > Template-uri > General > overall_footer_end si la sfarsit adaugam urmatorul cod :

Cod:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Social Media Buttons</title>
            <script src="dkthemes.forumotion.com/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>

Tutorial realizat de struMf .







Like a Star @ heaven Absent timp de 20 de zile . Like a Star @ heaven
avatar
struMf
Membru Coding-Help

Numarul Mesajelor : 224
Reputatie de puncte : 478
Inscris din : 19/07/2012
Varsta : 23
Localizare : Constanta .

Vezi profilul utilizatorului http://coding-help.forumz.ro/

Sus In jos

Re: Tutorial : Social Icons .

Mesaj Scris de Lyzzi la data de Vin Iul 20, 2012 7:27 pm

struMf,vreau sa va informez ca tocmai a fost semnalat un abuz asupra acestui tutorial pe motivele ignorari copyright-ului(plagiat) de catre un utilizator.
Acest topic va fi blocat si trimis in cos!
Fiind a treia mustrare ~> Warn


Exclamation Nu ofer suport prin PM Exclamation
Coding-Help
avatar
Lyzzi
Administrator
Administrator

Numarul Mesajelor : 421
Reputatie de puncte : 7384
Inscris din : 15/07/2012
Varsta : 28
Localizare : Satu-Mare

Vezi profilul utilizatorului http://coding-help.forumz.ro

Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum