Cara memodifikasi label di blog #1

Hai sobat blogger, gimana kabarnya nih?? pasti baik kan?? eh bentar lagi bulan Ramadhan ya. Rasanya cepet banget, pikirku baru kemarin bulan ramadhan, hehehe.

Kali ini aku, Noufal, mau ngulas tentang Cara memodifikasi label di blog. "Fal, itu kok ada tanda pager tu apa?" itu yang model pertama. Kapan-kapan mau aku update lagi yang model lainnya.

Tutorial ini saya buatkan 2 cara, yaitu Langkah 1 dan Langkah 2.

Langkah 1

---

1. Login ke akun Blogger njenengan (anda, kalo ga tau artinya, hehehe)
2. Masuk ke halaman Template
3. Lalu klik Sesuaikan, bukan yang edit HTML
4. Cari Tingkat Lanjut,
5. Klik Tambahkan CSS
6. Copy kode berikut, paste di teks area tsb, lalu simpan.

.label-size {
  margin:0;
  padding:0;
  position:relative;
}
.label-size a {
  float:left;
  height:24px;
  line-height:24px;
  position:relative;
  font-size:12px;
  margin-bottom:9px;
  margin-left:20px;
  padding:0 10px 0 12px;
  background:#0089e0;
  color:#fff;
  text-decoration:none;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;
  border-top-right-radius:4px;
}
.label-size a:before {
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #0089e0 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;
}
.label-size a:after {
  content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover {
  background:#555;
}
.label-size a:hover:before {
  border-color:transparent #555 transparent transparent;
}

Langkah 2 

---

1. Tentunya login dulu ke akun Blogger
2. Masuk ke menu Template
3. Klik Edit Template
4. Klik tanda segitiga warna hitam yang menghadap ke kanan di samping kode <b:skin>...</b:skin>
5. Lalu cari (Ctrl + F) ]]></b:skin>
6. Masukkan code tadi.

.label-size {
  margin:0;
  padding:0;
  position:relative;
}
.label-size a {
  float:left;
  height:24px;
  line-height:24px;
  position:relative;
  font-size:12px;
  margin-bottom:9px;
  margin-left:20px;
  padding:0 10px 0 12px;
  background:#0089e0;
  color:#fff;
  text-decoration:none;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;
  border-top-right-radius:4px;
}
.label-size a:before {
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #0089e0 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;
}
.label-size a:after {
  content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover {
  background:#555;
}
.label-size a:hover:before {
  border-color:transparent #555 transparent transparent;
}

Nanti, hasilnya akan menjadi seperti ini

Sekian artikel dari saya, semoga bermanfaat bagi kita semua.