Cara Membuat Tombol Flat Slide Social Share

Baca Juga

Kali ini saya akan membantu sobat blogger semua bagai mana cara membuat Flat Slide Social Share dan langsung saja akan menjelaskan bagaimana cara membuatnya.

Lankah-langkah membuat Flat Slide Social Share

Pasang kode CSS di bawah ini tepat diatas ]]></b:skin>

/* Slide Share */
#button-count-share {
    width: 100%;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    padding: 3px;
}

#button-count-share span {
    float: left;
    position: relative;
    font-size: 13px;
    color: #fff;
    margin: 12px 5px 12px 5px;
}

.button-share {
    background: #dce0e0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    overflow: hidden;
    width: 140px;
    margin: 4px;
    border-radius: 3px;
}

.ikons {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    text-align: center;
}

.ikons i {
    color: #fff;
    line-height: 33px;
}

.slide-share {
    z-index: 2;
    display: block;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 108px;
    margin: 0;
}

.slide-share p {
    font-family: Verdana;
    font-weight: 400;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 14px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
    margin: 0;
}

.button-share .slide-share {
    transition: all 0.4s ease-in-out;
}

.facebook .fb_iframe_widget {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 1;
}

.twitter iframe {
    left: 50px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}

.google #___plusone_0 {
    width: 90px!important;
    top: 10px;
    right: 5px;
    position: absolute;
    display: block;
    z-index: 1;
}

.facebook .ikons,.facebook .slide-share {
    background: #4f79bc;
}

.twitter .ikons,.twitter .slide-share {
    background: #63cef2;
}

.google .ikons,.google .slide-share {
    background: #f36261;
}

.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {
    left: 180px;
    opacity: 0.6;
}
<!-- Flat Slide Share End -->

Copy script dibawah ini, lalu tempelkan diatas code </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Kemudian Copy dan Paste code HTML dibawah ini tepat diantara area post sebelum code <data:post.body/>

<div class='clear'/> <div id='button-count-share'> <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i> <div class='slide-share'> <p>Share</p> </div> <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/> </div> <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i> <div class='slide-share'> <p>Like</p> </div> <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/> </div> <div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i> <div class='slide-share'> <p>G+</p> </div> <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/> <script type='text/javascript'> window.___gcfg = {lang: &#39;id&#39;}; (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i> <div class='slide-share'> <p>Tweet</p> </div> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a> <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='clear'/> </div> <div class='clear'/>

Terakhir simpan pekerjaan anda dan lihat hasilnya pada blog anda, dan semoga artikel ini dapat bermanfaat bagi para pembaca dan sobat blogger semua.