Mengubah Bentuk Avatar Pada Blogspot

Bagi sebagian orang mengutak ngatik tampilan blog mungkin mengasyikkan, nah bagi yang ingin mengubah bentuk avatar di blogspot begini caranya

- Temukan kode:

</style>

- Then save the code above

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
}

.avatar-image-container{
 border:3px solid #009999 !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

Untuk mengubah warna border/garis pembatas silahkan ganti kode #009999 dengan kode warna yang kamu suka sedangkan untuk mengubah ketebalannya ubah kode 3px.

Hasilnya jadi seperti ini:

Jika ingin menggunakan bentuk yang lain, silahkan ganti kode:

 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;

dengan kode-kode berikut ini:

Bullet

Code:

border-radius: 20px 100px 100px 20px;
-moz-border-radius: 20px 100px 100px 20px;
-webkit-border-radius: 20px 100px 100px 20px;

Hasilnya seperti ini:

Leaf

Code:

border-radius: 0 100px 0 100px;
-moz-border-radius: 0 100px 0 100px;
-webkit-border-radius: 0 100px 0 100px;

Hasilnya seperti ini:

Hemisphere

border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;

Hasilnya seperti ini:

Round Rectangle

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Hasilnya seperti ini:

Rhombus

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

Hasilnya seperti ini: