Blogger Hover Etiket Bulutu Gadget Eklentisi

Hover CSS Bulut görünümlü Kategori
Blogger blogunuzda farklı etiket kategorisi kullanarak, Hover CSS Bulut görünümlü etiket stilini blogunuza uygulayıp, değişik bir hava verebilirsiniz.Hover CSS Bulut etiketi yazılarımıza verdiğimiz etiketlerden oluşmaktadır. Etiket Gadgetimizi ekledikten sonra blog şablonumuza ekleyeceğimiz küçük bir kod ile, etiketlerin üstüne gelindiğinde hareket eden, tıklandığında renk değiştiren ve istediğiniz büyüklük ayarını yapabileceğiniz çok güzel bir eklentidir.
Eklentiyi birkaç aşamada kullanabilmemiz eklentiyi dahada özelleştiriyor.
Eklenti uygulaması :
1. Blogunuzun şablon yedeğini alın. İki türlü yedek alınır lütfen bilgi edinin.
2. Blog yerleşim ayarlarından Etiketler (Labels) Gadgetine tıklayın.
Gadgetleri açtığınızda en alttan 3. sırada yer almakta
3. Etiket (Label) Gadgetini aşağıda resimde görüldüğü gibi ayarlayın.

Seçilenler, sıklığa göre ve Bulut kısmını işaretleyin. Seçilenler kısmını açıp etiketlerinizden istediklerinizi seçerek tam bir kategori görünümüne döndürebilirsiniz.


Anlatılan konunun CANLI DEMOSU’ nu inceleyin.
Etiketler (Label) Gadgetini yapılandırın
4. Yapacağımız uygulamada iki tür görüntü elde edebiliriz. Siz hangi görseli beğeniyorsanız aşağıda açıkladığım stili uygulayabilirsiniz.
a. Font Size 10 Px değerini yükselterek görünümün büyük olmasını sağlayabilirsiniz. 

Örnek : px 10 değeri, 15 veya 20 yapabilirsiniz. Etiketler bu uygulamadan sonra biraz daha büyüyecektir. Örnek büyütülmüş hali yukarıdaki resimdir.
b. Etiket değerini değişmeden kullanabilirsiniz. (10 px ebadındaki görüntü)


Label (Etiket) Font Size Kaldırılmamış görünüm

c. Font Size 10 px silerek blogger değerlerini kullanabilirsiniz. (Örnek resim aşağıda görülmekte.)
Font Size sildiğinizde blog etiketlerinizdeki yazı fazlalığına göre, etiket sayısı artacağından etiket çevresi genişleyecektir.
Label (Etiket) Font Size Kaldırılmış görünüm
5. Blog paneline giriş ⇒ Şablon ⇒ HTML Düzenle ⇒ Widget Genişlet ve aşağıdaki kodu bulun
]]></b:skin>
Bu kodu bulduktan hemen sonra aşağıdaki kodu kopyalayın ve bu kodun hemen üstüne yapıştırıp kaydedin.
Blog görüntüleme kısmından inceleyin ve stil olarak hangisi hoşunuza gidiyorsa Font Size ile değişikler yaparak kullanın. Görsellerin siyah görülmesinin nedeni test blogumda siyah tema kullanmamdan kaynaklanmaktadır. Siz hangi temayı kullanıyorsanız, o reng de görünüm sağlayacaksınız.

.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}
Problem yaşarsanız yorum yazarak yardım alabilirsiniz.

Yorumlar

  1. Bu yorum bir blog yöneticisi tarafından silindi.

    YanıtlaSil
    Yanıtlar
    1. @Mustafa DERTLİ
      Bey blogger yazan resme tıklayın ve orda işaretli olanları sizde işaretleyerek kullandığınızda etiektler görülmeye başlayacaktır.Verilen CSS kdolar bu düzünde yapılmıştır.Hotom bir veri işaretlemesidir.Verideki hatayı size söyler.Bunları bir deneyin tekrar görüşelim.

      Sil
    2. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    3. @Mustafa DERTLİ
      Bey liste olmayacak etiket bulutu olacak.Kodu eksiksiz aldığınıza eminmisiniz.Birde verilen kodu şuraya ekleyin.Ancak eski yerinden önce silin.Şablon >Gelişmiş> Css ekle kısmında en alta ekleyin. } şu işaretten sonra enterleyin ve blog'u kaydin kesin olması gerekir.

      Sil
    4. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    5. @Mustafa DERTLİ
      bey etiketleri seçince haty düzeltmek için temanızı yeniden yükleyebilirsiniz.Addthis paylaşım sol altta yanlış eklemişsiniz.body kodunun üstüne eklemissiniz.Onu kaldırın Addthis sitesinden gadget olarak ekleyin.Kod çakışmasıda yapabilir.Blogunuzda şimdi gördüm.Bende teşekkür ederim.

      Sil
    6. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    7. @Mustafa DERTLİ
      Bey söylediklerimi yapmamıssınız ki! Sol alt kısımda Addthis kodu halen duruyor.Sol üst kısımda > bu işaret bir kodu eksik eklediğinizde çıkar.Yada işaretin arası açık olduğunda çıkar.Yani kodu islememişsiniz.Head etiketinde eklediğiniz hangi kod ise o da yanlış ve ya eksik.Şablonu yedekledikten sonra aynı şablonu yeniden kurmanız gerekli.Bu hatalar o zaman hepsi yok olur.

      Sil
    8. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    9. @Mustafa DERTLİ
      Bey merhaba.Ne demek hiç sorun değil.Önemli olan sorunu çözmek.Ancak sorunu çözmediniz.Sildikleriniz tamam görülmüyor.Ancak şablonu geri yükleyerek hatayıda geri yüklemiş oldunuz.Şablonda fazla bir özellik yok.Sıfırdan şablonu yükleyeceksiniz.Yani yedekten yüklemeden.Sıfır şablon.Şablon yeni yüklendiğinde içindeki hatalar kalkar ve yenilenir.Şu anda yapamazsanız bana söyleyin hemen ben halledim.Ama sizin yapmanızı isterim.Her zaman yaşayacağınız bir konu.Bilmeniz benim için daha çok önemli.Öbür türlü ezber işi yapmış oluruz.Hiçbir anlam ifade etmez.Yapmak için değil sizin bilmeniz açısından önemli bu.Bekliyorum.Bozun sorun değil ben hemen kurarım size merak etmeyin.Korkmayın.

      Sil
  2. Bu yorum bir blog yöneticisi tarafından silindi.

    YanıtlaSil
    Yanıtlar
    1. @Mustafa DERTLİ
      Google drive kurulumunda hata olabilir.Drive kaldırın tekrar kurun.Bu hata bazen oluşabiliyor.Google sunucularında bazı çalışmalar yapılmakta zaman zaman bu hataları alabilirsiniz.Sonucu bildirirseniz memnun olurum.

      Sil
    2. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    3. @Mustafa DERTLİ
      Bey şablonu simenize gerek yoktu.Şablon şu anda iyi.

      Sil
    4. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    5. @Mustafa DERTLİ
      Etiketler hata vermiyor.Blogunuzda yaptım onları zaten.

      Sil
    6. Bu yorum bir blog yöneticisi tarafından silindi.

      Sil
    7. @Mustafa DERTL
      Bey şu anda blogunuzda Google scherama veri işlemci çalışmakta.Bu nedenle etiketleri gizleme işlemi yapmayın.

      Sil
  3. Bu yorum bir blog yöneticisi tarafından silindi.

    YanıtlaSil
    Yanıtlar
    1. @Mustafa DERTLİ
      Evet, eskisi gibi değil blog şablonuna birçok veri işlemciler çalışıyor.Arada yazdıklarımı takip edebilirseniz yazıları görebilirsiniz.

      Sil

Yorum Gönder