Saturday, February 7, 2015

Membuat Label Warna Warni Di Blog

Selamat Pagi Menjelang Lohor ( Waktu Dzuhur) saya akan share tutorial yang berjudul Trik Memasang Widget Label Warna Warni/Full Color di blogger. Label atau kategori sangat penting bagi setiap blogger untuk memasangnya, nah untuk itu, label yang anda pasang itu pakai CSS Warna warni alias background labelnya warni warni.Sebelumnya saya sudah share Tutorial Agar Judul Postingan Tampil Diatas Tab Browser. Nah sekarang tinggal labelnya ayooo... Menuju Ke TKP.


Membuat Label Warna Warni Pada Blogger By Muiz-Techno


Bagaimana membuat background label warna-warni? Ikuti langkah-langkah sederhana berikut.

1. Masuk ke Dasboard Blogger Anda
2. Pilih Template
3. Kemudain Pilih Edit HTML
4. Salin CSS berikut dan letakkan diatas tag </b:skin> atau </style>

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:300;
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:#006633;border-bottom:3px solid #003366;}
.sidebar .label-size-1 a:hover {background:#006666;}
.sidebar .label-size-2 a {background:#336600;border-bottom:3px solid #663300;}
.sidebar .label-size-2 a:hover {background:#666600;}
.sidebar .label-size-3 a {background:#660066;border-bottom:3px solid #330066;}
.sidebar .label-size-3 a:hover {background:#660033}
.sidebar .label-size-4 a {background:#009980;border-bottom:3px solid #006699;}
.sidebar .label-size-4 a:hover {background:#009933}
.sidebar .label-size-5 a {background:#14B1FF;border-bottom:3px solid #006699;}
.sidebar .label-size-5 a:hover {background:#008FD6}

CSS di atas hanya untuk blog yang memiliki label sedikit , jika label dalam blog Anda lebih banyak silahkan gunakan CSS berikut:


.cloud-label-widget-content {text-align: left;}
.label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F86D9E;}
.label-size:nth-child(2) {background: #37C371;}
.label-size:nth-child(3) {background: #10BBEA;}
.label-size:nth-child(4) {background: #25CBFE;}
.label-size:nth-child(5) {background: #963690;}
.label-size:nth-child(6) {background: #A3195C;}
.label-size:nth-child(7) {background: #545454;}
.label-size:nth-child(8) {background: #F2A15F;}
.label-size:nth-child(9) {background: #00FF80;}
.label-size:nth-child(10) {background: #B7860B;}
.label-size:nth-child(11) {background: #99CC33;}
.label-size:nth-child(12) {background: #FFFF3D;}
.label-size:nth-child(13) {background: #3FDECF;}
.label-size:nth-child(14) {background: #FF2F0A;}
.label-size:nth-child(15) {background: #E9DB58;}
.label-size:nth-child(16) {background: #42FFBD;}
.label-size:nth-child(17) {background: #6899ED;}
.label-size:nth-child(18) {background: #FF52AE;}
.label-size:nth-child(19) {background: #8DBC2F;}
.label-size:nth-child(20) {background: #80FF00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #FF6BFF;
}

5. Simpan perubahan template Anda.
6. Kembali ke Dashboard blog.
7. Klik Layout > Add a Gadget > Labels
8. Berikutnya edit widget Label sehingga sama dengan berikut ini.


Intinya kita harus mempunyai widget Labels dan menambahkan CSS di atas agar label-nya warna-warni.

Selamat mencoba :) Blogger bijak selalu tinggal jejak And jangan lupa Follow

Script By
loading...

Anda Sedang Membaca Artikel Tentang Membuat Label Warna Warni Di Blog Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/02/membuat-label-warna-warni-di-blog.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

loading...