Transparan İconlu G+ Sayfası

Google Plus, Blogger kullanıcılarının hizmetine sunduğu Google+ Sayfa gadget eklentisini JavaScript kodları kullanmadan transparan g+ i...

...

Google Plus, Blogger kullanıcılarının hizmetine sunduğu Google+ Sayfa gadget eklentisini JavaScript kodları kullanmadan transparan g+ icon formatın da HTML ve CSS kodları ile kullanmanız mümkündür. Blog’um hızlı açılsın, çok fazla gadget eklemek istemiyorum, basit bir kod ile Google Plus sayfasını kullanmak istiyorum şeklinde düşünüyorsanız, aşağıdaki anlatılanları uygulamaya başlayabilirsiniz. Uygulamanın basit kodlarını blog'a eklediğinizde yukarıda gördüğünüz resim gibi bir eklentiniz olacak. G+ sayfa iconu transparan olduğundan blog temanıza uyacak renkleri seçerek özelleştirin. Transparan G+ resmini istediğiniz ebatlarda büyütüp küçültün. Transparan İconlu G+ Sayfası için ilgili adımları takip edin.

NOT : Kopyaladığınız kod içindeki resim linkini Google Plus fotoğraflar albümünüzde dosya oluşturarak yükleyip linklerini alarak da kullanabilirsiniz.

Ayrıca okuyun ⇒ Blogger Resim Linkleri Nasıl Alınır

1. Blogger paneline giriş yapın.

2. Yerleşim→ Gadget ekle → HTML/JavaScrip gadget'ini açın ve aşağıdaki kodları ekleyin.

CANLI DEMO

Blogger gadget’inizde kullanacağınız G+ Sayfa eklenti HTML kodları :

<div class='add-banner'>
<div class='social-icons-box text-center clearfix'>
   <a href='https://plus.google.com/+adnanguneyblogspot?prsrc=5' target='_blank' title='Google+ Sayfa'><img alt='google+ sayfa' src='https://lh6.googleusercontent.com/-bN0OxlSgGV4/U6y6XqmV5eI/AAAAAAAAZ18/YUFofPdVVgk/s40-no/icon-google.png'/></a>
</div></div>

Özelleştir :
1. Mavi işaretli yerdeki linki kendi Google plus sayfa linki ile değiştirin.
2. Kırmızı ile belirtilen bölüm transparan resim linklerinizdir.
3. Resim linkindeki S40 rakamını istediğiniz bir rakam ile büyütüp küçültebilirsiniz.
4. Kod üzerinde yapacağınız çalışmaları gadget içinde yapmayın. Metin dosyasında gereken değişimi yaptıktan sonra gadget de kullanın.

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

3. Background : Satır hizasındaki renk kodlarını istediğiniz bir renk ile değiştirin. Mevcut renk yeşildir. (%) Yüzdeleri artırıp eksiltebilirsiniz.

Renk değişimi için ⇒ Hex renk bulucuyu okuyun.