Cara mengubah tampilan label di blogger

Cara mengubah tampilan label di blogger

Legend of Blog - Oke kali ini Heru Purnama, akan menyempatkan untuk posting tentang trick lagi nih. Bagaimana cara mengubah tampilan label di blogger agar lebih menarik lagi ? Nah di posting kali ini akan kita bahas. Ada 2 langkah lho. Silakan pilih Langkah 1 atau Langkah 2 sama saja.
Langkah 1 :

1. Kunjungi dan Masuk ke dalam http://www.blogger.com
2. Dipastikan untuk sudah memiliki gadget label, yang belum punya silahkan add gadget.
3. Settingan label harus menggunakan Cloud, dan pilihan lainnya terserah. Sebagai contoh lihat ini :
   
4. Lalu tekan Save, bila penyetingan telah selesai.
5. Masuk ke Template dan pilih Edit HTML, dan jangan lupa untuk mem backup template kamu, untuk aman-aman saja.
6. Cari kode </b:skin> lebih cepat menggunakan CTRL+F
7. Setelah ditemukan kode diatas Copy lalu Paste kode berikut tepat diatas kode </b:skin>
8. /*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
   .label-size{
   margin:0 2px 6px 0;
   padding: 3px;
   text-transform: uppercase;
   border: solid 1px #C6C6C6;
   border-radius: 3px;
   float:left;
   text-decoration:none;
   font-size:10px;
   color:#666;
   }
   
   .label-size:hover {
   border:1px solid #6BB5FF;
   text-decoration: none;
   -moz-transition: all 0.5s ease-out; 
   -o-transition: all 0.5s ease-out; 
   -webkit-transition: all 0.5s ease-out; 
   -ms-transition: all 0.5s ease-out; 
   transition: all 0.5s ease-out;
   -moz-transform: rotate(7deg); 
   -o-transform: rotate(7deg); 
   -webkit-transform: rotate(7deg); 
   -ms-transform: rotate(7deg); 
   transform: rotate(7deg); 
   filter: progid:DXImageTransform.Microsoft.Matrix(
                       M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
   zoom: 1; 
   }
   
   .label-size a  {
   text-transform: uppercase;
   float:left;
   text-decoration: none;
   }
   .label-size a:hover  {
   text-decoration: none;
   } 
9. Lalu Save Template kamu, dan lihat hasil label nya.

Langkah 2 :

1. Kunjungi dan Masuk ke dalam http://www.blogger.com
2. Dipastikan untuk sudah memiliki gadget label, yang belum punya silahkan add gadget.
3. Settingan label harus menggunakan Cloud, dan pilihan lainnya terserah. Sebagai contoh lihat ini :
   
4. Lalu tekan Save, bila penyetingan telah selesai.
5. Pergi ke Template --> klik sesuaikan --> klik tingkat lanjut --> klik tambahkan CSS.
6. Masukkan kode berikut di kolom tambahkan css tadi.
7. /*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
   .label-size{
   margin:0 2px 6px 0;
   padding: 3px;
   text-transform: uppercase;
   border: solid 1px #C6C6C6;
   border-radius: 3px;
   float:left;
   text-decoration:none;
   font-size:10px;
   color:#666;
   }
   
   .label-size:hover {
   border:1px solid #6BB5FF;
   text-decoration: none;
   -moz-transition: all 0.5s ease-out; 
   -o-transition: all 0.5s ease-out; 
   -webkit-transition: all 0.5s ease-out; 
   -ms-transition: all 0.5s ease-out; 
   transition: all 0.5s ease-out;
   -moz-transform: rotate(7deg); 
   -o-transform: rotate(7deg); 
   -webkit-transform: rotate(7deg); 
   -ms-transform: rotate(7deg); 
   transform: rotate(7deg); 
   filter: progid:DXImageTransform.Microsoft.Matrix(
                       M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
   zoom: 1; 
   }
   
   .label-size a  {
   text-transform: uppercase;
   float:left;
   text-decoration: none;
   }
   .label-size a:hover  {
   text-decoration: none;
   }  
8. Klik [Terapkan ke Blog] ada di ujung kanan atas.