Mempercantik Tampilan Cloud Label untuk Blogger

Baca Juga

MEMPERINDAH desan tampilan widget Daftar Label/Kategori Cloud (awan label) blogger berguna untuk membuat blog lebih menarik alias enak dipandang.

Widget Label posting blog sendiri berguna sebagai navigasi menu sekaligus internal link untuk meningkatkan pageviews dan index database konten blog di mesin pencari Google.

Lihat DEMO

Berikut ini kode-kode untuk mempercantik tapilan Cloud Label untuk Blogger.

LANGKAH 1: Pasang Widget Label
1. Layout > Add a Gadget > Label
2. Pilih "Cloud" dan pilih  label yang akan ditampilkan (jika tidak semua ditampilkan)
3. Save!

LANGKAH 2: Masukkan Kode
1. Template > Edit HTML
2. Pilih dan Masukkan (Copy & Paste) salah satu kode berikut ini di atas kode ]]</b:skin> atau di jajaran kode CSS lainnya.

KODE WARNA-WARNI

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
  }
.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#BC951A;border-bottom:3px solid #BC761A;}
.sidebar .label-size-1 a:hover {background:#BC761A;}
.sidebar .label-size-2 a {background:#E73C69;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#E73C69;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

KODE HITAM/PUTIH
(Tampilan Seperti di Demo atau Gambar Ilustrasi di Atas)

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

Kode Mempercantik Tampilan Cloud Label untuk Blogger ini diambil dari  The Blogger Guide. (http://www.komunikasipraktis.com/).*

» Thanks for reading: Mempercantik Tampilan Cloud Label untuk Blogger