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.
0 Comments