Black Color Cloud Label Widget For Blogger

In this post im  gonna  explain  how  to add attractive
Black cloud  label  widget for  blogger. So this labels
are neat and  nice  looking, peoples  can find the any
categories  easily. Few  months  ago  i published few
post with   different  style  cloud  labels  with  various
colors. If  this   is  not  match  for  you. you  can  find
best one  from  below list. If  you have  any  problem
with this tutorial. Just leave a comment or contact me.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/*-----Custom Labels widget by www.bloggertrix.com----*/

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}

#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;  
border-bottom-color: #D8D8D8;}

7. Now Click  Save Template.

    You are done...

Purple Cloud Label Widget For Blogger

In this post im  gonna  explain  how  to add attractive
purple cloud  label  widget for  blogger. So this labels
are neat and  nice  looking, peoples  can find the any
categories  easily. Few  months  ago  i published few
post with   different  style  cloud  labels  with  various
colors. If  this   is  not  match  for  you. you  can  find
best one  from  below  list. I  cant  provide   demo  for
this   tutorial. If  you  have  any   problem  with   this
tutorial. Just leave a comment or contact me.

Green Cloud Label widget for blogger
Orange Cloud Label widget for blogger
Blue Cloud Label widget for blogger
Get All here.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/*-----Custom Labels widget by www.bloggertrix.com----*/

#Label1 a{
outline:1px dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none;
color:black;white-space: nowrap;
font-family: arial,serif;text-transform:capitalize;
font-size: 12px;font-weight: bold;
position: relative !important;background: #aa00ff;
-moz-opacity:0.75;
-khtml-opacity:0.75;opacity:0.75;
filter:alpha(opacity:75%);
float:left;padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover {
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
background:#A55A27;color:white;
-webkit-transition:all ease-in-out .5s;
-moz-transition:all ease-in-out .5s;
-o-transition:all ease-in-out .5s;
transition:all ease-in-out .5s;
}
#Label1 a:active {
background:#B24700;color:#80FFFE;
-webkit-transition:all linear .5s;
-moz-transition:all linear .5s;
-o-transition:all linear .5s;transition:all linear .5s;
}

7. Now Click  Save Template.

    You are done...

Memberikan Title Tag Pada Title Blog

Sepertinya hal ini banyak dilupakan oleh banyak orang termasuk saya hehehe... Biarpun tidak sepenuhnya menentukan nilai atau skor SEO sebuah blog, tetap saja title tag memberikan kontribusi dalam menentukan skor SEO. Dan satu hal ini banyak terlewatkan oleh kita yaitu memberikan title tag pada title blog.

Hal ini tentunya berlaku bagi Anda yang tidak merubah atau mengganti title blog dengan gambar. Sebagai contohnya bisa Anda lihat pada gambar di bawah ini.

Bagaimana apakah blog Anda menggunakan title blog dengan huruf ? Jika Anda tidak mengganti title blog Anda dengan gambar, Anda bisa menambahkan title tag pada title blog Anda. Caranya terbilang cukup mudah asal Anda lebih teliti dalam mengedit template.

Tambahkan kode expr:title='data:title' pada kode di bawah ini:

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

Perhatikan kode yang berwarna merah, kode tersebut yang harus dirubah sehingga penampilannya akan sepeti di bawah ini.

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a>
  </b:if>
</b:includable>

Kode berwarna biru adalah kode yang ditambahkan untuk memunculan atau menambahkan title tag pada title blog. Sebenarnya menambahkan title tag pada title blog yang diganti dengan gambar juga bisa, namun saya tidak merekomendasikan untuk mengganti title blog dengan gambar karena tag h1 yang dibutuhkan dalam menentukan skor SEO sebuah blog akan hilang atau tidak terdetek. 

Jika Anda berniat menggunakan gambar atau logo untuk dijadikan title blog, sebaiknya Anda memanipulasinya sehingga tag h1 akan tetap terdetek. 

Menambahkan Title Tag Pada Label Blogger

Seperti yang telah kita ketahui, bahwa title judul atau title link pada sebuah blog tidak menentukan nilai akhir SEO sebuah blog, namun tidak ada salahnya jika kita melengkapi semua link dengan title tag.

Seperti halnya dengan widget label pada blogspot, ternyata linknya tidak disertai dengan title tag. Sehingga ketika dicek nilai SEO khususnya di Chkme, link-link pada label mendapatkan warning karena link-link tersebut tidak terdapat title tag. Oleh karena itu saya mencoba sharing untuk menambahkan title tag pada label blogger. 

Sebenarnya trik ini saya hanya coba-coba saja, namun ternyata penerapannya berhasil. Jika blog Anda menggunakan widget label, silahkan sorot linknya dengan mouse, jika tidak ada tooltip yang memunculkan title silahkan coba dengan trik ini. Setelah saya cek lagi di Chkme, warning untuk link pada label sudah teratasi.

Jika Anda ingin mencobnya, silahkan tambahkan kode expr:title='data:label.name' ini pada link-link label pada edit HTML. Biasanya kode untuk widget label akan seperti di bawah ini.

<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>
  </div>
</b:includable>
  </b:widget>

Tulisan yang berwarna merah adalah link pada label yang akan muncul di tampilan blog. jika Anda ingin menambahkan title tag, maka silahkan tambahkan kode expr:title='data:label.name'. Dan penampaknnya akan seperti di bawah ini.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>

Sekarang coba cek dengan menyorotkan mouse ke link label blog Anda, jika muncul tooltip yang menampilkan title link seperti gambar di atas, maka sekarang linl label Anda sudah mempunyai title tag dan silahkan cek di Chkme.

Namun karena trik ini saya hanya coba-coba namun berhasil, jika memang ada yang salah dengan cara ini, saya mohon koreksinya ya...

Cara Membatasi Jumlah Post Yang Tampil Ketika Klik Label

Beberapa waktu yang lalu ada pengunjung Kompi Ajaib yang menanyakan bagaimana cara membatasi jumlah postingan yang muncul ketika klik pada label di menu, sehingga tampilannya tidak memanjang ke bawah karena banyaknya post yang ditampilkan.

Jika tampilan postingan pada label tidak dibatasi, biasanya postingan yang muncul per halaman bisa tampil dalam jumlah banyak, bisa sampai 20 post per halaman. Nah untuk itu kita bisa membatasinya dengan menambahkan kode dibelakang URL label-nya.

Trik ini sebenarnya cukup sederhana, namun bagi yang belum tahu tentunya akan sulit sekali. Apalagi bagi blogger otodidak seperti saya ini. Untuk membatasi jumlah post yang tampil ketika klik label ini, kita menambahkan atau memberi perintah "jumlah maksimal" postingan yang ditampilkan.

Label-label ini biasanya disimpan di menu header sebagai navigasi yang diberikan admin kepada pengunjung, sehingga mereka akan lebih mudah menelusuri postingan lainnya sesuai dengan label yang dituju. Pemberian URL untuk label biasanya seperti di bawah ini:

http://namablog.blogspot.com/search/label/label kamu

Nah untuk membatasi jumlah postingan yang tampil ketika label tersebut diklik, tinggal tambahkan kode ?max-results=4 di akhir URL. Angka 4 adalah jumlah postingan yang harus tampil, sehingga penampakannya akan seperti di bawah ini.

http://namablog.blogspot.com/search/label/label kamu?max-results=4

Nah mudah kan...? Demikian saja postingan cara membatasi jumlah post yang tampil ketika klik label ini bisa dimengerti dan bermanfaat....

Membuat Label Blog Sebagai Link RSS Feed Untuk Tiap Kategori

Jika anda memiliki banyak konten yang berbeda berdasarkan kategori maka sebaiknya anda menggunakan trik berikut ini agar pengunjung dengan mudah dapat mengsubscribe konten berdasarkan kategori yang mereka inginkan. Jadi pengunjung tidak perlu mensubscribe semua posting anda, hanya artikel tertentu berdasarkan kategori. Kali ini kita akan membuat tombol rss feed sebagai label untuk kategori pada blog anda. Untuk itu ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan --> Edit HTML
3. Centang Expand Template Widget
4. Carilah kode seperti berikut ini:

<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>

5. Lalu ganti kode diatas dengan kode berikut ini:

<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'>
<img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0' />
</a>
<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>

6. Simpan template anda

Lalu sobat coba lihat label widget anda. Anda akan mendapat label dengan link rss subscribe. Jika sobat ingin mengganti gambar subscibe diatas cukup mengubah kode berwarna biru dengan url gambar yang anda inginkan.