»

CSS Author Profile ala Dandy ( Xpress Community )

CSS Author Profile ala Dandy ( Xpress Community )
CSS Author Profile ala Dandy ( Xpress Community ) - Ya, kali ini saya akan berbagi CSS Author Profile buatan saya sendiri dengan Warna Merah Kuning Hijau Biru, dan saya usahakan semaksimal mungkin agar tampilannya enak dipandang / dilihat. Dan Tampilan ini cukup rapih (Tidak berantakan), Untuk melihat contoh dan jika anda ingin memakainya silahkan lihat cara-cara berikut ini.

Demo :


: Lionel Dandy
: 14th (29 January)
: 59 Cipadu Tangerang, INA
: DA ND AY (Lionel Dandy)
: @LionelDandy58
: Lionel Dandy

CSS ( Letakan di atas kode ]]></b:skin> )

#DANDYprofile {
width:400px;
padding:10px;
}
.DANDYpoto {
float:left;
width:135px;
height:135px;
border:4px solid;
border-color:red yellow yellowgreen blue;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
margin:5px;
}
.DANDYdeskripsi {
background:#fff;
font-size:13px;
font-family:Trebuchet MS;
border:4px solid;
border-color:red yellow yellowgreen blue;
margin-left:80px;
padding:5px;
border-radius: 0 25px 25px 0;
-webkit-border-radius: 0 25px 25px 0;
-moz-border-radius: 0 25px 25px 0;
}
.DANDYdeskripsi a {
font-weight: bold;
text-decoration: none;
color: #000;
}
.DANDYdeskripsi label {
display: block;
float: left;
width: 70px;
}

HTML Letakkan dibawah kode <body> / diatas kode </body>. Jika ingin memasang diwidget, silahkan letakkan di kotak widget tersebut.

<div id='DANDYprofile'>
<img class='DANDYpoto' src='http://si0.twimg.com/profile_images/378800000344070339/82a40d3addd19062cae210702d68fa6c_bigger.jpeg'/>
<p class='DANDYdeskripsi'>
<label>Nama :</label>: Lionel Dandy<br/>
<label>Umur :</label>: 14th (29 January)<br/>
<label>Alamat</label>: 59 Cipadu Tangerang, INA<br/>
<label>Facebook</label>: <a href="http://facebook.com/dandicrenzz1" title="Facebook" target="_blank">DA ND AY (Lionel Dandy)</a><br/>
<label>Twitter</label>: <a href="http://twitter.com/LionelDandy58" title="Twitter" target="_blank">@LionelDandy58</a><br/>
<label>Google+</label>: <a href="http://plus.google.com/105259539938114026484" title="Google+" target="_blank">Lionel Dandy</a><br/>
</p>
<div style='clear:both'></div>

Pengaturan : 

1. Kode yang seperti ini http://si0.twimg.com/profile_images/378800000344070339/82a40d3addd19062cae210702d68fa6c_bigger.jpeg ganti dengan URL Gambar / Photo anda.
2. Kode yang seperti ini http://facebook.com/dandicrenzz1 dan DA ND AY (Lionel Dandy) silahkan ganti dengan URL Facebook dan Nama Facebook anda.
3. Kode yang seperti ini http://twitter.com/LionelDandy58 dan @LionelDandy58 silahkan ganti dengan URL Twitter dan Nama / ID Twitter anda.
4. Kode yang seperti ini http://plus.google.com/105259539938114026484 dan Lionel Dandy silahkan ganti dengan URL Google+ dan Nama Google+ anda.
5. Kode yang bercetak Tebal dan Miring, silahkan anda ganti Nama, Umur, Alamat anda.

Sisanya tinggal kalian edit sendiri. Jika tampilan ini kurang maksimal / menurut anda tidak terlalu bagus harap dimaklumi karena saya ini manusia dan tidak mengetahui warna / tampilan yang seperti apa yang anda suka.
Sekian dari saya, semoga artikel ini bermanfaat.
Dan jika masih tidak mengerti silahkan tanyakan di kolom komentar.
Terimakasih.

Postingan terkait:

— — 7 Comments —

7 Tanggapan untuk "CSS Author Profile ala Dandy ( Xpress Community )"

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.

Subscribe to: Post Comments (Atom)