18 Modifikasi Tampilan Widget Label Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Widget Label Style 1

Memasang widget label adalah cara yang bagus untuk mengatur konten blog anda. Membuat pengelompokan postingan menjadi lebih mudah dan membuat blog anda terlihat lebih sistematis. Widget label default blogger memang memiliki beberapa modifikasi tapi tidak banyak memberikan pengaruh pada aspek desain.

Pada kesempatan kali ini, insyaAllah saya ingin berbagi desain bertenaga CSS3 untuk memodifikasi tampilan widget label blogger sehingga akan lebih terlihat menakjubkan.

Sebelum anda memulai pastikan bahwa pada blog anda telah terinstal widget label dengan tampilan cloud.

Baiklah tertarik ingin mencoba modifikasi tampilan widget label seperti pada screen shoot disamping? Silahkan ikuti langkah-langkah berikut:

1. Seperti biasa log ini ke akun anda

2. Pada dasbor klik template >> Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatas kode tadi:

<span style="font-size: 15px;">.label-size {
float:left;
margin:0 0 7px 20px;
position:relative;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:0.75em;
font-weight:bold;
text-decoration:none;
color:#996633;
text-shadow:0px 1px 0px rgba(255,255,255,.4);
padding:0.417em 0.417em 0.417em 0.917em;
border-top:1px solid #d99d38;
border-right:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0.25em 0.25em 0;
-moz-border-radius:0 0.25em 0.25em 0;
border-radius:0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index:100;
}
.label-size:before {
content:'';
width:1.30em;
height:1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position:absolute;
left:-0.69em;
top:.2em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
border-left:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0 0 0.25em;
-moz-border-radius:0 0 0 0.25em;
border-radius:0 0 0 0.25em;
z-index:1;
}
.label-size:after {
content:'';
width:0.5em;
height:0.5em;
background:#fff;
-webkit-border-radius:4.167em;
-moz-border-radius:4.167em;
border-radius:4.167em;
border:1px solid #d99d38;
-webkit-box-shadow:0 1px 0 #faeaba;
-moz-box-shadow:0 1px 0 #faeaba;
box-shadow:0 1px 0 #faeaba;
position:absolute;
top:0.667em;
left:-0.083em;
z-index:9999;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color:#e1b160;
}
.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color:#e1b160;
}
#Label1 {height:210px !important;}
</span>

4. Simpan template dan lihat hasilnya pada blog anda!

Demikian tutorial modifikasi tampilan widget label blog. Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

18 komentar :

  1. Kalau warna labelx diganti boleh tdk? Terus kalau nampilin jumlah entri perlabel tampilanx jadi seperti apa? Terima ksh.

    BalasHapus
    Balasan
    1. Tinggal diganti kode CSS backgroundx untuk merubah warna sesuai yang dinginkan, sedangkan bgm tampilan label jika jumlah entrix disematkan lbh baik sgra praktekin sndiri deh, biar tau hasilx kayak gimana gtu?

      Hapus
    2. Iya benar, untuk referensi kode warna bisa lihat pada postingan saya daftar kode warna dan tabel disini

      Hapus
  2. makasih pak informasinya berguna, tapi itu untuk yang label tertinggi saja ya?saya coba hanya label tertinggi saja yang labelnya berbentuk gambar..

    www.catatanpendekpedek.blogspot.com | catatan sepanjang yang bisa saya tulis

    BalasHapus
    Balasan
    1. Maksudnya hanya label dengan postingan terbanyak? Saya kira tidak, label yang hanya memiliki 1 postingan juga akan menampilkan label bergambar/dgn background yg sama, saya juga sdh mncobanya. Mgkn saja anda mmg mnsetting tampilan cloud label blog anda hanya menampilkan label dgn postingan trbnyk/trtinggi? Terimaksh apresiasinya.

      Hapus
  3. Banyak yang bisa saya pelajari di blog ini, dan makin sering saya berkunjung. Semoga mbak Arty tidak lupa dengan www.doribae.com

    BalasHapus
    Balasan
    1. Terimakasih ats apresiasinya, insyaAllah sy akn mmbls stp kunjungan pmbaca blog ini selagi ada wktu luang.

      Hapus
  4. KOq ga bisa ya ? apa tergantung template nya juga...mohon pencerahannya.

    **saya kepengen label ini. kata pakar SEO label seperti ini bagus buat SEO

    BalasHapus
    Balasan
    1. Masa sih nggak bisa, ini khn hnya nambah css doang? Kayakx templatex tdk ngaruh sih, anaa jg pakai template yg anda pakai di blog dgn tema lain.

      Sebelumnya dah psng widget label dan setting dgn tampilan cloud tdk diblognya?

      Hapus
  5. Wahh,,, ilmunya berguna sekali bagi saya ..
    kunjungi juga ya.. http://itsmydiary144.blogspot.com/

    BalasHapus
  6. terima kasih atas informasinya http://top-wisata.blogspot.com/

    BalasHapus
  7. artikelnya sangat bagus dan sangat bermanfaat, makasih
    semoga sukses saja.. dan salam hangat buat admin blog dari ibbenk21

    BalasHapus
  8. keren blognyaaaaaaaaaaaaaaaaaaaaaaaaaaa

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!