Sunday, 25 August 2013

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.

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

8 komentar

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.
EmoticonEmoticon