Cara memasang Widget Label Keren di Blogger beserta dengan Rekomendasi Widget Label Keren

byInzaghi's Blog Admin -
0

Assalamu‘alaikum wr. wb. 

Halo gais! Jika Anda pengguna Blogger, tentunya Widget juga salah satu hal yang penting untuk Label/Kategori yang ada di Blogger. Jika ingin Label Widget keren di Blogger, berikut ini adalah beberapa Rekomendasi Widget Label Keren yang Kekinian.

Sumber Artikel : Webkeren.net dan Caramanual.com

Mengembangkan estetika visual sebuah Blog merupakan suatu aspek yang penting bagi para blogger. Terdapat berbagai cara untuk meningkatkan daya tarik tampilan blog, dan salah satu di antaranya adalah dengan memasang dan mengubah tampilan label cloud di dalam blog.

Label, yang juga dikenal sebagai kategori, memiliki peran yang sangat bermanfaat untuk membantu penulis maupun pengunjung dalam mencari artikel berdasarkan kategori yang diinginkan.

Ada dua jenis tampilan label yang biasanya digunakan dalam platform blogger, yaitu tampilan daftar label (label list) dan tampilan label cloud.

Perbedaannya terletak pada tampilan daftar label yang menampilkan label atau kategori secara vertikal dari atas ke bawah, di mana setiap label berada dalam baris terpisah. Sementara itu, tampilan label cloud menampilkan label atau kategori secara horizontal dari kiri ke kanan, di mana beberapa baris dapat menampung berbagai label atau kategori.

Dalam kesempatan ini, saya akan memberikan Tutorial tentang cara menciptakan tampilan Label Cloud yang menarik dalam Blog. Kami akan melakukan modifikasi pada tampilan label atau kategori default yang terdapat dalam template blog Anda.

Untuk mengubah tampilan widget label cloud pada blog, Anda hanya perlu menambahkan kode CSS yang telah dimodifikasi untuk menciptakan tampilan yang lebih menarik dan estetis ketika melihat widget label atau kategori tersebut.

A. Cara Pasang Label Cloud di Blogger

Agar tutorial ini bekerja, kita ubah dulu jenis label yang kita gunakan menjadi label cloud. Caranya sebagai berikut :

Pertama, Masuk menu Layout atau Tata Letak >> Tambah Gadget >> Label.

Silakan setting Label (Tergantung dari nama Label Anda) menjadi Cloud, caranya pada display pilih Cloud (Jangan List). [Lihatlah pada Gambar di Atas.]

B. Cara Pasang Widget Label Keren di Blogger

Kalau kalian sudah menambahkan Widget Label, sekarang kita akan membuatnya menjadi unik dan Keren. Caranya :

Pertama, Masuk (Login/Sign in) ke Blogger dengan menggunakan Akun Google Anda.


Kemudian, Silakan pilih Dasboard > Theme > Edit HTML (di depan Tombol "Customize")

Lalu, Tekan Ctrl+F, lalu cari Kode ]]></b:skin>.

Jika sudah ketemu, Copy kode CSS dibawah ini dan Paste-kan (Letakkan) kodenya tepat diatas kode ]]></b:skin>. Jika sudah jangan lupa Save/Simpan.

C. Rekomendasi Widget Label Keren di Blogger

Dan inilah beberapa kumpulan Widget Unik dan menarik yang saya rekomendasikan :

1. Cloud Label Style 1

/* Cloud Label Style 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 {
  transition: all 0.25s;
  -moz-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  line-height: 1.2;
  display: block;
  float: left;
  margin: 0 3px 3px 0;
  color: #328bdd;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #328bdd;
}
.label-size a,
.label-size span {
  display: inline-block;
  color: #328bdd;
  padding: 6px 8px;
}
.label-size:hover {
  border: 1px solid #000000;
}
.label-size:hover a,
.label-size:hover .label-count {
  color: #000000;
}
.label-count {
  margin-left: -12px;
  margin-right: 0;
}
.list-label-widget-content ul li {
  display: block;
  margin: 0 0 5px;
}
.list-label-widget-content ul li:last-child {
  margin-bottom: 10px;
}

Hasil :

2. Cloud Label Style 2

/* Cloud Label Style 2 */
.Label li {
  background: #fff;
  color: #666;
  padding: 5px;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  transition: all 0.3s ease-out;
}
.Label li:hover {
  background: #fff;
  color: #ef4824;
}
.Label li:before {
  content: "\f105";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-right: 4px;
  color: #666;
  transition: all 0.3s ease-out;
}
.Label li:hover:before {
  margin: 0 0 0 5px;
  padding-right: 4px;
  color: #ef4824;
}
.Label li a {
  color: #666;
  font-size: 95%;
  transition: all 0.3s ease-out;
}
.Label li a:hover {
  color: #ef4824;
}
.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;
}
.Label li span:hover {
  background-color: #ef4824;
  color: #fff;
}
.label-size {
  background: #fdfdfd;
  display: block;
  float: left;
  margin: 0 4px 4px 0;
  font-size: 13px;
  border: 1px solid #e6e6e6;
  transition: all 0.3s;
}
.label-size:hover {
  background: #ef4824;
  border-color: #b69c6c;
}
.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;
}

Hasil :

3. Cloud Label Style 3

/* Cloud Label Style 3 */
.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: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.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;
}

Hasil :

4. Cloud Label Style 4

/* Cloud Label Style 4 */
.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;
}

Hasil :

5. Cloud Label Style 5

/* Cloud Widget Style 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 0.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: 0;
  height: 0;
  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;
}

Hasil :

6. Cloud Label Style 6

/* Cloud Label Style 6 */
.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:#f39c30;}
.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: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:#f39c30;}
.Label li a{color:#aaa;transition:all .3s ease-out;}
.Label li a:hover{color:#f39c30;}
.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:#f39c30;}
.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:hover{background:#f39c30;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:hover,#footer-wrapper-inner .label-size:hover{background:#f39c30;color:#fff;transition:initial;}
.label-count{background:#333;}

Hasil :

7. Cloud Label Style 7 (Widget Label Keren)

/* Widget Label Keren */ 
.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 {
    border-radius:30px;
    background:#085be0;
    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 {
    border-radius:30px;
    background:#333333;
} .label-count {
    white-space:nowrap;
    border-radius:30px;
    padding-right:3px;
    margin-left:-3px;
    background:#333333;
    color:#fff !important;
}
.label-size {
    line-height:1.2
}

Hasil :

CATATAN :

Jika ada Icon yang tidak muncul, silakan pasang Kode Font Awesome ini di Blog Anda. Letakkan kode ini di atas kode </body>.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>


Itulah Cara memasang Widget Label Keren di Blogger beserta dengan Rekomendasi Widget Label Keren.

Terima Kasih 😄😊👌👍 :)

Wassalammu‘alaikum wr. wb.

Tags

You may like these posts

Post a Comment

Previous Post Next Post