Header Ads

  • Breaking News

    Flipboard Stil, Social Media Widget


    Flipboard ili buttons, ( dugmad) kako već, se okreću kada kliknete, to je čisto radi estetike. Takodje možete i ovo "Connect With Us" da zamenite na primer, "Budimo u kontaktu" i slično, malo samo mašte i sve je ok. Ovo plavim slovima ispisano, neće se videti naravno a imate i search box, to je najvažniji deo svega. 
    Uverite se i sami kako izgleda, lepo je i korisno:

    Live Demo


    Znate kako da uzmete kod: Za one koji ne znaju, samo kliknite na <> i otvoriće vam se pop-up box, kopirajte kod i past u HTML box u layout

    <style type="text/css">
    #flipboard_btrix{ width:300px;}
    ul.flipboard_btrix{
    margin:0;
    padding:0;
    list-style:none;
    -webkit-perspective: 10000px; 
    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
    }
    ul.flipboard_btrix li{
    display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial; 
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    }
    ul.flipboard_btrix li a{
    display:block;
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
    outline: none;
    -webkit-transition:all 300ms ease-out 0.1s; 
    -moz-transition:all 300ms ease-out 0.1s;
    -o-transition:all 300ms ease-out 0.1s;
    transition:all 300ms ease-out 0.1s;
    }
    ul.flipboard_btrix li a span{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 5px; 
    display:block;
    width: 100%;
    height: 100%;
    -webkit-transition:all 300ms ease-out 0.1s;
    -moz-transition:all 300ms ease-out 0.1s;
    -o-transition:all 300ms ease-out 0.1s;
    transition:all 300ms ease-out 0.1s;
    }
    ul.flipboard_btrix li a img{
    border-width: 0;
    }
    ul.flipboard_btrix li:hover a{
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: #cef1ff; 
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-box-shadow:0 0 5px #eee inset;
    -moz-box-shadow:0 0 5px #eee inset;
    box-shadow:0 0 5px #eee inset;
    }
    ul.flipboard_btrix li:hover a span{
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    #btrix-searchbox {
        border-radius: 5px;
        background: URL(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/s1600/green.png) no-repeat scroll center center transparent;
        width: 290px;
        height: 50px;
        disaply: block;
    }
    form#btrix-searchform {
        display: block;
        padding: 7px 16px;
        margin: 0;
    }
    form#btrix-searchform #s {
        padding-left: 24px !important;
        padding: 7.5px;
        margin: 0;
        width: 198px;
        font-size: 16px;
        font-family: georgia;
        font-style: italic;
        color: #666666;
        vertical-align: top;
        border: none;
        background: transparent;
    }
    form#btrix-searchform
    #sbutton {
        margin: 0;
        padding: 0;
        height: 40px;
        width: 74px;
        vertical-align: top;
        border: none;
        background: transparent;
    }
    
    </style>
    <div id="flipboard_btrix">
    <center>
    <a style="font-size:25px;" >Connect With Us </a>
    </center>
    <br />
    <ul class="flipboard_btrix">
    <li><a href="http://www.pinterest/VAŠ-URL"><img src="http://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
    <li><a href="http://www.facebook.com/VAŠ-URL"><img src="http://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
    <li><a href="https://plus.google.com/VAŠ-URL"><img src="http://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
    <li><a href="http://www.twitter/VAŠ-URL"><img src="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
    <li><a href="http://feeds2.feedburner.com/VAŠ-URL"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
    </ul>
    <div id="btrix-searchbox">
    <form action="/search" id="btrix-searchform" method="get">
    <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
            <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
        </form>
    </div>
    </div>
    

    Zamenite samo vrednosti, vaš url za facebook i ostalo. Prosto. Srećan bloging



    No comments

    Post Top Ad

    Post Bottom Ad