Modifikasi Widget Label Ala Metro Style

Modifikasi Widget Label Ala Metro Style - Sesuai thema yang kita bahas sebelumnya  tentang template blog metro, dan widget unik metro style disini saya juga akan memberikan tips blog sederhana untuk modifikasi widget label default blogger ke gaya blog metro ui style. Untuk caranya sangat sederhana dan simple sekali hanya dengan menambahkan sedikit kode css ke dalam template blog. Caranya copy kode css dibawah ini sebelum kode ]]></b:skin>

CSS CODE

.Label a{
padding-left:10px;
background:#007f74;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#ff8c00;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}

Silakan ganti warna background # 007f74 dan #ff8c00 untuk hover backgroundnya sesuai selera anda, kode css diatas hanyalah contoh sederhana saja. Dan untuk modifikasi pengembangan silakan anda berkreasi sendiri agar tampilan lebih maksimal. Anda juga bisa memilih untuk tampilan labelnya yaitu Cloud dan List pada edit widget label. Untuk demonya bisa anda lihat label pada blog ini

Contoh kode CSS pengembangannya seperti dibawah ini :

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #007f74;
border-radius: 3px;
float:left;text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #ff8c00;
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;
}

Demikian sedikit tips sederhana widget unik untuk metro style, semoga bermanfaat dan Happy Blogging

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit