Butoane social media animate

Nu știu pe câți dintre voi i-ar interesa să-și facă blogul mai animat. Probabil nu pe mulți. Însă mie mi-a păsat și-am reușit. Am pus butoane media animate.
În primă instanță am căutat pe net niște gifuri animate. N-am găsi nici să mă bați. Poate alții au mai mult succes. Le urez baftă.
După ce-am CUMPĂRAT un plugin de așa ceva, am descoperit că nu merge. Un plugin făcut de un românaș. N-am dat decât 4 dolari, nu mă plâng. Măcar am luat niște poze mișto.
social-media-buttons

Însă ajutorul mi-a venit din partea unui web developer, un american, Brad Knutson.
Omul a publicat la el pe blog cum să faci vreo 3-4 feluri de butoane media interactive. Însă eu, fiind tufă de Veneția la css, php, html and stuff, n-am reușit.
Apoi mi-a explicat omul ca la proști cum să fac. Pas cu pas, băbește. Până am reușit într-un final. Am pus butoanele media de ies în relief când treci cu mouseul peste ele.

Adică așa cum le am în sidebar:
Mie-mi plac, sunt drăguțele. Mai există vreo două sau trei feluri, însă astea m-au atras cel mai mult. (Am scos codul din post că se damblagise ceva p-aici, sunt noob la coding, am mai spus…)

Și dacă vreți și voi să le puneți, urmași pașii de mai jos.
1) Să știți calea către toate iconițele social media pe care le puteți folosi. În cazul meu, calea e .
Nu uitați, când puneți undeva calea, să puneți musai și http:// în față!
2) În fișierul style.css trebuie să scrieți codul de mai jos, în secțiunea de sidebar.

 .social-popout {

height: 45px;
width: 45px;
margin: 9px;
float: left;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.social-popout img {
border-radius: 50%;
margin: 8px;
width: 100%;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.social-popout img:hover {
margin: 0px;
box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}

Secțiunea de sidebar înseamnă partea de cod unde este definit sidebarul. În style.css sunt toate definite, headerul, sidebarul, footerul etc.
În cazul meu, am pus codul după:

/* sidebar(primary) Begin */

#sidebar{width:378px;margin-right:-378px;float:left;}
.container-sidebar-left #sidebar{width:100%;margin-right:0;}
.content-full-width #sidebar{display:none;}
#sidebar .widget{margin:10px 10px 17px;clear:both;}
.widget .widget_primary_title{padding:7px 10px;margin:0 0 15px;font-size:17.5px;line-height:20px;background:#73a53e;color:#fff;position:relative;font-weight:normal;}
.widget .widget_primary_title a{color:#fff;}
.widget .caret{position:absolute;left:2em;bottom:-5px;border-top: 5px solid #73a53e;border-right: 5px solid transparent;border-left: 5px solid transparent;}
.widget ul{margin:0 10px;}
.widget ul>li{list-style:none;margin-bottom:5px;padding-bottom:5px;border-bottom:1px dashed #c9c9c9;}
.widget a{color:#484848;}

Adică după liniile de cod ce-mi definesc sidebarul.
3) În widgets, puneți un widget cu text, în care definiți butoanele și calea lor.
În cazul meu, codul este:

<a href=”http://www.facebook.com/Spanac.eu” target=”_blank”><div class=”social-popout”> <img src=”http://spanac.eu/poze/facebook-bun.png” height=”45″ width=”45″> </div></a>

Și asta-i tot. ar trebui să vă apară butoanele în sidebar, exact cum îmi apar și mie. În caz că nu vă descurcați, dați-mi de veste și vă ajut.

De altfel, puteți vizita și postul lui Brad, poate el e mai coerent în explicare decât mine.
CSS animated media buttons.

Aceasta postare a fost citita de 2279 ori !

Comments

comments

There are 8 comments left Go To Comment

  1. Buculesei /

    Sunt dragute si usor de pus in functiune :). Felicitari 🙂

    1. Spanac / Post Author

      Merci frumos. Le pui și tu?

  2. Dobre Petronel /

    Le-as fi pus si eu dar sunt mai tufa de venetia decat tine, am citit explicatia ta de 5 ori si tot nu m-am lamurit cum sa pun butoanele alea animate. :))

    1. Spanac / Post Author

      Îți explic mai pe larg. Dă-mi un mail folosind butonul roșu din sidebar. 🙂

      1. Dobre Petronel /

        Ok mersi. O sa-ti trimit probabil peste cateva zile. Acum stii cum e, mai are si omu treaba si nu vreau sa-ti rapesc din timp stand sa-mi explici mie.Plus ca am vreo 600 de mailuri necitite pe putin, trebe’ si acolo oleaca de ordine.

        1. Spanac / Post Author

          Te ajut oricând cu plăcere.

  3. Lisa /

    La fel sunt şi eu, din păcate, nu prea pricep nimic, de aceea am avut nevoie mereu de ajutoare oricând a fost nevoie de orice tip de coduri 🙂

  4. Pingback: Tema asta e mai lată decât cea veche și arată mai bine. /

Leave a Reply