Membahas desain untuk kelengkapan navigasi atau mempercantik tampilan blog memang tidak ada habisnya. Berbagai tutorial telah dibagikan untuk membantu para pengelola blog dalam mendesain tampilan blognya. Termasuk postingan ini, pada kesempatan kali saya ingin berbagi turorial tentang cara membuat dan modifikasi tampilan widget Label bentuk Cloud agar menjadi lebih keren di Blog.
Widget Label adalah salah satu fitur blog yang berfungsi untuk mengumpulkan berbagai postingan ke dalam kategori-kategori yang sama. Kategori-kategori tersebut akan ditampilkan melalui widget ini sehingga blog terlihat rapi dan mudah dijelajahi. Artinya, widget label ini bisa menjadi navigasi penting agar blog mudah digunakan oleh pembaca saat mencari berbagai topik artikel menarik pilihan pembaca sesuai kategori di blog tersebut.
Widget ini memang cukup membantu pengunjung dalam menjelajahi setiap konten di blog kita. Blogspot sendiri juga telah menyediakan widget ini sehingga anda tinggal memasangnya melalui menu layout (tataletak). Ada dua pilihan bentuk label yang bisa anda pilih, yakni bentuk list ke bawah dan bentuk cloud seperti tombol-tombol kotak berjajar menyamping. Widget ini akan menampilkan semua label di blog anda sehingga pengunjung tinggal memilihnya sesuai kebutuhan.
Dari kedua bentuk widget Label, tampilan berbentuk cloud memang lebih cocok untuk dimodifikasi lagi agar semakin menarik perhatian pembaca. Jika anda pandai mendesain tampilan blog, anda bisa menambahkan sendiri efek-efek tertentu semau anda dengan menambahkan beberapa kode lewat edit html template. Namun bagi anda yang tidak bisa mendesainnya sendiri, mungkin anda bisa ikuti tutorial di bawah ini untuk membuat widget label cloud di blog anda agar terlihat lebih menarik.
Cara Membuat dan Modifikasi Widget Label Cloud
Seperti terlihat pada gambar ilustrasi di atas, ada 3 style bentuk label cloud keren untuk bisa anda pilih. Namun sebelum itu, kita mesti memasang widgetnya terlebih dulu lewat menu tataletak blogger.
1. Buka akun blogger anda.
2. Pilih menu layout (tata letak) dan klik pada add gadget (Tambahkan Gadget).
3. Selanjutnya pilih Labels. Jika sudah, lihat gambar berikut ini:
Keterangan:
- Silahkan beri judul widget misalnya Kategori, Label, atau semacamnya.
- Pengaturan show dan sorting silahkan atur sesuai pilihan anda.
- Untuk display silahkan pilih Cloud, jumlah postingan bisa anda kosongkan atau pilih juga boleh.
3. Klik simpan.
Widget Label Cloud sudah muncul di blog anda. Sekarang tinggal langkah untuk memodifikasi tampilannya.
4. Kembali pada menu dashboard blogger, pilih tema dan klik edit html.
5. Kemudian cari kode ]]></b:skin> atau </style>.
6. Jika sudah ketemu, silahkan anda copy salah satu script kode dari pilihan tiga style di bawah ini dan letakkan di atasnya.
Cloud Label style 1
/* Label Cloud 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{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}
Cloud Label Style 2
/* Label Cloud Style 2 */ .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;}
Cloud Label Style 3
/* Label Cloud Style 3 */ .cloud-label-widget-content {text-align: left;} .label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;} .label-size:nth-child(1) {background: #F86D9E;} .label-size:nth-child(2) {background: #37C371;} .label-size:nth-child(3) {background: #10BBEA;} .label-size:nth-child(4) {background: #25CBFE;} .label-size:nth-child(5) {background: #963690;} .label-size:nth-child(6) {background: #A3195C;} .label-size:nth-child(7) {background: #545454;} .label-size:nth-child(8) {background: #F2A15F;} .label-size:nth-child(9) {background: #00FF80;} .label-size:nth-child(10) {background: #B7860B;} .label-size:nth-child(11) {background: #99CC33;} .label-size:nth-child(12) {background: #FFFF3D;} .label-size:nth-child(13) {background: #3FDECF;} .label-size:nth-child(14) {background: #FF2F0A;} .label-size:nth-child(15) {background: #E9DB58;} .label-size:nth-child(16) {background: #42FFBD;} .label-size:nth-child(17) {background: #6899ED;} .label-size:nth-child(18) {background: #FF52AE;} .label-size:nth-child(19) {background: #8DBC2F;} .label-size:nth-child(20) {background: #80FF00;} .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; } .label-size:hover { background: #222; } .label-count { white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333; color: #fff ; } .label-size:hover .label-count, .label-size:focus+.label-count { background-color: #FF6BFF; }
7. Simpan kembali template anda dan lihat hasilnya.
Ohya, jika sebelumnya telah terpasang kode CSS untuk widget label cloud di template blog anda, silahkan hapus terlebih dulu agar tidak bentrok dengan kode CSS yang baru. Demikianlah Cara Membuat dan Modifikasi Widget Label Cloud Menjadi Keren di Blog. Semoga bermanfaat.
Social Plugin