Blogger Renkli Etiket Bulutu

Gönderen Yasin 10 Mart 2009 Salı

Rengarenk etiket bulutu yapmak artık çok kolay. Hemde etiket özgürlüğünüzden ödün vermeden sadece en önemli etiketleri belirlemeniz yeterli...

Etiket bulutu kullanıcılara kaynaklık eder.Sitenize ilk kez helen bir ziyaretçiyi blogunuzun hangi konular üzerien olduğu konusunda kısa bir fikir verir... Fakat etiket sayısınız arttıkça bloggerda sahip olduğunuz etiketler widgetı canınızı sıkabilir. İşte bu harika uygulamayla etiketler konusunda özgür olacaksınız...
İşe koyulalım:)


1. Kodlar

<div style="width: 265px;  background-color: #e5e7db;  text-align: left;  ; font-family: 'Verdana';">
</div>

2. Kodlar
<a style="font-size: 14px; color: #87a800; text-decoration: none;
" href="http://tambirblog.blogspot.com/search/label/programlar">programlar</a>






Önce
Yerleşim>Sayfa öğelerine gelip html/javascript aracını ekliyoruz. Daha sonra 1. Kodu yapıştırıyoruz. Daha sonra 2. kodları istediğimiz kadar kopyalarak 1. koddaki
</div>
kodunun önüne yapıştırıyoruz. (Kaç tane etiket kullanacaksanız o kadar yapıştırın.)

Şimdi bu kodlarda yapmamız gereken ayarlara gelelim...
1. kodda yapmanız gereken ayarlar: Aşağıdaki kırmızı kodları kendinize göre değiştirebilirsiniz.

width: 265px > etiket bulutunun genişliğini ayarlar. 265 i kendinize göre ayarlayabilirsiniz.
background-color: #e5e7db; > kategori bulutumuzun arkaplan resmini ayarlamanızı sağlıyor.
font-family: 'Verdana' > etiketlerinizin fontunu bu kodla ayarlayabilirsiniz.

2. kodda yapmanız gereken ayarlar: Aşağıdaki yeşil kodları kendinize göre değiştirebilirsiniz.

font-size: 14px; > etiketinizin boyutunu belirler.
color: #87a800; > etiketinizin rengini belirler.
http://tambirblog.blogspot.com/search/label/programlar > etiketinizin ismini ve gideceği Url'yi buradan ayarlayabilirsiniz.
programlar > etiketinizin ismini belirleyebilirsiniz.

"*Her bir etiket için 2. kod ayarlarını yapmanız gerekmektedir. 1. kod zaten bir defa kullanılacaktır. 2. kodları 1. koddaki div kodunun önüne yapıştırmayı unutmayın.."


Eğer yapamadıysanız hazır bir örnek sizler için yaptım:
<div style=" background-color: #FFFFFF;  text-align: left;  ; font-family: 'Verdana';">
<a href='http://tambirblog.blogspot.com/search/label/blogger%20templates' style="font-size: 22px; color: #039faf; text-decoration: none;">blogger temaları</a>
<a href='http://www.logiprint.co.uk/en/Printing.html' style="font-size: 12; color: #00CCCC; text-decoration: none;">printing</a>
<a href='http://tambirblog.blogspot.com/search/label/blogger%20templates' style="font-size: 21px; color: #006600; text-decoration: none;">blogger temaları</a>
<a href='http://tambirblog.blogspot.com/search/label/blogger%20templates' style="font-size: 18px; color: #00CCCC; text-decoration: none;">blogger temaları</a>
<a href='http://tambirblog.blogspot.com/search/label/blogger%20templates' style="font-size: 20px; color: #006600; text-decoration: none;">blogger temaları</a>
<a href='http://tambirblog.blogspot.com/search/label/blogger%20templates' style="font-size: 19px; color: #00CCCC; text-decoration: none;">blogger temaları</a>
</div>

http://tambirblog.blogspot.com/
Renk kodlarını bulmakta zorlanmamanız için aşağıda renk kodlarını da verdim. Kolay gelsin....

Yazıyı İmle
Digg Technorati Stumble This Twitthis Del.icio.us Furl Reddit

21 yorum

  1. merhaba,bu anlattığınız konu çok güzel ama ben üstteki smile ekleyin bölümüne bayıldım...hele o sokak afişlerinde isminiz çokkkk hoş olmuş...siz mi yaptınız?benimde böyle birşey yapma şansım olabilirmi?:))

    10 Mart 2009 21:52

     
  2. Yasin Dedi ki,

    evt sizinde böyle bir şey yapma şansınız var sizi hemen bu yazıma alıyım..
    http://tambirblog.blogspot.com/2009/02/photoshop-hic-bu-kadar-kolay-olmamst.html
    umarım iyi vakit geçirirsiniz...:))

    smile ekjle bölümüne benzer bi menü yapımını blogumda anlattım ona da buradan ulaşabilirsiniz...
    http://tambirblog.blogspot.com/2009/03/bloggera-featured-contetnt-eklentisi.html

    10 Mart 2009 22:27

     
  3. Kitap ve Demlik Dedi ki,

    Çok güzel bir çalışma olmuş, benim gibi kodlara kafası basmayanlar için ideal. Sağolasın.

    11 Mart 2009 02:02

     
  4. Yasin Dedi ki,

    Teşekkürler...

    11 Mart 2009 15:32

     
  5. ELİF Dedi ki,

    Arkadaşım ya senden bır rıca isteyebılırmıyım.Şu kopyalama işiyle ılgılı..
    Blogumda ki yazılarımı ve şiirlerımı kopyalanmaya karsı nasıl bır koruma yöntemi tavsıye edersın..şimdiden tşkler...

    11 Mart 2009 20:27

     
  6. Şenay- Doğam Dedi ki,

    Ben nerede yanlıs yaptım anlayamadım. Ekran goruntumu aldım sıze gondermek ıcın , bu bolumden ekleme sansım var mı ?

    16 Mart 2009 17:59

     
  7. Yasin Dedi ki,

    tabi gönderebilirsin...

    16 Mart 2009 18:26

     
  8. Yasin Dedi ki,

    benim yaptığım örneği kopyala yapıştırıp linkleri renkleri ve boyutları değiştirebilirsin...

    16 Mart 2009 18:29

     
  9. Şenay- Doğam Dedi ki,

    Sanırım benım yapamadım sey , etıket ısmıne tıklandıgın da gıdılecek sayfanın belırtılmemesı...

    Bu sayfa o etıketı tıkladıgımda yukarırda gorulen lınkmıdır.

    17 Mart 2009 21:22

     
  10. uzmanamator Dedi ki,

    şeffaf olması için mesela arka planın kodun ne olması gerekiyor acaba ? olabilirmi öyle ?

    7 Nisan 2009 16:50

     
  11. uzmanamator Dedi ki,

    yanlışlıkla iki ## yanyana koydum renk kodu yerine renk kodunu yapıştırıken ve şeffaf oldu arka plan rendimin bunun bir zararı olur mu kodlarıma ?

    7 Nisan 2009 17:05

     
  12. Yasin Dedi ki,

    olmaz sanmıyorum:D

    7 Nisan 2009 17:22

     
  13. elifinmutfagi Dedi ki,

    ehehe uzuuunn ugraşlar sonucu ekledim ama url yi veremedim bir türlü,etiketlere tıklayınca senin siten açılıyor kendine torpil mi yaptın:))

    21 Nisan 2009 22:30

     
  14. Yasin Dedi ki,

    evet siz her etiketi kendinşze göre değiştireceksiniz...:))) ben zaten onu örnek olarak vermiştim
    eğer örneği uyguladıysanız:
    http://tambirblog.blogspot.com/search/label/blogger%20templates bunu değiştireceksiniz...
    kendi etiketinizi ve adresinizi ekleyeceksniz...

    21 Nisan 2009 22:38

     
  15. *yummy city* Dedi ki,

    çok güzel bir paylaşım..işe yarıyor..sağol

    23 Nisan 2009 16:50

     
  16. Haydi mutfağa Dedi ki,

    öncelikle tekrar teşekkürler.bloğunuz harika.
    ben ekledim fakat etiketlerim çok bitişik.aralarını nasıl açabilirim?

    15 Mayıs 2009 09:44

     
  17. Yasin Dedi ki,

    öcelikle etiket bulutunuz çok güzel olmuş:))
    İlk önerim örneğin bedava etiketi yapmışsınız ya bedava yazdığınız yerin önüne ve sonuna iki boşluk bırakın yani:
    > bedava <
    işe yaramazsa ben buralardayım...

    15 Mayıs 2009 11:41

     
  18. EfsaneFenerli Dedi ki,

    resimdede gözükdüğü gibi nasıl yapacaz peki yani bi yerde etiket hemen yanında son konular vb. bu sitede şuanda olan şey

    23 Mayıs 2009 13:40

     
  19. Yasin Dedi ki,

    hayır sadece etiket bulutunu anlattım burada tab menü yapmayı değil...

    23 Mayıs 2009 14:27

     
  20. Usta ya senin sitedeki su allta olan son yazılar son yorumlar onu eklemeyide gostersen bize ?

    31 Mayıs 2009 10:22

     
  21. Navio.XII Dedi ki,

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

    6 Temmuz 2009 04:17

     

Yorum Gönder

Son Yazılar

Son Yorumlar

Translate

İzleyiciler