Cara Customize Blogger Label Dengan CSS3 Efek
7/23/20150
Tag Clouds digunakan untuk menampilkan semua kategori atau label dalam keadaan berjanjar dari sebuah blog.
Desain yang melekat dari widget ini sangat banyak di Blogger dan memiliki banyak ruang untuk kreativitas. Dalam posting ini saya akan menampilkan desain Label Widget yang Anda dapat dengan mudah mengintegrasikan dalam blog Anda.
Saya akan merancang label seperti tombol 3D yang akan menarik lebih dari gaya default biasanya. CSS3 Gradien dan Kotak-bayangan sifat juga digunakan untuk memberikan lebih gaya didalam CSS blogger label. Dengan blogger standar hadir dengan desain yang simple dan terlihat cantik.
Anda dapat menyesuaikan widget Label Anda dengan menambahkan beberapa kode CSS3. Saya harap Anda akan mengikuti tutorial ini. animasi efek melayang yang di desain dan tidak akan memakan banyak ruang bagian sidibar.
Saya tidak bisa memberikan tampilan (demo) untuk tutorial ini. tapi anda bisa melihat pratinjau dalam deskripsi gambar.
Caranya Tambahkan kode Ini Untuk Blogger
1. Blogger Dashboard >> blog Anda >> Tata Letak >> Tambah Gadget >> Label.
2. Sekarang membuat pengaturan yang ditunjukkan pada gambar di bawah.
3. Pilih Cloud dari pengaturan label layar.
4. Hapus tanda centang Show jumlah posting per label.
5. simpan dengan menekan tombol oranye.
Tambahkan Style Sheet Untuk Membuat Ini Menarik
1. Pergi ke editor template >> EDIT HTML: (Membuat backup template yang sebelumnya editing)
2. Cari kode berikut di HTML Anda. ]]></b:skin>
3. Paste kode CSS berikut sebelum / di atas garis yang:
.Label a{ 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:#000 !important; background:#123d60;}
4. Preview, Anda akan melihat tombol muncul di bawah widget sidebar.
5. Klik Simpan
Caranya Tambahkan kode Ini Untuk Blogger
1. Blogger Dashboard >> blog Anda >> Tata Letak >> Tambah Gadget >> Label.
2. Sekarang membuat pengaturan yang ditunjukkan pada gambar di bawah.
3. Pilih Cloud dari pengaturan label layar.
4. Hapus tanda centang Show jumlah posting per label.
5. simpan dengan menekan tombol oranye.
Tambahkan Style Sheet Untuk Membuat Ini Menarik
1. Pergi ke editor template >> EDIT HTML: (Membuat backup template yang sebelumnya editing)
2. Cari kode berikut di HTML Anda. ]]></b:skin>
3. Paste kode CSS berikut sebelum / di atas garis yang:
.Label a{ 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:#000 !important; background:#123d60;}
4. Preview, Anda akan melihat tombol muncul di bawah widget sidebar.
5. Klik Simpan
Nah itulah tadi beberapa tutorial yang berguna untuk mempercantik tampilan bagian label wigdet blogger yang bisa anda lakukan secara mudah.