Header Ads

  • Breaking News

    Super Social Widget



    Još jedna u nizu odličnih widgeta za blog ili sajt. Lako se instalira i super funkcioniše. 


    Live Demo


    Idemo kao i uvek: 

    Templates > Edit HTML 
    Nadjite  ]]></b:skin> i odmah iznad, dodajte sledeći kod

    ul#icon-socialmn{float:right}ul#icon-socialmn li{float:left;display:inline-block;position:relative}ul#icon-socialmn li a{background-image:url(http://3.bp.blogspot.com/-JWxzfuPXWDQ/ULykR51IjoI/AAAAAAAABfk/GUjrfkEH7hc/s1600/team-social-icons.png);background-repeat:no-repeat;display:block;width:40px;height:47px;text-indent:-9999px;-webkit-transition:background .2s ease-out;-moz-transition:background .2s ease-out;-o-transition:background .2s ease-out;transition:background .2s ease-out}ul#icon-socialmn li.social-twitter a{background-position:4px 7px}ul#icon-socialmn li.social-twitter a:hover{background-color:#2DAAE1}ul#icon-socialmn li.social-facebook a{background-position:-25px 7px}ul#icon-socialmn li.social-facebook a:hover{background-color:#3C5B9B}ul#icon-socialmn li.social-google a{background-position:-54px 7px}ul#icon-socialmn li.social-google a:hover{background-color:#F63E28}ul#icon-socialmn li.social-rss a{background-position:-85px 7px}ul#icon-socialmn li.social-rss a:hover{background-color:#FA8C27}ul#icon-socialmn li.social-linkedin a{background-position:-116px 7px}ul#icon-socialmn li.social-linkedin a:hover{background-color:#0173B2}ul#icon-socialmn li.social-dribbble a{background-position:-146px 7px}ul#icon-socialmn li.social-dribbble a:hover{background-color:#F9538F}ul#icon-socialmn li.social-pinterest a{background-position:-176px 7px}ul#icon-socialmn li.social-pinterest a:hover{background-color:#CB2027}


    "Save" template i to je prvi deo
    Widget izgleda otprilike ovako, zavisi od bloga i šablona jer neće isto izgledati na svakom blogu, nemojte se iznenaditi ako vam izgleda drugačije. Ako želite još ikonica, potražite na net-u, postoji pregršt sajtova za ikonice.


    Sada dodajte ovaj kod bilo gde, gde želite da vam se widget pojavi.

    <div dir="ltr" style="text-align: left;" trbidi="on"><ul class="sociico" id="icon-socialmn"><li class="social-twitter" style="background-color: black;"><a href="Your Link Here" target="_blank">twitter</a></li><li class="social-facebook" style="background-color: black;"><a href="Your Link Here#" target="_blank">facebook</a></li><li class="social-google" style="background-color: black;"><a href="Your Link Here" target="_blank">google</a></li><li class="social-rss" style="background-color: black;"><a href="Your Link Here" target="_blank">rss</a></li><li class="social-pinterest" style="background-color: black;"><a href="Your Link Here" target="_blank">pinterest</a></li></ul></div>

    Ako želite da zamenite pozadinu, vidite gde piše "black" zamenite bilo kojom vašom bojom a ako ne želite nijednu odnosno transparentno, samo sklonite ovo style="background-color: black;" gore podvučeno sivom bojom. 
    Dodajte vaše URL adrese i to je sve. 

    No comments

    Post Top Ad

    Post Bottom Ad