Blog Hazır Sosyal Paylaşım Butonları İconlu

2/29/2016
Blog Hazır Sosyal Paylaşım Butonları İconlu

Blog Hazır Sosyal Paylaşım Butonları İconlu - Blog için çok önemli olan sosyal paylaşım butonları teknolojinin gelişmesi ile farklı boyutlara ulaştı. Bir çok blog yazarları blogunu geliştirmek ve göze hoş görünen bir blog tasarlamak ister. Bazı bloglarda çok büyük sosyal paylaşım butonları vardır. Bazıları sayfa üzerinde çıkan ve ziyaretçilerin çok rahatsız olduğunu butonlardır. Önemli olan ziyaretçileri rahatsız etmek değil, ziyaretçilere rahat bir site içi dolaşımı sağmak hem blogunuz için hem de google tarafından rahat anlaşılır bir blog olması blogunuzun değerini artırmaktadır.

Blogger Blogspot Sosyal Paylaşım Butonları


Sizinle paylaşmış olduğum bu butonlar ziyaretçilerinizi rahatsız etmeden ve blogunuzu kasmadan rahatça kullanabilirsiniz.

1- Blogger kumanda paneline giderek Tema > HTML Düzenle ve CTRL+F yardımıyla </head> kodunu buluyoruz ve hemen bir satır üstüne aşağıdaki kodu ekliyoruz.

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

2- CSS kodlarını eklemek için (sizin style dosyalarınız nerede ise oraya ekleyin) ]]></b:skin> yada </style> kodunu yine CTRL+F yardımıyla buluyoruz ve aşağıdaki kodu ekliyoruz.

/* CSS Tooltip */
.share-tooltip {
    position: relative;
    display: inline-block;
}
.share-tooltip:before,
.share-tooltip:after {
    position: absolute;
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
}
.share-tooltip:hover:before,
.share-tooltip:hover:after {
    opacity: 1;
}
.share-tooltip:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 4px solid transparent;
    position: absolute;
}
.share-tooltip:after {
    content: attr(data-share-tooltip)!important;
    background: #494158;
    color: #fff;
    padding: 6px 8px;
    font-size: 11px!important;
    font-family: 'Open Sans'!important;
    white-space: nowrap;
    border-radius: 2px;
    -webkit-backface-visibility: hidden;
    margin-left: initial;
}
.share-tooltip-top:before {
    bottom: 140%;
    left: 10%;
    margin: 0 0 -9px 0;
    border-top-color: #494158;
}
.share-tooltip-top:after {
    bottom: 125%;
    left: 10%;
    margin: 0 0 3px -10px!important;
}
/* CSS Share Button */

.share-post {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px 0;
}
.widget .post-body > .share-post ul {
    padding: 0;
}
.share-post li {
    float: left;
    margin: 0 1%;
    width: 18%;
    padding: 0;
    list-style: none;
    position: relative;
}
.share-post li a {
    padding: 6px 7px 6px 38px;
    color: #fff;
    display: block;
    border-radius: 2px;
    font-size: 13px;
    transition: all 0.6s ease-out;
}
.share-post li a:hover {
    color: #fff;
}
.share-post li .twitter {
    background-color: #19bfe5;
}
.share-post li .facebook {
    background-color: #3b5998;
}
.share-post li .gplus {
    background-color: #d64136;
}
.share-post li .pinterest {
    background-color: #cb2027;
}
.share-post li .tumblr {
    background-color: #304e6c;
}
.share-post li .twitter:hover,
.share-post li .facebook:hover,
.share-post li .gplus:hover,
.share-post li .pinterest:hover,
.share-post li .tumblr:hover {
    color: #fff;
}
.share-post li:last-child {
    margin-right: 0
}
.share-post li .fa:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding: 5.5px 12px;
    font-family: fontawesome;
    text-align: center;
    color: #fff;
    line-height: 20px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    transition: all 0.6s ease-out;
}
.share-post li:hover .fa:before {
    text-shadow: -2px 2px rgba(0, 0, 0, 0.1);
}
.share-post li .fa {
    display: initial;
}
@media only screen and (max-width: 640px) {
    .share-post li a {
        padding: 6px 0 6px 0;
    }
    .share-post li .fa:before {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .share-post li {
        width: 100%
    }
}

3- Şimdi </article> bu kodu buluyoruz ve yine CTRL+F yardımıyla buluyoruz ve aşağıdaki kodu ekliyoruz. Fakat sizin daha önceden kullanmış olduğunuz sosyal paylaşım eklentisini kaldırın ve onun yerine aşağıdaki kodu ekleyin, durum böyle olunca bazı arkadaşlar bu çalışmıyor... yada ben yapamadım gibi sitemde bulunmaktadır.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='share-post'>
        <ul>
            <li>
                <a class='twitter share-tooltip share-tooltip-top' data-share-tooltip='Twitter ile paylaş' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter' />Twitter</a>
            </li>
            <li>
                <a class='facebook share-tooltip share-tooltip-top' data-share-tooltip='Facebook ile paylaş' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook' />Facebook</a>
            </li>
            <li>
                <a class='gplus share-tooltip share-tooltip-top' data-share-tooltip='Google Plus ile paylaş' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus' />Google</a>
            </li>
            <li>
                <a class='tumblr share-tooltip share-tooltip-top' data-share-tooltip='Tumblr ile paylaş' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr' />Tumblr</a>
            </li>
            <li>
                <a class='pinterest share-tooltip share-tooltip-top' data-share-tooltip='Pinterest ile paylaş' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest' />Pinterest</a>
            </li>
        </ul>
    </div>
    <div style='clear:both' />
</b:if>


4- Şablonu kaydet diyoruz ve sosyal paylaşım butonlarımız hazır. Güle güle kullanın.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok