Seo Teknikleri ve Blog İpuçları

Blogger Renkli Etiketler Eklentisi

Share:
blogger-renkli-kategoriler-kodu

 Blogger renkli etiketler eklentisi - Blog sayfamda kullandığım ve bir kaç kişinin sorduğu bir eklentiydi. Etiketler liste halinde sıralandığında her etiket için ayrı bir renk vererek şık bir görünüm katar. Etiketlerin üzerinde mause ile gezince renklerin harekete geçtiğini göreceksiniz. Eğer her etiketteki kayıt sayısını göster derseniz kayıt sayısı verilen renge bürünür. Blog sayfanızda etiketleri kullanıyorsanız bu eklenti hoşunuza gidecektir. Sadece etiketlerin hepsini seçmek yerine belli başlı en fazla 10 etiket seçerek kategorilemek daha iyi görünecektir.

renkli-kategoriler-görünüşü

 Renkli etiketler eklentisini blog sayfanıza uyarlamak için Tema> HTML'yi Düzenle alanında ctrl+f yardımıyla </head> kodunu aratarak hemen üstüne aşağıdaki kodu ekleyin ve kaydedin. Daha sonra Gadget Ekle üzerinden etiketler eklentisini gerekli ayarları yaparak ekleyin.

<style type="text/css">

/* Renkli Kategori CSS */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:2px;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{background:#45a2db;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper .label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper .label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px 8px;text-align:center}
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;transition:all .3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label li:hover,#footer-wrapper .Label li span:hover {color:#fff;text-decoration:underline}
</style>

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

8 yorum:

  1. Güzel bir eklenti gerçekten. Benim de bloğunuzda gördüğümden beri hoşuma gidiyordu. Teşekkürler paylaşım için :)

    YanıtlaSil
    Yanıtlar
    1. Bazı temalarda var amagenelde soruyorlardı nasıl yaptın diye..Bende yabancı bir blog sayfasında görünce paylaşayım dedim.

      Sil
  2. Yıllar önce ben de kullanmıştım. Gerçekten bloga ayrı bir hava katıyor. Şimdi tekrar görünce kafamda farklı şeyler canlandı. Yapabilirsem bir şeyler deneyeceğim :)

    YanıtlaSil
    Yanıtlar
    1. Eklentiler sayesinde daha özel ve profesyonel bir görünüm kazanıyoruz. Ziyaretçiler geldiğinde olumlu bir iz bırakmak için sevdiğim eklenti. Fikir olduysa ne güzel.

      Sil
  3. Paylaşım için teşekkür ederim. Benim blog da etiketler fazla olduğu için en son renk olan mavi den sonra diğer etiketlerim hep mavi renk oldu. Eğer kod üzerinde değiştirmemiz gereken yer varsa söyleyin yoksa böyle de kalabilir sıkıntı yok yani.

    YanıtlaSil
    Yanıtlar
    1. Etiketlerinin hepsini eklemen sayfa hızını yavaşlatır zaten..En genel başlıkları seçerek ekle bence. 10 tane etiket sıralasan yeterli..13' kadar farklı renk gösteriyor geriye kalanın hepsi aynı renk olur.

      Sil
    2. Sağolasın kolay gelsin.

      Sil
  4. Ellerine ve emeğine sağlık arkadaşım güzel bir paylaşım olmuş.

    YanıtlaSil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.

Seo ve Blog ipuçlarını alarak daha fazla ziyaretçi ve en yüksek verimi hedefleyin.