Thursday, March 30, 2017
Mengedit Tampilan Personal Gadget Label CSS 3
Mengedit Tampilan Personal Gadget Label CSS 3
Cara Mudah Membuat dan Mengedit Tampilan Personal Gadget Label menggunakan CSS 3 - Tips dan Triks merubah tampilan Gadget Label dengan CSS 3 untuk Membuat Blog lebih Rapi dan tentunya berbeda dengan Blog lain.
 |
| Personal Label Gadget |
Beberapa Blogger sudah menggunanakan variasi Personal Gadget ini, namun tidak ada salahnya Anda menaruhnya di blog Anda dengan sedikit modifikasi seperti Warna dan Posisinya.
Cara Mengedit Tampilan Personal Gadget Label CSS 3, bisa Anda lakukan dengan menaruh script dibawah ini diatas ]]></b:skin>
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
Setelah itu save, kemudian silah kan menuju tata letak dan add gadget label Anda.
Semoga Artikel diatas dapat memberikan gambaran rekan-rekan blogger.
Ingat di Follow ya, habis itu comment agar saya bisa berkunjung balik ke blog Anda.
Available link for download
