Cara Membuat Label Warna - Warni di Blogger

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Cara Membuat Label Warna - Warni di Blogger, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Tutorial, Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Membuat widget label warna-warni di sidebar sebenarnya sudah saya pikirkan dari kemarin, baru sekarang saya bisa membagikannya kepada kalian, tutorial ini saya dapatkan di blog Contoh Blog. Tutorial ini sudah saya testing terlebih dahulu dan hasilnya work, sebenarnya banyak warna yang di berikan pada CSS tapi saya hanya menampilkan 2 (dua) warna saja, dikarenakan saya tidak tahu CSS atau kode warna apa yang ingin saya tampilkan pada label tersebut.

Dengan memasang widget label wrna-warni ini bisa memperbagus atau mempercantik tampilan blog Anda dari sebelumnya dan widget ini pun responsive pada template blog Anda.

Membuat Widget Label Warna-Warni

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda taruh CSS dibawah ini di atas kode ]]></b:skin> atau </style>

/* Label Warna-Warni */

.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}

.sidebar .label-size a {color:#fff!important;background:#222;padding:8px 22px;margin:0 3px 3px 0;float:left;display:block;

-moz-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

.sidebar .label-size-1 a {background:#FF8000}

.sidebar .label-size-2 a {background:#D7DF01}

.sidebar .label-size-3 a {background:#B40404}

.sidebar .label-size-4 a {background:#298A08}

.sidebar .label-size-5 a {background:#084B8A}

.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {

background:#2288bb; color:#fff; text-decoration:none}

.sidebar .label-size span {

background:#2288bb;

color:#fff;

padding:8px 22px;

margin:0 0 3px;

clear:both;

float:left;

}

.sidebar .label-size {

position:relative;

text-transform: uppercase;

text-decoration:none;

font-size:16px;

font-family:'Oswald', sans-serif;

color:#fff;

}

.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

Silakan Anda Save template Anda.

Jika Anda ingin memiliki warna yang lebih banyak dari yang di atas, Anda bisa menggunakan CSS atau kode dibawah ini.

/* Label Warna-Warni Lebih banyak */

.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; }

Langkah kedua :

Langkah selanjutnya adalah membuat Widget label dengan cara :
Tata Letak > Tambahkan Gadget > Pilih Label. Jika sudah silakan pilih Cloud pada menu Tampilkan.

Dan silakan Anda lihat blog Anda, widget label warna-warni pun sudah ada di blog Anda.

Demikian tutorial kali ini semoga bermanfaat, jangan lupa untuk like, share dan subscribe postingan maupun blog ini, untuk memajukan blog ini kedepannya dengan lebih baik, terimakasih.

Baca Juga

Demikianlah Artikel: Cara Membuat Label Warna - Warni di Blogger

kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Label Warna - Warni di Blogger dengan alamat link https://blog-kita-semuaa.blogspot.com/2017/04/cara-membuat-label-warna-warni-di.html

Share :