Agar pengunjung dapat membaca artikel sesuai kategori yang diinginkan, maka sebaiknya label dipadang pada bagian sidebar. Nah agar terlihat menarik maka perlu dimodifikasi terlebih dahulu, sehingga tampilan label cloud nanti terlihat menarik untuk dikunjungi.
Label blogger dibagi menjadi 2 yaitu label dengan bentuk list dan label berbentuk cloud, ternyata label versi cloud lebih banyak diminati dengan alasan tampilan lebih feleksibel dan banyak tampilan menarik yang bida dipasang di blog.
Perbedaannya pada label daftar atau list ini tampilannya dari atas ke bawah setiap label atau kategori terdiri dari satu baris, sedangkan label cloud tampilannya dari kiri ke kanan setiap label atau kategori bisa lebih dari satu baris.
Mempercantik tampilan blog merupakan hal yang perlu dilakukan oleh setiap blogger, ada banyak cara untuk membuat tampilan blog semakin menarik salah satunya yaitu dengan memasang dan memodifikasi tampilan label cloud di blog.
Label atau bisa kita sebut dengan kategori memiliki fungsi yang sangat berguna untuk membantu kita atau bahkan pengunjung yang mencari artikel sesuai dengan kategori yang diinginkannya.
Nah, pada kesempatan kali ini saya akan membuat tutorial cara membuat label cloud keren di blogger, jadi kita akan modifikasi tampilan label atau kategori default blogger atau tampilan default template blog Anda.
Untuk mengubah tampilan widget label cloud di blog, kita hanya perlu menambahkan kode css yang sudah di modifikasi agar tampilan widget label atau kategori ini menjadi lebih keren dan menarik saat dilihat.
Pertama, mari kita coba memasang terlebih dahulu label cloud di blog kita, karena biasanya secara default kita menggunakan label list atau label daftar.
Untuk mengubahnya menjadi label cloud silahkan ikuti langkah-langkahnya di bawah ini.
Cara Memasang Label Cloud di Blogger
Agar tutorial ini bekerja, kita ubah dulu jenis label yang kita gunakan menjadi label cloud. Caranya sebagai berikut:
1. Masuk ke Blogger.com
2. Klik Tata Letak > Tambahkan Gadget > Label
3. Pada bagian Tampilkan pilih Cloud Lihat gambar contoh !!!
4. Setalah itu klik Simpan
/* Cloud Label Style 2 */
.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;}
Hasil seperti ini :
Untuk modifikasi tampilan cloud label supaya terlihat lebih keren, kita tambahkan kode css untuk mengubah tampilan desainnya.
Perlu diingat, alangkah baiknya sebelum mencoba tutorial ini hapus dulu kode css label yang ada pada template blog Anda saat ini.
Karena setiap tamplate memiliki kode css yang berbeda, silahkan Anda cari sendiri kode css label yang ada pada template Anda dengan menggunakan inspect element untuk mengetahui kode cssnya. Baca Juga : Cara-jitu-agar-webblog-diindeks
Jika kode css bawaan template sudah di hapus, silahkan ikuti langkah-langkahnya di bawah ini untuk memodifikasi tampilan label cloud.
1. Masuk ke Blogger.com
2. Klik Template > Edit HTML
3. Silahkan simpan salah satu kode css di bawah ini, lalu simpan di atas kode ]]></b:skin> atau </style>
4. Lalu klik Simpan tema.
Komentar
Posting Komentar
SILAKAN KOMENTAR SESUAI TOPIK.....