Gadget Simge Değişimi Dinamik Blogger

Blogger Dinamik görünümlü blog gadget başlık simgelerini değiştirerek, Dinamik blogunuzu özelleştirip farklı bir görünüm elde edebilirsin...

...

Blogger Dinamik görünümlü blog gadget başlık simgelerini değiştirerek, Dinamik blogunuzu özelleştirip farklı bir görünüm elde edebilirsiniz. Dinamik görünümlü bloglarda, çok fazla değişiklik yapma şansımızın olmadığını biliyorsunuz. Bizde Css kodları ile küçük değişiklikler

yaparak Dinamik blogumuzu farklılaştıracağız. Öncelikle kullanacağımız resim linkini hazırlayacağız. Sonra bu resim linkimizi Css kod içine ekeleyerek hangi gadget başlığında çıkması gerektiğine karar vereceğiz.

Okuyun ⇒ Blogger Resim Linkleri Nasıl Alınır

Hazırlayacağınız resim ebadı 50x50 Px. ebatlarında olması gerekiyor. Resimlerinizi hangi ebatlarda kullacağınızı belirleyen resim editörünü kullanabilirsiniz.

⇒ Resim Boyutlandırma Aracı Pixresizer

Web görsellerinden masaüstüne indireceğiniz herhangi bir resmi 50x50 Px. ebatlarında küçülterek de kullanabilirsiniz. Resim seçimi tamamen sizin hayal gücünüze bağlıdır.

Canlı Demo

Gadget resimlerini ekleyeceğiniz Css kodlarını aşağıdan kopyalayarak bir metin editörüne yapıştırın. Daha gelişmiş bir metin editörü için Notepad++ V6.6.7 Metin editörü İndir.

1. 
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img{
display: none !important;
}
2. 
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img{
display: none !important;
} 
3. 
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolyqvnBJH9LYZ61i2G5Cfef6p8MzUdWth6LCjkWni4-sAVFH2yi4OguVPeMocSNm4UonkRYi4N_8Wm-JG9UfjotBeb81ReslM4w-EJJ6B2KUz3gln22rLARoG9WZlSy9SGW-b5Xq-4rA/s1600/adnan.jpg)no-repeat center !important;
}
4. 
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolyqvnBJH9LYZ61i2G5Cfef6p8MzUdWth6LCjkWni4-sAVFH2yi4OguVPeMocSNm4UonkRYi4N_8Wm-JG9UfjotBeb81ReslM4w-EJJ6B2KUz3gln22rLARoG9WZlSy9SGW-b5Xq-4rA/s1600/adnan.jpg)no-repeat center !important;
}

Css Kodunun blog’a eklenmesi :

1. Blogger kumanda paneline giriş yapın.

2. Şablon → Özelleştir → Gelişmiş → Css ekle penceresiniz açın ve yukarıdaki Css kod’unu pencereye ekleyin. Css kodları belirli bir hiyararşi takip ettiğinden kodların altına eklendiğinde bazen çalışmayabilir. Böyle bir durum yaşarsanız Css Kod’unu en üst konuma ekleyin.

CSS eklentisinin özelleştirilmesi :

Yukarıda verdiğim sıra numaraları için açıklamaları takip ederek uygulmaya başlayın.

1. (1.ve 2. no’lu Css kodlar ekleyeceğiniz resimlere stil verir.

2. (3. ve 4. no’lu kodlar Css içinde belirleyeceğimiz resim link ve stilleri belirler.

3. (1.ve 2. no’lu kod içindeki ( type (numara) yazılı kısım gadget’in sırasını belirler.Örneğin gadgetimizde 2 ve 4. numarası gadgetimizin resim sırasıdır.

4. Bu Css kod içindeki mantık şudur. 1. maddedeki resim sırası  type (2)’ile belirtilmiştir.

2. maddedeki resim sırası  type (4)’ile belirtilmiştir.

5. 4 Ad. gadegtinizin olduğunu düşünelim ve siz şu şekilde bir uygulama yapacaksınız

Birinci sıradaki gadget resmi için type kısmına (1) yazacaksınız. Hemen  3. maddeki kısımada

type kısmına (1) yazacaksınız. Birinci sıradaki gadget için hangi resmi ekleyecekseniz renkli gösterdiğim yere resminizi linki ekleyeceksiniz.

6. Yukarıda anlatılan işlemin aynısını, 2 ve 4. maddeler için aynı şekilde uygulayacaksınız.

7. Gadget dökümanınıza sadece bir resim eklemek isterseniz. 1 ve 3. madde kadlarını silin ve gadget sırası ( type (numara) olarak belirtin.

8. Daha fazla gadget resimi eklemek isitiyor iseniz 7. sırada anlatılan silme işlemi rerine kodları bir üst kısma ekleyerek sıra numarası belirtmeniz gerekir.

Anlatılan konuda anlaşılmayan bir yer varsa yorum yazarak yardım alabilirsiniz. Biraz karmaşık gibi görülüyor ancak çok basittir. Özetlersek Resim sırası belirle ve resim linki ekle. tüm mantığı budur.

Dinamik blogger ile ilgili daha fazla bilgiye, menü çubuğundaki Dinamik Blogger isminden ulaşabilirsiniz.

Dinamik blogger gadgetlerinizi sabitleyerek açılır olmasını da engelleyebilirsiniz.

NOT : Kodları alırken rakamlarla birlikte almayın.