Skip to content Skip to sidebar Skip to footer

Modifikasi Style Widget Label Cloud Keren Untuk Blogger Terbaru

input learn - Membuat label widget yang keren untuk blogger, label blog sangatlah berfungsi yaitu sebagai pelengkap dari sebuah blog kita dan pengunjung tidak hanya membaca salah satu dari postingan kita, namun juga banyak kategori lain dari blog kita yang dapat dibaca oleh para pengunjung.

Modifikasi Style Widget Label Cloud Keren Untuk Blogger Terbaru

Fungsi label adalah sebagai memberitahukan isi apa saja yang sedang dibahas dalam blog seseorang, dengan tampilan kategori - kategori yang tersedia di widget label tersebut.

Untuk label sendiri saya sangat tertarik dengan label yang super keren buatan dari mbak Arlina Design, label yang akan admin berikan ini merupakan label berwarna atau bisa di sebut gradient. Ya sangat bagus sih menurut Admin, Tertarik memasang di blog kalian?

Oh iya saran nih, bagi yang belum mempunyai template blog yang keren - keren dan kece, Amin juga ada nih beberapa template blog yang responsive dan super seo friendly, terdiri dari AMP dan NON AMP, bisa deh coba lihat - lihat di bawah ini:

[ Kumpulan Template Premium Redesign Bagus Untuk Blog Tanpa Credit Link ]

Lanjut kepembahasan, Modifkasi style label blog keren.

Modifikasi Widget Label Blog Keren Terbaru

 1. Masuk ke blogger teman - teman menggunakan akun Gmail kalian,

2. Selanjutnya pilih Tema ~ Edit HTML,

3. Copas kode CSS di bawah ini tepat di atas ]]></b:skin> / </style> untuk permudah pencarian silahkan ketikkan CTRL + F di keyboard kalian.

  .artikel-terbaru ul li::before, .LinkList ul li::before, .PageList ul li::before
/* Label Arlina */
.list-label-widget-content ul li a {border-bottom: 1px dotted #e6e6e6;border-radius: 5px;margin-bottom: 3px;font-size: 14px;color: #de0985;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;display: block;transition: initial;padding: 7px 11px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.list-label-widget-content ul li a:hover {background: #f5f5f5;color: #888;}
.list-label-widget-content ul li {list-style-type: none;margin: 0 0;border:none;display: inline-grid;width: 100%;}
.list-label-widget-content {padding: 0px 7px;}
div.Label{background: #fff;padding-bottom: 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
div.Label h2 {border-top: 2px solid #df0d83;padding: 15px 0;text-indent: 20px;width: 100%;border-bottom: 1px solid #dadada;margin-bottom: 5px;}
.Label h2 svg {float: right;margin-right: 15px;    display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
.widget:hover h2 > svg {animation: rubberBand 1s;}
.list-label-widget-content ul li a:before {background-image:url("data:image/svg+xml,");margin-right: 10px;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

Jika ingin mengganti warna pada icon label tersebut, silahkan cari kode fill='%23de0985' silahkan ganti kode warna sesuai keinginan, "Ingat" jangan menghapus yang %23 yang di ganti cukup belakangnya saja ya.
4. Selanjutnya adalah memasangkan icon nya, karena sudah di ganti warna sekarang memasang iconnya, copas kode JS di bawah ini:

  <svg viewBox="0 0 24 24">
<path d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z" fill="#e94c60"></path>
</svg>

dan paste kan di sebelah atau sesudah kode <data:title/> untuk mempermudah pencarian ketikkan Lompat ke Widget dan cari kodenya.

label1.png

Jika sudah silhkan Simpan Tema

5. Selanjutnya untuk pengaturan widget dari label tersebut, untuk settingnya masuk ke Tata Letak dan setting seperti gambar dibawah ini.

label.png

6. Klik Simpan Setelan, dan lihat hasilnya,

Baca Juga : Cara Membuat Widget Popular Post Keren dan Elegan

Jika ada yang kesulitan atau tidak berhasil tampil bisa ketikkan keluhan kalian di kolom komentar, nanti saya akan bantu sampai berhasil. Terimakasih
Paijem
Paijem Saya adalah Blogger pemula yang ingin share informasi sebisa saya, lewat pengalaman selama ini.

Post a Comment for "Modifikasi Style Widget Label Cloud Keren Untuk Blogger Terbaru"

Berlangganan via Email