Bikin Profile Gadget Miring

Sekilas jika anda melihat blog ini, akan tampak perbedaan antara kolom sidebar profile dengan kolom widget sidebar yang lain. Profile ini saya - rotate sekitar +2 deg ke arah kanan.
Perbedaan ini yang akan menjadi topik bahasan kita sekarang.

Bagaimana cara melakukan ini ?
Intinya agar kegiatan miring adalah dengan memasang webkit script dibawah ini di script Profile blog kita.

.Profile {-webkit-transition: -webkit-transform .15s linear;
padding: 15px 15px 5px 5px;background:#fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border: 0 none !important;
}

Ini adalah script profile
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 0px solid $borderColor;
}.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 11px;
}

.profile-datablock {
margin:.5em 0 .5em;
}.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-img {
color: #ffff33;
float:right;
}

sehingga bila digabungkan akan menjadi seperti ini :

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 0px solid $borderColor;

.Profile {-webkit-transition: -webkit-transform .15s linear;
padding: 15px 15px 5px 5px;background:#fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border: 0 none !important;
}

}.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 11px;
}

.profile-datablock {
margin:.5em 0 .5em;
}.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-img {
color: #ffff33;
float:right;
}

Demikian Tips singkat ini. semoga bermanfaat!
Share on :

3 komentar:

Belajar Blogspot said...

Gadget miring unik sob, beri variasi yang berbeda.thanks buat ilmunya ^^

Anonymous said...

he..hee...sharing dasar az sob! silahkan kreasikan lebih lanjut!

istiqlal gest said...

weyy , bermanfaat sekali boss, jadi keren hehe

 
© Copyright Berbagi Inspirasi Seputar Dunia Blogger 2011 - Some rights reserved | Powered by Blogger.com.
Template Design by Herdiansyah Hamzah | Published by Borneo Templates and Theme4all