Cara Membuat Label Keren Di Blog

Cara Membuat Label Keren Di Blog - Pada malam ini saya akan share cara membuat agar tanpilan menu label supaya bisa menjadi lebih keren dan juga cantik, nah jadi bagi kamu yang mau membuat menu label kamu cantik dan keren saya akan kasih kode CSS Html , yang kamu sudah kasih pada halaman di bawah ini, ke pada anda saya baru saja buat Kode Css dengan bootraap ,teyata hasil luman cukup bagus.

Dengan begitu saya ingin sakali meng share kode Css ini ke pada kalin, Kode Css ini yang peranah saya coba di psang pada blog saya waktu 2 minggu yang lalu kemuidan saya copot lagi kerna saya bosan dengan tanpilan lebel ini ,sekarang girilan kailan jika kamu mau pasang menu kode Css Html agar menu lebel anda menjadi lebih Soe.

Kita langsung mulai saya pada tutorial Cara Mempercantik Menu Label di Blog menu lebel ini bisa sebut juga menu kategori menu ini sangat penting bagi pengujung blog kita ,apah salahnya sekarang kita modifikasih menu lebel menjadi lebih kren dan lebih Soe, silahkan kamu ikuti langkah langkah berikut di bawah ini.

Cara Membuat Label Keren Di Blog

Langkah Pertama

1. Login Blogger
2. Kamu pilih menu Template>>Edit Html>>CTRL+F
3 Kemudian kamu cari kode ]]></b:skin> jika sudah ketemu copy kode di bawah ini di atas kode ]]></b:skin> ini .

/*Label*/
.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}

4. Jika kamu megunkan Template warna Hitam pakai kode di bawah ini.

/*Label Putih*/
.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}

5. Jika sudah di terapkan kamu coba Save dan kamu pilih menu di bawah ini Teta Letak>>Tambahkan Gandet>>Label>>Cloud

Kemudian kamu coba simpan pada blog anda dan buka New Tab baru maka hasilnya akan Sukses demkian lah pada tutorial Cara Mempercantik Menu Label di Blog semoga bisa bermanpaat bagi kalin cukup sekian Info dari saya semoga bisa bermanpat bagi anda wasalam.

Lokasi:

Berbagi :