Cara Edit / Modifikasi Widget Label Dengan Efek Scroll

Pada kesempatan tutorial blogger kali ini, saya akan membagikan sebuah tutorial bagaimana caranya membuat Widget Label dengan Efek Scroll diBlogger.

Label merupakan hal penting yang harus ada di Web log kamu, karna dengan menggunakan label, pengunjung atau kamu sendiri dapat lebih mudah menemukan kategori artikel yang serupa, oleh karena itu biasanya para pemilik blog akan memasang widget label di widget sebelah kanan agar lebih mudah ditemukan. Nah mungkin kamu bosan dengan tampilan widget blog kamu yang itu itu aja, disini kamu dapat menemukan cara untuk memodifikasi widget label kamu agar menjadi lebih menarik.

Untuk memodifikasi widget label ini caranya cukup mudah gak terlalu ribet, dan untuk kamu yang menggunakan template viomagz akan jauh lebih mudah karna hanya perlu tempel tempel aja, tapi untuk template lain mungkin butuh sedikit usaha karna mungkin struktur kodenya agar berbeda namun itu tidaklah terlalu sulit, apabila kamu kesulitan kamu dapat berkomentar dibawah, dan cantumkan nama blog aja (tidak perlu link !!), agar saya dapat membantu kamu.

Yuk langsung saja simak bagaimana cara memodifikasinya.

Cara Edit / Modifikasi Widget Label Dengan Efek Scroll

Pertama, login dulu ke Blogger,
Kemudian, pada dashboard Blogger pilih Tema ⇒ Edit HTML,

Setelah itu, untuk pengguna template Viomagz cari atau temukan kode CSS seperti dibawah ini, lalu hapus

.artikel-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::before {
content: "\f14b"; 
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 6px;
color: $(body.link.color);
}
.artikel-terbaru ul li::before {
content: "\f14b";
}
.list-label-widget-content ul li::before {
content: "\f07b"; 
}
.LinkList ul li::before {
content: "\f14c"; 
}
.PageList ul li::before {
content: "\f249"; 
}

Setelah dihapus ganti dengan kode CSS yang sudah saya sediakan dibawah ini:

/* Widget Label Dengan Efek Scroll By Anirocksite */
.list-label-widget-content ul li a {box-shadow:1px 1px 3px 2px rgba(0,0,0,0.11);-webkit-box-shadow:1px 1px 3px 2px rgba(0,0,0,0.11);border-left:3px solid #ff69b4;border-bottom: 1px dotted #e6e6e6;border-radius: 5px;margin-bottom: 3px;font-size: 14px;letter-spacing:.8px;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;display: block;transition: all .3s ease;padding: 7px 11px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.list-label-widget-content ul li a:hover {box-shadow:1px 1px 3px 2px rgba(0,0,0,0.11);-webkit-box-shadow:1px 1px 3px 2px rgba(0,0,0,0.11);transform: rotate(-3deg);transition: all .5s ease-in-out;}
.list-label-widget-content ul li {list-style-type: none;margin: 0 0;border:none;display: inline-grid;width: 95%;}
.list-label-widget-content {height:150px;width:auto;overflow:auto;padding:5px 0 0 7px;}
div.Label{background: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
div.Label h2 {font-size:18px;letter-spacing:.8px;padding: 8px 0;text-indent: 20px;width: 100%;border-bottom: 2px solid #ff69b4;margin-bottom:0;}
.list-label-widget-content::-webkit-scrollbar{width:5px;height:1px;background:#ececec}
.list-label-widget-content::-webkit-scrollbar-thumb{background:#ff69b4;}
.Label h2 svg {float: right;margin-right: 15px;margin-top:3px;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,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z' fill='%23ff69b4'></path></svg>");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)}}

Kemudian simpan/save template.

Jika kamu ingin menambahkan Icon di sebelah kanan Nama atau Judul Widget, copy kode SVG dibawah 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='#ff69b4'/>
</svg>

setelah itu letakkan tepat setelah <h2><data:title/>KODE SVG</h2>, agar lebih cepat menemukannya, tekan "Lompat ke Widget" tepat disamping tombol "Simpan Teman" yang berlatar orange, selanjutnya lihat digambar bawah ini, kemudian simpan.

Dan Simpan/save tema.

Untuk memunculkannya, didashboard Blogger ⇒ pilih Layout atau Tata Letak ⇒ Pilih Widget Sidebar atau Sebelah Kanan, tekan Tambahkan Widget ⇒ Pilih Label, lakukan penyettingan seperti digambar bawah ini dan simpan.

Sekian tutorial blogger yang saya bagikan, jika kamu kesulitan silahkan berkomentar dibawah agar saya dapat membantumu, untuk mendapatkan info update artikel berikutnya silahkan berlangganan di widget footer sebelah kanan blog ini.

DEMO