Blogger Etiket Sitilini Değiştirin

Blogger'da etiket sitili, biraz sade ve bazı bloglara hiç uygun değil. Şimdi onu düzenlemeniz için size bir kod vereceğiz. Etiketlerinizi kutu şeklinde göstermek ister misiniz? Bazı Wordpress eklentilerinde bu yöntem kullanılıyor. Bizde etiketlerimizi tıpkı yazımıza eklediğimiz görsel gibi şekillendireceğiz.

Bricks Sitili Etiketler

Yapmanız gereken ilk şey blogger blogunuza etiket widgeti eklemek. Eğer çok fazla etiketiniz varsa aralarından seçmenizi tavsiye ederiz. Etiket widgetini ayarlarken bulut şeklinde gösterilsin seçeneğini işaretleyin.

Bu aşamadan sonra şablonunuzun yedeğini alın. Aynı yerden HTML düzenle kısmına geçin ve ctrl+f ile aşağıdaki kodu bulun.

]]>< /b:skin>

Bu kodu bulduktan sonra hemen üstüne aşağıdaki kodu yapıştırın.

/*CSS3 Bricks etiketler, düzenleyen http://webmaster.10line.net/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks sitili etiketler, düzenleyen http://webmaster.10line.net/ */

Bu kodları ekledikten sonra "Widget'a Atla" sekmesinden Label1 kısmına tıklayın. Görselde görüldüğü gibi. Eğer blogunuza ilk başta söylediğim etiket widgetini eklemediyseniz ve blogunuzda hali hazırda böyle bir widget kullanılmıyorsa bu kısmı göremezsiniz. Göremiyorsanız etiket widgetini eklediğinizden emin olun. Görselde gördüğünüz gibi Label 1 etiketine gidin... Yine görselde görüldüğü gibi kodlar kapalıysa açın.

Bu aşamadan sonra aşağıdaki verdiğim kodların tamamını seçip silin. Burda dikkatli olmanızı tavsiye ederim. Fazla kod silmeyin. Silinecek kodların tamamı şunlar;

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Silinecek kodları Google Code ile görüntüle... https://10line-code.googlecode.com/files/etiket-kutu-widget-1.txt

Bu kodları sildikten sonra yerine aşağıdaki kodları yapıştırın.

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable>
</b:widget>

Kullanacağınız kodları Google Code ile görüntüle: https://10line-code.googlecode.com/files/etiket-kutu-widget-2.txt

Şablonunuzu kaydedin ve artık etiketleriniz görselimizde gördüğünüz gibi kutucuklu şekilde olacak. Kodlarda sıkıntı çekenler kodları Google Code linkimizden indirip, o şekilde kullanabilirler.

 Bu yazı http://webmaster.10line.net adresinde yayınlandı.