Blogger transparan sosyal paylaşım eklentisi

Blogger temanızda gadget olarak kullanabileceğiniz Transparan Sosyal paylaşım düğmeleri. Sosyal paylaşım eklentimiz iki farklı kodlamadan ...

...

Blogger temanızda gadget olarak kullanabileceğiniz Transparan Sosyal paylaşım düğmeleri. Sosyal paylaşım eklentimiz iki farklı kodlamadan oluşuyor. Blogger kumanda paneline gadget olarak ekleyeceğiniz HTML kodları ve eklediğiniz HTML kodlarına stil veren CSS kodlarından oluşmakta. Yapmanız gereken işlem, aşağıda verilen kodları gelişmiş bir metin dosyası olan Notepad++ içine yapıştırıp, kişisel bilgilerinizi değiştirmek, veya bilgisayarınızda bulunan mevcut metin dosyasını da kullanabilirsiniz. Öneri : Kopyaladığınız kod içindeki resim linklerini Google Plus fotoğraflar albümünüzde dosya oluşturarak yükleyip linklerini alarak kullanabilirsiniz.
Ayrıca okuyun ⇒ Blogger Resim Linkleri Nasıl Alınır

Blogger gadget’inizde kullanacağınız sosyal paylaşım eklenti HTML kodları :

<div class='add-banner'>
<div class='social-icons-box text-center clearfix'>
   <a href='http://www.facebook.com/#' target='_blank' title='Facebook'><img alt='facebook' src='https://lh4.googleusercontent.com/-MLh-WgsKdfI/U6xLDCdJxII/AAAAAAAAZ0Q/Xa104fm1Q6k/s40-no/icon-fb.png'/></a>
   <a href='http://twitter.com/#' target='_blank' title='Twitter'><img alt='tweeter' src='https://lh5.googleusercontent.com/-zGLTCWkiB7k/U6xL8ZtlYpI/AAAAAAAAZ0o/du66305LH34/s40-no/icon-tweeter.png'/></a>
   <a href='http://www.linkedin.com/in/#' target='_blank' title='Linded In'><img alt='linked in' src='https://lh6.googleusercontent.com/-n_4ZVnU5AlA/U6xMzBIF_PI/AAAAAAAAZ04/bddEzL-hCa0/s40-no/icon-in.png'/></a>
   <a href='http://www.youtube.com/user/#' target='_blank' title='You Tube'><img alt='you tube' src='https://lh6.googleusercontent.com/-Ih-ytjVjSfo/U6xNXv-_scI/AAAAAAAAZ1I/kOYb-WR24ng/s40-no/icon-you-tube.png'/></a>
   <a href='http://feedburner.google.com/fb/a/mailverify?uri=adnan&loc=en_US' target='_blank' title='RSS'><img alt='rss' src='https://lh3.googleusercontent.com/-gkMJJsqZB6g/U6xN6jn6A1I/AAAAAAAAZ1Y/f7XSah4IPWs/s40-no/icon-rss.png'/></a>
</div></div>

Özelleştir :
1. # Bu işaretin olduğu yerlere kullandığınız sosyal paylaşım isimlerinizi ekleyin.
2. Kırmızı ile belirtilen bölüm transparan resim linklerini ifade eder.
3. Alt kısımda feedburner satırın devamındaki “ uri=adnan “ ismini kendi Feedburner isminiz ile değiştirin. FeedBurner ile ilgili buradan bilgi edinebilirsiniz.
4. Resim sırası ve bağlantıyı değiştirmek veya kullanmadığınız paylaşım düğmesini kaldırmak için ; ( <a href ile başlayan ve ….. < /a> ile biten kapanış etiketine kadar olan kısmı seçin silin veya bir alt kısma yapıştırarak sırasını değiştirin.
“Bu işlemleri Gadget içinde yapmayın. Metin dosyasına ana kalıbı yapıştırıp yedekleyin. Bir metin test dosyasında gereken değişimi yaptıktan sonra gadget de kullanın normal çalışıyor ise kaydedin.”
Gadget içine eklediğiniz HTML kodlarına CSS kodları ile Stil vermek için :
1. Blogger kumanda paneline giriş yapın. Şablon kodlarınızı açın ve aşağıdaki kodu bulun. Blogger Şablon içindeki kod’u nasıl bulacağınızı inceleyin.

]]></b:skin>

2. Yukarıdaki kodu bulduğunuzda hemen üst kısmına aşağıdaki CSS Sosyal paylaşım stil kodlarını yapıştırın ve blog'unuzu kaydedin.

/*------ Social Bar G59P------*/
.social-icons-box {
    margin: 10px 0;
    width: auto;
}
.social-icons-box img {
    background: linear-gradient(#00AEB5 14%, #0F99A0 75%) repeat scroll 0 0 #00D1D8;
    border-radius: 3px;
    height: 30px;
    margin: 0 4px;
    transition: all 300ms linear 0s;
    width: 30px;
}
.social-icons-box img:hover {
    background: linear-gradient(#00D1D8 14%, #05B3BA 75%) repeat scroll 0 0 #00D1D8;
    transition: all 400ms linear 0s;
    z-index: 10000;
}
.sb-blog{display: none !important;}

Transparan Sosyal paylaşım butonlarını, yeşil'in tonlarında artık kullanabilirsiniz.