Sosyal Medya Blogger İzleme Düğmeleri

Sosyal Medya Blogger İzleme Düğmeleri - Blogger siteleri için güzel sosyal medya takip düğmeleri. Facebook, Twitter, Google Plus, Pinterest ve Blogger gibi takip ve izleme düğmeleri ile blogunuzun sosyal medya widget'ini oluşturun.

Blogger Sosyal Medya Widget'i Nasıl Oluşturulur?

Aşağıdaki blogger yönelgelerini takip ederek blogger sitesinize sosyal medya takip widget'i oluşturabilirsiniz.

Ön İzleme

1- Blogger hesabınıza giriş yapın blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

#be {
    list-style: none;
    text-decoration: none;
    font-size: 0.9em;
    font-family: trebuchet ms, sans-serif;
}
#be a {
    text-decoration: none;
    font-family: trebuchet ms, sans-serif;
}
#be li {
    position: relative;
    height: 38px;
    cursor: pointer;
    padding: 0 !important;
}
#be .facebook,
.googleplus,
.pinterest,
.rss,
.twitter {
    position: relative;
    z-index: 5;
    display: block;
    float: none;
    margin: 10px 0 0;
    width: 210px;
    height: 38px;
    border-radius: 5px;
    background: url(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.png) no-repeat;
    background-color: rgba(217, 30, 118, .42);
    -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    -moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    color: #141414;
    text-align: left;
    text-indent: 50px;
    text-shadow: #333 0 1px 0;
    white-space: nowrap;
    line-height: 32px;
    -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
}
#be li:after {
    position: absolute;
    top: 0;
    left: 50px;
    z-index: 2;
    display: block;
    height: 38px;
    color: #141414;
    content: attr(data-alt);
    line-height: 32px;
}
#be .icon {
    overflow: hidden;
    color: #fafafa;
}
#be .facebook {
    width: 32px;
    height: 32px;
    background-color: rgba(59, 89, 152, 0.42);
    background-position: 0 0;
}
#be .twitter {
    width: 32px;
    height: 32px;
    background-color: rgba(64, 153, 255, 0.42);
    background-position: 0 -33px;
}
#be .googleplus {
    width: 32px;
    height: 32px;
    background-color: rgba(228, 69, 36, 0.42);
    background-position: -3px -66px;
}
#be .pinterest {
    width: 32px;
    height: 32px;
    background-color: rgba(174, 45, 39, 0.42);
    background-position: 0 -95px;
}
#be .rss {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 102, 0, 0.42);
    background-position: -3px -126px;
}
#be li:hover .icon,
.touch #be li .icon {
    width: 210px;
}
.touch #be li .facebook,
#be li:hover .facebook {
    background-color: rgba(59, 89, 152, 1);
}
.touch #be li .twitter,
#be li:hover .twitter {
    background-color: rgba(64, 153, 255, 1);
}
.touch #be li .googleplus,
#be li:hover .googleplus {
    background-color: rgba(228, 69, 36, 1);
}
.touch #be li .pinterest,
#be li:hover .pinterest {
    background-color: rgba(174, 45, 39, 1);
}
.touch #be li .rss,
#be li:hover .rss {
    background-color: rgba(255, 102, 0, 1);
}

2- Blogunuzun kumanda panelinden Yerleşim > Gadget Ekle ve HTML/JavaScript içerisine aşağıdaki kodları kopyalayın ve yapıştırın.

<ul id="be">
    <li data-alt="Bizi Facebook'ta takip et"><a class="icon facebook" href="#" target="blank">Bizi Facebook'ta takip et</a>
    </li>
    <li data-alt="Bizi Google+'da takip et"><a class="icon googleplus" href="#" target="blank">Bizi Google+'da takip et</a>
    </li>
    <li data-alt="Bizi Twitter'da takip et"><a class="icon twitter" href="#" target="blank">Bizi Twitter'da takip et</a>
    </li>
    <li data-alt="Bizi Pinterest'te izleyin"><a class="icon pinterest" href="#" target="blank">Bizi Pinterest'te izleyin</a>
    </li>
    <li data-alt="Bizi Blogger'da izleyin"><a class="icon rss" href="#" target="blank">Bizi Blogger'da izleyin</a>
    </li>
</ul>

3- Kod içerisinde bulunan renkli yerlere sosyal medya sayfalarınızın URL'sini ekleyin ve kaydedin.

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

Sosyal Medya Blogger İzleme Düğmeleri hakkında daha fazla bilgi için iletişim sayfasından yada yorum bölümünden bize ulaşabilirsiniz.