Cara Membuat Profil AboutMe Keren

Cara Membuat Profil AboutMe Keren - AboutMe adalah sebuah tampilan atau deskripsi yang menjelaskan atau menerangkan tentang si penulis atau sipemliki blog, jadi inti dari pembuatan AboutMe sendiri adalah, agar semua orang tau bahwa yang memiliki blog atau web itu siapa, dan mereka juga akan mudal mengenali dengan kelengkapan identitas yang kita berikan kepada pengunjung.

Tapi sebenarnya ada juga sih sebagian orang yang tidak mau menampakkan wajahnya hehe, misterius ya...

berikut Tampilan AboutMe yang sudah saya buat :

Tampilan About Me

Oke, langsung saja kita mulai proses membuatnya

Cara Membuat Profil AboutMe Keren

1). Masuk ke dashboard blog kalian
2). Kemudian, pilih menu Tata Letak 
3). Klik Add widget, lalau Pilih HTML/Javascript.
4). Copy Script HTML dibawah ini

Script HTML

<div id="wrapper-dp">
<div id="duljud-dp">
AUTHOR</div>
<hr class="border-garis-dp" />
<div id="isi-dp">
<img src="Link Foto Kalian" width="70%" />
</div>
<div id="nama-dp">
<a href="#"><p class="nama-dp">
<b>Muhammad Tajuddin</b></p>
</a>
google.com/115771468879770383096<br />
</div>
<div id="footer-dp">
<a href="Link Instagram Kalian">
<input class="buttontun-dp" type="submit" value="Follow My Instagram"/>
</a>
<a href="Link Google Plus Kalian">
<input class="buttontun-dp" type="submit" value="Follow My Google+" />
</a>
</div>
</div>

Ganti atau rubah tulisan yang bergaris biru diatas sesuai dengan keinginan kalian.

Selanjutnya kita pergi ke proses selanjutnya, yaitu mendesain About Me nya dengan CSS,
1). Pilih menu bagian Edit Template > Edit HTML
2). letakkan kode css dibawah ini diatas kode </b:skin>, lebih cepatnya tekan tombol CTRL + F, kemudian ketik </b:skin> atau bisa juga dibagian bawah </head>

Script CSS

/* Aboutme By Dunia Programming */
.border-garis-dp {
 border: 1px solid #fff;
 margin-top: -20px;
}
a{
 text-decoration: none;
}
.nama-dp {
 font-size: 25px;
 color: #fff;
 margin-top: 0px;
 margin-bottom: 0px;
}
.nama-dp:hover {
 color: #e74c3c;
}
#wrapper-dp {

 background: url('http://www.hiperderecho.org/wp-content/uploads/2015/09/3382865257_7dedef23b0_o.jpg');
 background-size: 150%;
 margin: auto;
 width: 300px;
 border-radius: 5px;
 padding-top: 15px;
}
#duljud-dp {
 color: #fff;
 font-size: 20px;
 text-align: center;
 font-family: Arial;
 margin-bottom: 30px;
}
#isi-dp {
 margin: auto;
 width: 90%;
 margin-left: 50px;
 margin-bottom: 10px;
}
#nama-dp {
 font-family: Arial;
 text-align: center;
 color: #fff;
}
#footer-dp {
 background: #181A1C;
 width: 100%;
 height: auto;
 padding-top: 15px;
 padding-bottom: 10px;
 border-top: 2px solid #fff;
 border-radius: 0px 0px 5px 5px;
}
.buttontun-dp {
 border: 0px;
 background: #3498db;
 width: 80%;
 font-size: 16px;
 margin-left: 29px;
 margin-bottom: 5px;
 color: #fff;
 height: 30px;
 border-radius: 3px;
}
.buttontun-dp:hover {
 background: #e74c3c;
}

Untuk tulisan yang berwarna merah, ganti latar belakang AboutMe kalian dengan background yang kalian inginkan.

bila cara diatas menurut kalian masih bingung, kalian bisa gunakan dengan cara seperti dibawah ini :

1). Masuk ke dashboard blog kalian
2). Kemudian, pilih menu Tata Letak 
3). Klik Add widget, lalau Pilih HTML/Javascript.
4). Copy Script HTML dibawah ini :

Script Lengkap

<style type="text/css">
.border-garis-dp {
 border: 1px solid #fff;
 margin-top: -20px;
}
a{
 text-decoration: none;
}
.nama-dp {
 font-size: 25px;
 color: #fff;
 margin-top: 0px;
 margin-bottom: 0px;
}
.nama-dp:hover {
 color: #e74c3c;
}
#wrapper-dp {

 background: url('http://www.hiperderecho.org/wp-content/uploads/2015/09/3382865257_7dedef23b0_o.jpg');

 background-size: 150%;
 margin: auto;
 width: 300px;
 border-radius: 5px;
 padding-top: 15px;
}
#duljud-dp {
 color: #fff;
 font-size: 20px;
 text-align: center;
 font-family: Arial;
 margin-bottom: 30px;
}
#isi-dp {
 margin: auto;
 width: 90%;
 margin-left: 50px;
 margin-bottom: 10px;
}
#nama-dp {
 font-family: Arial;
 text-align: center;
 color: #fff;
}
#footer-dp {
 background: #181A1C;
 width: 100%;
 height: auto;
 padding-top: 15px;
 padding-bottom: 10px;
 border-top: 2px solid #fff;
 border-radius: 0px 0px 5px 5px;
}
.buttontun-dp {
 border: 0px;
 background: #3498db;
 width: 80%;
 font-size: 16px;
 margin-left: 29px;
 margin-bottom: 5px;
 color: #fff;
 height: 30px;
 border-radius: 3px;
}
.buttontun-dp:hover {
 background: #e74c3c;
}
</style>


<div id="wrapper-dp">
<div id="duljud-dp">
AUTHOR</div>
<hr class="border-garis-dp" />
<div id="isi-dp">
<img src="Link Foto Kalian" width="70%" />
</div>
<div id="nama-dp">
<a href="#"><p class="nama-dp">
<b>Muhammad Tajuddin</b></p>
</a>
google.com/115771468879770383096<br />
</div>
<div id="footer-dp">
<a href="Link Instagram Kalian">
<input class="buttontun-dp" type="submit" value="Follow My Instagram"/>
</a>
<a href="Link Google Plus Kalian">
<input class="buttontun-dp" type="submit" value="Follow My Google+" />
</a>
</div>
</div>

Setelah itu, refresh dan coba kalian lihat.

Bila terdapat kesalahan, silahkan tinggalkan komentar pada kotak komentar dibawah artikel ini.

Bagaimana...? Keren...? atau masih mau desain AboutMe yang lain..? tunggu tutorial-tutorial berikutnya, makanya jangan sampai ketinggalan ya. sekian dan terimakasih

Bagikan Artikel ini