Blog Yazılarına Sosyal Paylaşım Butonları Ekleme

<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
    font-family: 'Fira Sans Condensed', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 30% auto 0 auto;
    text-decoration: none;
}
.tombol-berbagi-btn {
    padding: 10px 20px;
    display: block;
    position: relative;
    height: 43px;
    line-height: 43px;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    margin: 0 20px;
    cursor: pointer;
    text-decoration: none;
}
.tombol-berbagi-btn-fb,
.tombol-berbagi {
    float: left;
    width: 21%;
    padding: 0 10px;
    height: inherit
}
.tombol-berbagi-btn-tw,
.tombol-berbagi,
.tombol-berbagi-lk {
    float: left;
    width: 21%;
    height: inherit;
    padding: 0 10px;
    border-left: solid 1px #dadada;
    text-transform: none;
}
.tombol-berbagi-fb,
.tombol-berbagi-tw,
.tombol-berbagi-gp,
.tombol-berbagi-lin,
.tombol-berbagi-pi {
    float: left;
    display: block;
    background: url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;
    width: 42px;
    height: 41px;
    margin-right: 3px
}
.tombol-berbagi-fb-label {
    color: #2d609b
}
.tombol-berbagi-fb-label,
.tombol-berbagi-tw-label,
.tombol-berbagi-gp-label,
.tombol-berbagi-lin-label {
    float: left;
    width: 58px;
    height: inherit;
    font-size: 12px;
    font-family: 'Open Sans Bold', Arial, sans-serif;
    line-height: 14px;
    margin: 5px 0 0 4px;
    text-transform: none;
}
.tombol-berbagi-tw {
    background-position: 0 -43px
}
.tombol-berbagi-tw-label {
    color: #00c3f3
}
.tombol-berbagi-gp {
    background-position: 0 -86px
}
.tombol-berbagi-gp-label {
    color: #f00
}
.tombol-berbagi-lin {
    background-position: 0 -129px
}
.tombol-berbagi-btn a {
    color: #999;
    transition: all .3s;
    text-decoration: none;
}
.tombol-berbagi-btn a:hover {
    color: #7cb0ed
}
@media only screen and (max-width: 640px) {
    .tombol-berbagi,
    .tombol-berbagi-btn-fb {
        display: inline-block;
        float: none;
        width: 48%;
        padding: 0;
        height: inherit
    }
    .tombol-berbagi,
    .tombol-berbagi-btn-tw,
    .tombol-berbagi-lk {
        float: left;
        width: 48%;
        padding: 0;
        border-left: 0
    }
}
</style>
</head>
<body>
<div class='tombol-berbagi-btn'>
    <div class='tombol-berbagi-btn-fb'>
        <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' />
        <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Paylaş Facebook</a>
    </div>
    <div class='tombol-berbagi-btn-tw'>
        <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' />
        <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Paylaş Twitter</a>
    </div>
    <div class='tombol-berbagi'>
        <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' />
        <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Paylaş Google+</a>
    </div>
    <div class='tombol-berbagi'>
        <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' />
        <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Paylaş LinkedIn</a>
    </div>
</div>
</body>
</html>

Kodeks Editör

Blog Yazılarına Sosyal Paylaşım Butonları Ekleme

"Blog Yazılarına Sosyal Paylaşım Butonları Ekleme" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Blog Yazılarına Sosyal Paylaşım Butonları Ekleme

"Blog Yazılarına Sosyal Paylaşım Butonları Ekleme" 0 Yorum yapıldı.

Yorum Gönder