Trik Membuat Widget Label Blog Menjadi Keren | Tutorial Lengkap

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.

Zona Internetku September 15, 2018

Trik Membuat Widget Label Blog Menjadi Keren

Jadi memakai menambahkan fitur penanda dari label bisa sebagai nilai tambah buat 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

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap

Gambar
Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Zona Internetku September 11, 2016 Cara Mengubah Suasana Siang Menjadi Malam . Halo.. sob, selamat datang di zona internetku, pada tutorial kali ini saya akan memposting tutorial tentang cara mengubah suasana siang menjadi malam, efek kali ini memberikan kesan yang agak suram atau sepi karena biasanya susana di malam hari memang sangat menakutkan, tapi berbeda bagi para editor yang menggunakan efek ini untuk menciptakan suasana tertentu, yang tentu saja menggunakan aplikasi photoshop yang penuh dengan fitur fitur yang sangat keren, dan saya kali ini menggunakan aplikasi photoshop cs6 kalian juga bisa menggunakan aplikasi photoshop yang lain seperti photoshop cc yang selalu update dengan fitur fiturnya yang lebih keren dari generasi yang lainnya. tetapi itu semua tergantung dari bagaimana cara menggunakan aplikasi tersebut dengan keahlian kalian masing masing. Ok langsun...
Baca selengkapnya

5 Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis | Tutorial Lengkap

Gambar
Lima Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis. Untuk memulai sebuah bisnis atau berwirausaha yang sukses maka kita memerlukan pengetahuan dan pengalaman yang cukup untuk mengelola usaha tersebut, selain itu juga jika bisnis tersebut sudah berkembang besar maka diperlukan mentor yang profesional sehingga kita akan terbantu saat menangani masalah pada bisnis kita dan juga orang yang dapat dipercaya. Zona Internetku September 02, 2019 Berbicara soal usaha, aku akan membahasnya dari yang mendasar yaitu pengetahuan atau ilmu buat menemukan ide, memulai Untuk mempejalari semua itu kita bisa memperolehnya dengan belajar mengikuti sebuah kursus, pelatihan maupun seminar. Namun kita juga bisa mendapatkan semua ilmu tersebut melalui situs-situs di internet yang telah dibagikan secara gratis, untuk mengetahuinya silahkan simak daftarnya disini. Website Terbaik Untuk Belajar Dalam Memulai Bisnis 1. Trend...
Baca selengkapnya