Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Profil Kartu Identitas Dengan CSS3

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:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Membuat Profil Kartu Identitas Dengan CSS3
ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(http://2.bp.blogspot.com/-UiZzaj3535s/UdDg21LRRoI/AAAAAAAAFj4/THjwZPLezko/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://lh3.googleusercontent.com/-CgUwFc9Czrg/Uc4IMzRSh8I/AAAAAAAAFIY/_72aRxJJLRw/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://lh6.googleusercontent.com/-QNjuCWVlEsw/Uc7kxd0-rKI/AAAAAAAAFN8/Nwx8QQ7jwx4/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.

Berlangganan artikel via email

12 Response to "Membuat Profil Kartu Identitas Dengan CSS3"

kreatif banget sih...salut deh. saya klw urusan gini ndak pernah bisa bikin tutorialnya mas. ntr saya coba di blog dummyku

Balas

Wah mas andes ga pernah keabisan ide yah.
Aq aja yg mw nyoba masih gtw bisa apa ga? Hihihi tp nnaty aq cb mas, maksih ya infonya :D

Balas

mantap mas andes....jd terlihat lebih menarik ya tampilan profil kewat widget ini...hehe
sukses dan trima ksh udah sharing... :)

Balas

mantap mas andes....jd terlihat lebih menarik ya tampilan profil kewat widget ini...hehe
sukses dan trima ksh udah sharing... :)

Balas

Wah.. mas rizky ini sangat kreatif sekali dalam mempercantik suatu blog.. apalagi turorial nya kebanyakan menggunakan css, biarpun banyak widget yg ditampilkan tapi loadingnya blog masih ramah pada koneksi. Terus berkarya mas, mudah2an karya nya bisa bermanfaat buat orang lain.

Balas

sobat ku ini, pasti selalu bermanfaat , kalau posting. makasi sobat.

Balas

wah jago banget nih admin blog nya tentang CSS, jadi mau belajar bareng nih gan :)

Balas

wah .. keren aku akui :D hehe

Balas

Menarik mas! Bisa jadi ktp blog nih ceritanya. Asyik tutorial nya mas.

Balas

kunjungan pertama mas.... mohon kerja samanya..
follwow sukses.. polback yo...:)

wis mantep.... tuh.. patus di coba...

Balas

Bagus mass.. mau otak atik aah.
Makash yaah ilmunya.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Profil Kartu Identitas Dengan CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode