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.

Comments

comments

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Read more:
Football Manager 2013

Ati auzit de Football Manager 2013? Este un joc pe pc (varianta aia clasica, cu instalare si jucat, nu cea...

Cum transpiri?

Nu înțeleg cum naiba transpir? Dorm acoperit cu plapumă groasă, că-i frig. De obicei dorm pe stânga, dar transpir pe...

De ce au roșiile gust diferit?

O întrebare pe care mi-am adresat-o de multe ori: "De ce au roșiile gust diferit?". De fapt, nu neapărat gust...

Close