Search

Cara Membuat Widget Label Keren Dengan Efek Scroll

cara memodifikasi label cloud di blog menjadi keren
Tutorial membuat label blog keren
Salah satu komponen yang saya rasa penting ada di blog atau website adalah widget label.

Kenapa saya anggap penting? Karena label memudahkan pengunjung blog Anda mencari artikel lainnya berdasarkan kategori yang ada.

Jadi visitor tidak akan susah payah mencari artikel di kotak penelusuran blog, dengan adanya widget label mereka hanya perlu memilih kategori artikel yang diinginkan.

Namun masalahnya, semakin banyak artikel Anda maka label juga akan bertambah.

Dari segi kerapian tentu saja itu tidak terlihat baik dan terkesan berantakan apabila widget label semakin membesar karena bertambah jumlah kategori di dalamnya.

Tenang, ada cara untuk memecahkan masalah tersebut, yaitu memanfaatkan efek scroll.

Fungsi scroll itu sendiri agar tampilan blog terlihat lebih rapih, jadi widget di blog tidak akan memakan banyak tempat.

Jadi untuk memunculkan efek scroll, kita menggunakan property CSS seperti text-overflow: ellipsis, white-space: nowrap, dan overflow: hidden.

Jadi dengan adanya properti overflow hidden, apabila konten yang ada terlalu banyak dan melebihi box, maka konten sisanya akan disembunyikan.

Bagaimana cara mengimplementasikan di blog? Yuk simak tutorialnya di bawah ini.

Preview

Modifikasi Widget Label Blog Menjadi Keren


1. Masuk dan login ke blogger.com
2. Di dashbor blogger, klik Tema > Edit HTML
3. Jika Anda memakai tempalate viomagz silahkan cari CSS di bawah ini, lalu hapus. Untuk Anda yang tidak memakai theme Viomagz, lewati saja langkah ke 3 ini 

/* Label */
.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: $(label.bg.color);
 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: $(body.link.color);
    font-size: 13px;
}
.label-size a,.label-size span{
 display: inline-block;
 color: $(label.color);
 padding: 8px 12px;
}
.label-count {
 margin-left: -12px;
    margin-right: 0px;
}

.list-label-widget-content ul {
 font-size: .9rem;
    -moz-column-count: 2;
    -moz-column-gap: 8px;
    -webkit-column-count: 2;
    -webkit-column-gap: 8px;
    column-count: 2;
    column-gap: 8px;
}
.list-label-widget-content ul li {
 padding-bottom: 5px;
 margin: 0 0;
 padding-top: 5px;
}

.bellow-header-widget .cloud-label-widget-content {
}

.bellow-header-widget .cloud-label-widget-content .label-size {
 font-weight: bold;
}
.bellow-header-widget .cloud-label-widget-content .label-size a, .bellow-header-widget .cloud-label-widget-content .label-size span {
 padding:  15px 20px;
}

4. Selanjunya, salin CSS widget label scroll-nya di bawah ini. Kemudian pastekan tepat di atas kode </style> atau </b:skin>

/* Label */
.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:0 0;transition:all .25s;-moz-transition:all .25s;-webkit-transition:all .25s;line-height:1.2;display:block;float:left;margin:0 3px 3px 0;font-size:13px;border:1px solid #151b54}.label-size a,.label-size span{display:inline-block;color:#151b54;padding:8px 12px;font-family:georgia,arial,sans-serif}.label-count{margin-left:-12px;margin-right:0}.list-label-widget-content ul{font-size:.9rem;-moz-column-count:2;-moz-column-gap:8px;-webkit-column-count:2;-webkit-column-gap:8px;column-count:2;column-gap:8px}.list-label-widget-content ul li{padding-bottom:5px;margin:0 0;padding-top:5px}.bellow-header-widget .cloud-label-widget-content .label-size{font-weight:700}.bellow-header-widget .cloud-label-widget-content .label-size a,.bellow-header-widget .cloud-label-widget-content .label-size span{padding:15px 20px}
.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 #333;/*warna garis kiri*/
margin-bottom: 3px;font-family:georgia,arial,sans-serif;font-size:14px; color:#151b54;letter-spacing:.8px;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;display: block;transition: all .3s ease;padding: 7px 11px;}
.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);}
.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;}
.list-label-widget-content::-webkit-scrollbar{width:5px;height:1px;background:#ececec}
.list-label-widget-content::-webkit-scrollbar-thumb{background:#151b54;}/*warna scroll*/
.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='M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z' fill='%23151b54'></path></svg>");margin-right: 10px;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
5. Save dan selesai.
6. Ettt tunggu dulu. Untuk Anda pengguna template Viomgz belum selesai sampai di situ saja. Cari CSS berikut ini.

/* Artikel Terbaru */
.artikel-terbaru ul li {
    padding-bottom: 8px;
 margin-bottom: 8px;
 font-weight: bold;
}
.LinkList ul li, .PageList ul li {
    padding: 6px 0px;
}
.artikel-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::before {
 content: " ";
 background: $(body.link.color);
 width: 8px;
 height: 8px;
 display: inline-block;
 border-radius: 4px;
 vertical-align: middle;
 margin-right: 3px;
 opacity: .7;}

7. Hapus dan ganti dengan CSS di bawah ini.

.artikel-terbaru ul li{padding-bottom:8px;margin-bottom:8px;font-weight:700}.LinkList ul li,.PageList ul li{padding:6px 0}.LinkList ul li::before,.PageList ul li::before,.artikel-terbaru ul li::before{content:" ";background:$(body.link.color);width:8px;height:8px;display:inline-block;border-radius:4px;vertical-align:middle;margin-right:3px;opacity:.7}

8. Selesai beneran.

Cara konfigurasinya:

Agar efek scroll nya muncul pada bagian widgetnya, di halaman konfigurasikan label silahkan Anda pilih daftar pada bagian tampilkan. Untuk lebih jelasnya lihat di bawah ini.

Cara membuat label cloud keren di blogger


Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel