Lazada
Home Blog Blogspot Membuat Template Widget Blog Trik Membuat Widget Label Blog Menjadi Keren

Trik Membuat Widget Label Blog Menjadi Keren

11 Comments September 15, 2018
Trik Membuat Widget Label Blog Menjadi Keren
Trik Membuat Widget Label Blog Menjadi Keren. Widget Label merupakan sebuah widget yang berguna untuk membedakan postingan yang ada dalam blog tersebut berdasarkan dengan kategori yang sudah di tentukan oleh penerbit konten (publisher). Widget Label juga menjadi salah satu widget yang sangat penting juga dalam sebuah blog, karena dengan menambahkan widget ini berarti para pengunjung blog lebih mudah untuk memilih konten atau postingan sesuai label dan kriteria yang akan mereka cari.
Jadi dengan menambahkan fitur penanda berdasarkan label bisa menjadi nilai tambah untuk memuaskan pengunjung dalam menjelajah blog kita.

Cara Menambahkan Widget Label Di Blog

1. Masuk ke dalam blog kalian dan klik "Tata Letak"
2. Kemudian klik "Tambahkan Gadget" dan pilih "Label"
3. Silahkan atur dengan memilih opsi pada widget Label tersebut sesuai dengan selera anda
4. Jika sudah klik "Simpan" dan klik juga "Simpan Perubahan"
Baca juga :
Cara Membuat Related Post Untuk Blogspot
Cara Mengubah Widget Popular Post Menjadi Keren
Trik Memodifikasi Widget Arsip Supaya Keren

Cara Memodifikasi Tampilan Widget Label Agar Terlihat Menarik

Untuk membuat para pengunjung lebih senang dan mudah dalam menggunakan widget Label, maka kalian bisa memodifikasinya supaya bisa lebih menarik perhatian pengunjung blog.
Dan saya sudah menyiapkan beberapa kode CSS di bawah ini untuk memodifikasi tampilan widget label kalian menjadi lebih keren
1. Pastikan kalian sudah masuk ke dalam blog kalian
2. Pilih menu "Tema" dan klik "Edit Tema"
3. Selanjutnya cari kode </b:skin> atau </style>
4. Silahkan masukkan salah satu kode berikut ini di atas kode tadi (kode nomor 3)

Widget Label Style 1

Widget Label Style 1
 /* Label 1*/
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {
font-size: 100%;
opacity: 10;
}
.cloud-label-widget-content {text-align: left}
.label-size {
background-color: #56b8e2;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.label-size a, .label-size span {
display: inline-block;
color: #ffffff!important;
padding: 6px 8px;
font-weight: bold;
}
.label-size:hover {background-color: #333333}
.label-size:hover .label-count {background-color: #56b8e2}
.label-size:hover .label-count:before {border-right: 6px solid #56b8e2}
.label-count {
position: relative;
white-space: nowrap;
padding-right: 3px;
margin-left: -2.5px;
background-color: #333333;
}
.label-count:before {
content: "";
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-right: 6px solid #333333;
position: absolute;
top: 8px;
left: -6px;
}

Widget Label Style 2

Widget Label Style 2
 /* CSS label 2 */
#sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;}
#sidebar-wrapper .Label li:before {content:&quot;\f105&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;}
#sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;}
#sidebar-wrapper .Label li a:hover {color:#ef4824;}
#sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;}
#sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff}
#sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;}
#sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;}
#sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
#sidebar-wrapper .label-size a:hover {color:#fff;}
#sidebar-wrapper .label-size a:before {content:&quot;\f02b&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
#sidebar-wrapper .label-size a:hover:before {content:&quot;\f02b&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}

Widget Label Style 3

 Widget Label Style 3
 /* CSS label 3*/
.label-size{ margin:0; padding:0; position:relative; }  .label-size a ,  .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;  border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px;  border-top-right-radius:4px;  } .label-size a:before ,  .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0;   } .label-size a:after ,  .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; }  .label-size a:hover ,  .label-size span::hover { background:#555;} .label-size a:hover:before ,  .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

Widget Label Style 4

Widget Label Style 4
/* Labels 4*/
.widget-content.list-label-widget-content {padding:0;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}
.label-count:hover {background:#fafafa;color:#222;border-radius:4px}
.Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover {background:#fff;color:#FF9934;}
.Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
.Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;}
.Label li a {color:#666;transition:all .3s ease-out;}
.Label li a:hover {color:#FF9934;}
.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}
.Label li span:hover{background-color:#FF9934;color:#fff}
.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}
.label-size:hover{background:#FF9934;border-color:#FF9934;}
.label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
.label-size a:hover {color:#fff;}
.label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li:hover {color:#29abe2;}
.Label li a {color:#aaa;transition:all .3s ease-out;}
.Label li a:hover {color:#29abe2;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}
.Label li span:hover{color:#29abe2}
.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}
.label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:initial;}
.label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;}
label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;}
.label-count {background:#333;}

Widget Label Style 5

Widget Label Style 5
 /*CSS Label 5*
.Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff; height: 32px; background: #359bed; margin-right: 2px; line-height: 32px; text-decoration: none; -webkit-transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; display: inline-block; border: 1px solid transparent; border-radius: 3px; } .Label a:hover{ background:none; border: 1px solid #545454; border-radius:3px; color:#222; } .Label a:after{ content: ""; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent; }

Widget Label Style 6

Widget Label Style 6
 /* Label 6*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}.cloud-label-widget-content{text-align:left}.label-size{background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:11px;text-transform:uppercase}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px;font-weight:700}.label-size:hover{background:#333}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff!important}.label-size{line-height:1.2}

Widget Label Style 7

Widget Label Style 7
 /*CSS Label 7*/
#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}

5. Setelah memilih dan meletakkan salah satu kode css widget label tersebut maka klik "Simpan Tema" dan cobalah cek perubahannya

Itulah tutorial sekilas tentang Trik Membuat Widget Label Menjadi Keren yang dapat saya sampaikan, selamat mencoba.

terima kasih untuk
Sumber :
13 September 2018 https://www.lk21.news/2018/02/20-cara-membuat-widget-label-keren-di.html
Promo Menarik
Thumbnail
Diskon Barang Elektronik Di Lazada Hingga 80%
Cek disini
Thumbnail
Promo Cuci Gudang, Diskon Sampai 50%
Cek disini
Thumbnail
Murah Pol - Barang Murah Berkualitas Mewah
Cek disini
Thumbnail
Tampil Cantik Gak Perlu Mahal - Diskon 50%
Cek disini
Thumbnail
Kumpulan Barang Untuk Kesehatan - Diskon 50%
Cek disini
Previous
« Prev Post
Next
Next Post »

11 comments:

  1. aljo26 November, 2019 17:37

    ijin bertanya agan, copy kode html nya setelah style atau sebelum nya yah, saya coba blm bisa, terima kasih

    ReplyDelete
    Replies
    1. Zona Internetku26 November, 2019 21:30

      Itu bukan kode HTML, tapi kode CSS.
      Jadi untuk penempatannya bisa diletakkan setelah kode <style> ataupun sebelum kode </style> yang ada di bagian dalam tag <head> kode style ada di dalam sini </head>

      Semoga petunjuk ini bisa membantu anda, terima telah berkunjung.

      Delete
  2. Rio Ve26 January, 2020 18:05

    Mantaap gan...
    izin pasang ya..?

    ReplyDelete
  3. Zona Internetku14 February, 2020 15:26

    mungkin agan salah meletakkan kodenya, bisa jadi kode tag <style> milik agan telah berada di dalam kode tag kondisional.

    jadi coba letakkan kodenya didalam tag <style> pertama yang ada didalam tag <head>

    Semoga berhasil

    ReplyDelete
  4. Zona Internetku14 February, 2020 15:30

    Boleh saja gan, asalkan kode jenis tampilan labelnya berbeda.
    Contoh:
    label 1 memakai tampilan Cloud
    label 2 memakai tampilan List

    Dengan begitu kodenya tidak akan bertabrakan dan tampilannya tetap aman

    ReplyDelete
  5. MOBILINTEC14 February, 2020 17:18

    wah keren ni mas, wajib di coba ni ubah tampilan widget label nya biar tambah keren menu label di blog

    ReplyDelete
  6. Harus Tau17 March, 2020 00:12

    Wih keren nih, para blogger Harus Tau nih, agar tampilan blognya menarik

    ReplyDelete
  7. rippdunk_23 August, 2020 17:45

    Bang, cara buat mode gelap di blog gimana ya???

    Makasih...

    ReplyDelete
    Replies
    1. Zona Internetku27 August, 2020 12:18

      Silahkan subscribe dulu ke blog saya, supaya bisa mendapatkan info terbaru.
      Jadi kalo nanti saya membuat artikel tersebut anda tidak ketinggalan info tersebut. Terima kasih.

      Delete
  8. Endriono25 March, 2022 23:28

    Bagus lah pokoknya

    ReplyDelete

Komentar spam tidak akan di tampilkan !
Maka nikmat Tuhanmu yang manakah yang kamu dustakan?
Kembalilah ke jalan yang benar sebelum Allah sendiri yang memberikan peringatan kepadamu

Lazada
× Iklan Lazada Tech Junkies
× Iklan Lazada
× Iklan Lazada Laz Beauty