19.04.2015.

Dodavanje "Floating Sharing" Widgeta

Dodavanje dugmadi "Floating Sharing" (Dugmad za deljenje na drustenim mrezama)


Ukoliko zelite da korisnici podele neki vas post na drustvenim mrezama na sto laksi nacin (Facebook, Twitter, Google+ ..) ovo je prava stvar.

Kroz par koraka cu objasniti kako da dodate ovaj vrhunski widget.

dodavanje-gadzeta-na-blog


Korak #1: Idite na Sablon > Izmeni HTML 

dodavanje-widzeta


Korak #2: Pronadjite(Ctrl+F) ]]></b:skin tag i nalepite ispod njega kod.


floating-sharing-gadzet

gadzeti-za-blogger


ul.turnoverbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.turnoverbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.turnoverbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background:   transparent; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.turnoverbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

Korak #3: Sada nadjite </body> i nalepite ispod njega sledeci kod.


dodavanje-widzeta-blogger

<ul class='turnoverbuttons second'>
<li><a href='https://www.facebook.com/vasprofil'><span><img src='http://1.bp.blogspot.com/-QNjU7EuYWSY/U3zimEKVtFI/AAAAAAAAERM/LVXokaVW_Eg/s1600/facebook.png'/></span></a></li>
<li><a href='http://twitter.com/vasprofil'><span><img src='http://3.bp.blogspot.com/-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/b/vasprofil'><span><img src='http://4.bp.blogspot.com/-ZMIdv_IxQlw/U3zimfqx9GI/AAAAAAAAERQ/xzB1yFyp0jE/s1600/googleplus.png'/></span></a></li>
<li><a href='http://www.pinterest.com/vasprofil'><span><img src='http://4.bp.blogspot.com/-rgp0AzBzgOY/U3zimS-oIUI/AAAAAAAAERU/hwzlDAaKOOQ/s1600/pinterest.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/vasprofil'><span><img src='http://4.bp.blogspot.com/-ZVuhm2wRtnY/U3zioPrWl4I/AAAAAAAAERk/1njD2YSEzA8/s1600/rss.png'/></span></a></li>
  <li><a href='http://www.youtube.com/vasprofil'><span><img src='http://4.bp.blogspot.com/-_CT4jELC91g/U3zio7xqBlI/AAAAAAAAER0/ZXWbhvsxG8s/s1600/youtube.png'/></span></a></li></ul>

Korak #4: Ostaje samo da zamenite istaknute linkove sa vasim profilima, sacuvate i to je to !!!


0 komentara:

Постави коментар