Membuat Profil Kartu Identitas Dengan CSS3

Membuat Profil Kartu Identitas Dengan CSS3 – kalau di lihat-lihat pada sidebar blog kebanyakan blogger mencantumkan profil admin dari blog tersebut adalah informasi profil yang ada pada akun Google+ miliknya. Profil Kartu Identitas Dengan CSS3 ini akan bisa saja ditampilkan pada sidebar blog untuk menggantikan fungsi dari profil yang sudah ada pada sebelumnya, hanya dengan mengisi sedikit informasi tetang pemilik blog lalu menerapkannya kedalam widget blogger. Selain itu pula dapat pula ditampilkan kedalam posting blog, misalkan saja saat akan memposting tentang mengunggkapkan biography seseorang dan mencantumkan profil orang tersebut maka dengan Membuat Profil Kartu Identitas Dengan CSS3 ini bisa lebih beragam dan memiliki efek yang cantik saat mouse diarahkan kedalam bagian profil tersebut karena fitur dari efek Profil Kartu Identitas Dengan CSS3 ini menyediakan efek bergulir dan sedikit membuat gambar tampil agak membesar atau zoom. Maka dari itu, berikut adalah tutorial tentang cara Membuat Profil Kartu Identitas Dengan CSS3 di blog:

Demo

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajspcrqf8KKFtPzamY-xaJJSQShYCYnLOw3UeJWqCRFpHr0FcsEyahtgOLX6orMRvogT1L0JqRe1pkE8pd8RLPb8t7jvTcg-PWpyKfWEKwCFfYFB12c1yEHgHasx70Pa7DM7f2i7M4unj/s150/bg.jpg) repeat;
height:450px;
width:160px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#card-1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
}
#card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#card-3 {
background-color:#69732B;
z-index:3;
}
#card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
#card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
}
ul#index_cards li:hover {
z-index:4;
}
#card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}

#card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}

#card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
}
ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}

ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;  
}

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Profil Kartu Identitas Dengan CSS3 ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<ul id="index_cards">
<li id="card-2">
<h3>Profil</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1YpfqfFS66hE2yOMEE1eOu2pQVsavPre9QIQorumiaXu1LRt7WFF5IhEE6d6huVG_s4l7UaY_kVbEFmCKZnPnzGxvAihlnKavqk3DjDnz2V4VA3pamKSKt6JN2hqtFLDy9010Qz4zzpV/w382-h533-no/Faceblog+Evolutions.jpg" height="130" width="130" alt="Faceblog Evolutions" />
<p>Nama: Kelly Lin<br />
Kelamin: Wanita<br />
Lahir: 29 Oktober 1975<br />
Pekerjaan: Aktris<br />
Zodiak: Scorpio<br />
Lin adalah seorang aktris dan model yang dibesarkan di santa Barbara, California</p>
</li>

<li id="card-3">
<h3>Profil</h3>
<img src="https://lh4.googleusercontent.com/-BKkS9yc0-a8/Ubv0ndCFv3I/AAAAAAAAEl4/Iwy3R8AkpDE/w294-h293-no/Mas+Andes+%252813%2529.JPG" height="130" width="130" alt="Faceblog Evolutions" />
<p>Nama: Andes Rizky Nugroho
Kelamin: Pria
Lahir: xx September xxxx
Pekerjaan: Blogging
Zodiak: Virgo
Mas Andes Rizky Nugroho adalah admin Faceblog Evolutions</p>
</li>

<li id="card-4">
<h3>Profil</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xD9Ll5L1skVWW5-QhDSzBHsEbzVL8QdK-xbjyrN5PciChsYzX4SxTUAOF22_7Xzsy_te1_fsw6vJ-BkQevx2ITwosifAmtGKvIvu7ln9V8HWMJ6AzKxk8Dg0l81z4cbLfsEGLx-RU9E/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" height="130" width="130" alt="Faceblog Evolutions" />
<p>Nama: Cecilia Cheung<br />
Kelamin: Wanita<br />
Lahir: 24 Juni 1980<br />
Pekerjaan: Aktris<br />
Zodiak: Gemini<br />
Cecilia Cheung adalah aktris dan juga penyanyi asal Hongkong</p>
</li>
</ul>

Setelah semuanya sudah sesuai bisa klik Publikasikan.