Membuat Label Penuh Warna Di Blog
Membuat Label Penuh Warna di Blog - Mungkin anda pernah melihat blog yang memunyai label yang warna-warni menyerupai pelangi,apakah anda pengen mencoba menerapkan pada blog anda? Pas sekali pada kesempatan kali ini aku akan mencoba memperlihatkan tutorial bagaimana cara menciptakan label berwarna menyerupai pelangi,
Saya lihat pertama cloud label berwarna ini dari blog the-anarcytha. Untuk penampakan labelnya sanggup lihat gambar dibawah ini:
Tutorialnya silahkan ikuti cara berikut:
1. Masuk Dashboard Blogger
2. Tambahkan Label Baca: Cara Menambah Label Blog ,abaikan kalau sudah memasangnya dan beri ceklis di cloud pada display label
3. Langkah selanjutkan simpan aba-aba CSS pada template , template > edit template dan letakkan di atas aba-aba
Mungkin ada yang bertanya,terus bagaimana cara menciptakan cloud label menyerupai blog ini? bergotong-royong kalau anda sudah membeli template evomagz dari mas sugeng niscaya anda akan sanggup melihat kodenya, dan kalau anda belum sempat beli aku akan memperlihatkan aba-aba untuk cloud label menyerupai yang evomag pakai. Untuk cara sama menyerupai langkah sebelumnya hanya saja aba-aba css di atas ganti dengan aba-aba css berikut:
Silahkan edit sendiri warna dengan kesukaan anda,untuk warna lain silahkan sanggup kunjungi halaman FlatUIColor
Semoga bermanfaat
1. Masuk Dashboard Blogger
2. Tambahkan Label Baca: Cara Menambah Label Blog ,abaikan kalau sudah memasangnya dan beri ceklis di cloud pada display label
3. Langkah selanjutkan simpan aba-aba CSS pada template , template > edit template dan letakkan di atas aba-aba
]]></b:skin> atau </style>/* cloudlabel pelangi*/ .label-size { line-height: 1.1; } .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 5px; text-transform: uppercase; } .label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 { font-size: 100%; opacity: 5; } .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 5px; text-transform: uppercase; } .label-size-1 a { background: rgba(155, 89, 182,1.0); border-bottom: 1px solid rgba(142, 68, 173,1.0); } .label-size-2 a { background: rgba(46, 204, 113,1.0); border-bottom: 1px solid rgba(39, 174, 96,1.0); } .label-size-3 a { background: rgba(52, 152, 219,1.0); border-bottom: 1px solid rgba(41, 128, 185,1.0); } .label-size-4 a { background: rgba(26, 188, 156,1.0); border-bottom: 1px solid rgba(22, 160, 133,1.0); } .label-size-5 a { background: rgba(231, 76, 60,1.0); border-bottom: 1px solid rgba(192, 57, 43,1.0); } .label-size a:hover{ background:rgba(225, 225, 225,0.5); }Mungkin ada yang bertanya,terus bagaimana cara menciptakan cloud label menyerupai blog ini? bergotong-royong kalau anda sudah membeli template evomagz dari mas sugeng niscaya anda akan sanggup melihat kodenya, dan kalau anda belum sempat beli aku akan memperlihatkan aba-aba untuk cloud label menyerupai yang evomag pakai. Untuk cara sama menyerupai langkah sebelumnya hanya saja aba-aba css di atas ganti dengan aba-aba css berikut:
Tambahan Kode CSS cloudlabel evomagz
/* cloudlabel */ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size {background:#E73037;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;} .label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;} .label-size:hover {background:#333333;} .label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;} .label-size {line-height:1.2}Silahkan edit sendiri warna dengan kesukaan anda,untuk warna lain silahkan sanggup kunjungi halaman FlatUIColor
Semoga bermanfaat