ABENK Karaoke: Widget Media Sosial Dibawah Postingan Gaya Geser

Sesuai Dengan Judul diatas :

Letakan ini Diatas ]]></b:skin>

#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;
}

Letakan ini Diatas </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'/>

cari <data:posts.body/> atau <data:post.body/>
dan ganti <data:post.body/> dengan scrip ini

<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/sharer.php?u=" + 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: 'id'};

(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>
</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'/>

</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

DEMO

Widget Media Sosial Dibawah Postingan Gaya Geser

Artikel Terkait

No comments :

Post a Comment

Formulir Kontak