Widodo

Membuat Sosial Media Efek Slide CSS3

Sosial Media

Media sosial adalah sebuah media online, dengan para penggunanya bisa dengan mudah berpartisipasi, berbagi, dan menciptakan isi meliputi blog, jejaring sosial, wiki, forum dan dunia virtual. Blog, jejaring sosial dan wiki merupakan bentuk media sosial yang paling umum digunakan oleh masyarakat di seluruh dunia.

Dalam pembahasanya diatas adalah pengertian sedikit tentang media social, kenapa kok kita bahan media social karna dalam pembahasanya kali ini kami akan memberikan tutorial bagaimana caraa membuat Button Social dengan efek Slide dalam button ini kami memberikan contoh Jejaring sosial yaitu ada facebook twitter, google + dan lain-lain dalam membuat button media social ini cukuplah mudah karna kita hanya main menggunakan CSS3 saja untuk membuat buttonya sedangkan untuk menampilkan Api media socialnya nanti kita akan berikan...

Untuk itu kita akan perlajarin bersama

1. Sekrang kita buka Editor kalian masing-masing dan buatlah Document baru dengan format html

2. Sekarang kita buat style dari button tersebut seperti dibawah ini

 

.slide-social{
    display: inline-block;
    overflow: hidden;
    margin: 0 1em 1em 0;
    width: 9em;
    height: 3em;
    background: #F1F1F1;
    background: rgba(0,0,0,.05);
    position: relative; /* So social buttons don't align with positioned ancestor */
}

.slide-social .ss-button{
    position: absolute;
    top: 1em;
    left: 35%;
}

.ss-icon{
    padding-top: 1em; /* .slide-social{height} - .ss-icon i{height}*/
    width: 25%;
    height: 100%;
    text-align: center;
}

.ss-icon i{
    border-right: 1px solid #FFF; /* IE < 9 Fallback Colour */
    border-right-color: rgba(255,255,255,.3);
    color: #FFF;
    display: block;
    font-size: 1.2em;
    height: 1em;
}

.ss-slide{
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 100%;
    color: #FFF;
    text-align: center;
    font-weight: 600;
    line-height: 3em; /* .slide-social{height} */
    cursor: pointer;
}

/* Brand Colours */

.facebook-bg{
    background: #3b5998;
}

.twitter-bg{
    background: #00acee;
}

.google-plus-bg{
    background: #db4a39;
}

.linkedin-bg{
    background: #0e76a8;
}

.pinterest-bg{
    background: #c8232c;
}

.tumblr-bg{
    background: #35465c;
}

/* Slide Animation */

.slide-social:hover .ss-slide, 
.slide-social .ss-slide:hover{
    -webkit-transform: translate(101%, 0);
    -moz-transform: translate(101%, 0);
    -ms-transform: translate(101%, 0);
    -o-transform: translate(101%, 0);
    transform: translate(101%, 0);
}

.slide-social:hover .ss-icon i{
    border-right-color: transparent;
}

/* Transition */

.ss-slide{
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out 2s;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.slide-social:hover .ss-slide{
    -ms-transition-delay: 0s;
}

/* Example Media Queries */

@media only screen and (max-width : 30em) { /* 480px/16px = 30em */

    .slide-social{
        width: 100%;
    }

    .slide-social .ss-button{
        left: 50%;
    }
}

3. Jika sudah dibuat jangan lupa di panggil stylenya..

4. Sekarang anda tinggal buat Code Htmlnya seperti dibawah ini

<section class="demo-buttons">       
            <!-- Like -->
            <div class="slide-social">
                <div class="ss-button">
                    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fgithub.com%2Fchristophery%2Fslide-social-buttons&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
                </div>
                <div class="facebook-bg ss-icon">
                    <i class="fa fa-facebook"></i>
                </div>
                <div class="facebook-bg ss-slide">Like</div>
            </div>
			
			<!-- +1 -->
            <div class="slide-social">
                <div class="ss-button">
                    <div class="g-plusone" data-size="medium"></div>
                </div>
                <div class="google-plus-bg ss-icon">
                    <i class="fa fa-google-plus"></i>
                </div>
                <div class="google-plus-bg ss-slide">+1</div>
            </div>
			
			<!-- Tweet -->
            <div class="slide-social">
                <div class="ss-button">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://github.com/christophery/slide-social-buttons" data-text="Slide Social Buttons are a fun way to display your social media buttons">Tweet</a>
                </div>
                <div class="twitter-bg ss-icon">
                    <i class="fa fa-twitter"></i>
                </div>
                <div class="twitter-bg ss-slide">tweet</div>
            </div>
			
            <!-- Pin -->
            <div class="slide-social">
                <div class="ss-button">
                    <a href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="https://assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
                </div>
                <div class="pinterest-bg ss-icon">
                    <i class="fa fa-pinterest"></i>
                </div>
                <div class="pinterest-bg ss-slide">pin it</div>
            </div>
			
            <!-- ShareIn -->
            <div class="slide-social">
                <div class="ss-button">
                    <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
                    <script type="IN/Share" data-url="http://christopheryee.ca/slide-social-buttons/"></script>
                </div>
                <div class="linkedin-bg ss-icon">
                    <i class="fa fa-linkedin"></i>
                </div>
                <div class="linkedin-bg ss-slide">share</div>
            </div>
			
			<!-- Tumbl -->
            <div class="slide-social marked-new">
                <div class="ss-button">
                    <div><a href="http://www.tumblr.com/share/link?url='.urlencode(http://meta.bhstudios.org/contact/).'&amp;name=Blue+Husky+Studios&amp;description=Check+out+this+page+from+Blue+Husky+Studios%21" TITLE="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url(http://platform.tumblr.com/v1/share_1.png) top left no-repeat transparent;">share</a></div>
                </div>
                <div class="tumblr-bg ss-icon">
                    <i class="fa fa-tumblr"></i>
                </div>
                <div class="tumblr-bg ss-slide">reblog</div>
            </div>
		</div>
		<!-- END Social Networking Widgets -->

		</section>

Untuk iconya anda bisa mengunakan font-awesome

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 

5. Hampir selesai...

sekarang and tinggal menyimpan code dibwah ini dan simpan di paling bawah atau diatas code </body>

<!-- Twitter JS -->
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

        <!-- Google+ JS -->
        <script>
          (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>

        <!-- Pinterest JS -->
        <script src="https://assets.pinterest.com/js/pinit.js"></script>
		
		<!-- Tumblr JS -->
		<script src="http://platform.tumblr.com/v1/share.js"></script>

 

Download Selesai...



Artikel Terkait

0 Komentar