Dinamik Blogger görünümlü blogların kullanabileceği Sosyal paylaşım sitelerinin paylaşım butonları ile okuyucularınızın blogunuzu takip e...
Dinamik Blogger görünümlü blogların kullanabileceği Sosyal paylaşım sitelerinin paylaşım butonları ile okuyucularınızın blogunuzu takip edebileceği Takip Et eklentisi. Takip etme sosyal paylaşım butonlarını blogunuza iki aşamada ekleyerek nasıl çalışır duruma getireceğinizi adım adım inceleyelim. Daha gelişmiş bir metin editörüne ihtiyacınız varsa Notepad++ son ücretsiz sürümü buradan indirebilirsiniz.
DEMO
Klasik Blogger içi ⇒ Blogger transparan sosyal paylaşım eklentisi
Sosyal paylaşım kodlarının yerleştirilmesi :
Klasik Blogger içi ⇒ Blogger transparan sosyal paylaşım eklentisi
Sosyal paylaşım kodlarının yerleştirilmesi :
1. Blogger kumanda paneline giriş yapın.
2. Sırası ile, Yerleşim → Gadget ekle → Metin gadget’ini açın.
3. Aşağıda verilen kodları ekleyin. Sosyal ağlarda kullandığınız isimler ile kod içindeki, # mavi renkli yerleri doldurun. Bu işlem için bir metin dosyası kullanmanız önerilir.
4. En alt kısımda kırmızı renkli " adnan " ismini kendi RSS isminiz ile değiştirin.
4. En alt kısımda kırmızı renkli " adnan " ismini kendi RSS isminiz ile değiştirin.
<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>
1. Blogger kumanda paneli Şablon ismine tıklayın.
2. Sırası ile, Özelleştir → Gelişmiş → CSS ekle penceresini açın.
3. Aşağıda verilen kodları ekleyin.
HTML-Kodu:(Tarayıcı Dil Çeviriyi Orj.Konuma Alın)
/*------ Gadget Doc Ağ İconu G59P------*/
.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background:url(http://4.bp.blogspot.com/-_ukr6aF4zg0/U-1V6QfHytI/AAAAAAAAasM/iV38BJzQovQ/s1600/wizard.png)no-repeat center !important;
}
/*------ Gadget Doc Container Rengi G59P------*/
.gadget-selected, .gadget-content, .text-widget-content, .ss{
background-color: LightCyan !important;
}
/*------ Gadget Doc Title Rengi G59P------*/
.gadget-container .gadget .gadget-title {
text-decoration: none !important;
color:#009eb8;
}
.gadget-container .gadget .gadget-title:hover {
color: white !important;
transition: color 0.3s ease-in-out 0s !important;
}
.gadget-selected .gadget-title {
color: white !important;
background-color: rgba(251, 8, 40, 0.8) !important;}
/*------ Social Bar G59P------*/
.social-icons-box {
margin: 10px 0;
width: auto;
line-height: 1.2em;
}
.social-icons-box img {
background: linear-gradient(#00AEB5 14%, #0F99A0 75%) repeat scroll 0 0 #00D1D8;
border-radius: 3px;
height: 40px;
margin: 0 4px;
transition: all 300ms linear 0s;
width: 40px;
}
.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;}
.text-widget-content {
text-align: center;
height: 310px;
width: 180px;
padding: 0px 18px;
}
CSS Kod özelleştirme :
1. Gadget Doc Ağ İconu : Parantez içindeki (1) gadget sıra numaranızı belirtir. kaçıncı sıraya gadget’i ekleyeceksiniz eklediğiniz sıra numarasını yazın. İcon resmi o sırada görülecektir. Her iki parantez içindeki numara aynı olması gerekir.
2. Gadget Doc Container Rengi : color: LightCyan, renk ismini farklı kullanabilirsin.
3. Gadget Doc Title Rengi : Gadget başlık kırmızı açıklama arkaplan rengidir. Color: #009eb8; Siz onaltılık farklı bir renk kullanabilirsiniz.
4. Social Bar : Yükseklik : height: 310px, değeri 320 px. değerini geçmeyecek şekilde olabilir.
Genişlik width: 180px : Eklediğiniz metin gadget genişliğini de değiştirdiğinden uygun kullanım için değer çok düşürülmemiştir. Farklı bir metin gadget’i kullanmıyor iseniz değeri 100 px. düşürebilirsiniz.
5. Kırmızı olarak belirtilen resim linkidir. İstediğiniz bir resim linki kullanabilirsiniz. Resim ebatları 50x50 px değerinde ayarlanmıştır. S1600 yazan değeri, S40 px. olarak değiştirmenizde mümkündür.NOT: Sosyal paylaşım butonları içinde kullanmadığınız mevcut ise aşağıda örnek verilen resim içindeki kod kısmını kaldırabilir veya aynı yere farklı bir paylaşım iconu ekleyebilirsiniz.
Dinamik Blogger sağ, açılır gadget içindeki sihirbaz şapkasına tıklayarak inceleyin.
Not: CSS kodları bir hiyararşi takip ettiğinden CSS kod ekleme penceresinde en üst kısma ekleyin. İlgili temanızda çalışmama durumunda sadece en üstteki ( /*------ Gadget Doc Ağ İconu G59P------*/ ) satırı silin ve en alttaki şu ( } ) işaretten sonra enterleyin ve blog'unuzu kaydedin.
Hiç yorum yok
Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.