Cara Mengubah Tampilan Label Pada Blog

Salah satu pengaturan widget blogger digunakan untuk menampilkan semua kategori atau label dalam sebuah blog. Desain widget yang ada di Blogger ini bisa kita ubah sesuai kreativitas atau keinginan kita. Pada posting ini saya akan menampilkan desain widget label yang dapat anda display atau pasang dalam blog anda. Saya akan memberikan widget label 3D yang akan tampak lebih keren dari style default. Secara default mungkin blogger mendesain widget label yang kurang menarik. Anda dapat menyesuaikan widget label anda dengan menambahkan beberapa kode CSS3 . Saya harap anda akan suka dengan style widget label ini. Hal ini akan terlihat di sidebar anda dengan penambahan animasi flash pada widget label. Anda bisa melihat pratinjau dalam gambar seperti dibawah.

Cara menambahkan widget label seperti gambar yaitu

1 . masuk ke blogger dashboard --> klik blog anda --> klik Layout --> klik Add Gadget --> klik Label .

2 . buat pengaturan seperti gambar di bawah .

3 . pilih Cloud dari display setting .

4 . hapus tanda centang pada 'show number of posts per label'

5 . save

.Tambahkan Style Sheet untuk mengubah tampilan widget label menjadi keren wew

1 . klik Template --> edit HTML ( Buat backup template sebelum editing )

2 . cari kode berikut di HTML anda.

]]></b:skin>

3 . paste kode CSS di bawah ini tepat diatasnya.

.Label a{  border-radius:5px; float:left;padding:5px 8px;margin:3px 3px 0px 0;background: rgb(0,100,180); 

background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); 

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); 

background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 

background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 

background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 

background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); 

display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); 

}

.Label a:hover{color:#0afafa !important; background:#123d60;}

4. klik preview template sebelum  anda menyimpannya.

5. save template jika anda menyukainya.

.Masalah Pengaturan

1. anda dapat mengganti warna background sesuai warna yang anda pilih. cukup replace kode ditandai dengan warna merah dengan kode warna anda sendiri. anda bisa memeriksa warna kode pada template design blogger anda atau menghasilkan kode warna menggunakan adobe photoshop.

2. anda juga dapat mengubah hover background atau warna sorot latar belakang dengan merubah kode yang ditandai warna biru. 

3. anda dapat mengubah kecepatan animasi dengan mengubah durasi (dalam detik ) di CSS .4 s dengan .6 s atau .7 s atau nilai berapapun yang anda suka. Saya harap anda menikmati dengan tampilan baru untuk widget label cloud anda . enjoy :)

Sumber : Part time online sfi