IBX5A5D7242811CD

Cara Membuat Tampilan About Me Keren

Hai selamat datang di kupitam blog...
pada kali ini kita akan membuat tampilan about me yang keren, bagaimana caranya? yuk simak di bawah ini :

  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Tata Letak
  • Tambahkan Gadget / Widget
  • Pilih HTML/JavaScript
  • Salin kode di bawah ini dan tempelkan

<style>
#Profil {
    display:block;
    width:100%;
    backround:#fff;float:none;
    border-radius:30px;border:1px solid
}
#Profil img {
    display:block;
    border-radius:40px;
    border:4px solid #48d
}
.Profil {
    display:block;
    width:100%
}
.Profil img {
    display:block;
    margin-top:-60px;
    border-radius:90px;
    width:155px;
    heigth:155px;
    border:2 px solid #48d
}
#Profil h3 {
    color:#48d;
    font-size:170%
}
#Profil a{
    font-size:24px;
    padding:0 4px 0 0
}
#Profil p{
    font-size:12px;
    padding:10px
}
.fa.fa-facebook-square {
    color:#48d;
    transition:all 0.2s ease-in-out;
}
.fa.fa-twitter-square {
    color:#2fedd7;
    transition:all 0.2s ease-in-out;
}
.fa.fa-pinterest-square {
    color:#f72e35;
    transition:all 0.2s ease-in-out;
}
.fa.fa-google-plus-square {
    color:#f72e35;
    transition:all 0.2s ease-in-out;
}
.fa.fa-linkedin-square {
    color:#2d92f7;
    transition:all 0.2s ease-in-out;
}
.fa.fa-github {
    color:#ec26ef;
    transition:all 0.2s ease-in-out;
}
.fa.fa-instagram {
    color:#e5a020;
    transition:all 0.2s ease-in-out;
}
</style>

<div align="center">
    <div id="Profil">
        <img src='MASUKAN-URL-BANNER' />
        <div class="Profil">
            <img src='MASUKAN-URL-FOTO' />
        </div>
        <br/>
        <h3>NAMA ANDA</h3>
        <br />
        <a href='http://facebook.com/ID-FACEBOOK' target='_blank'><i class='fa fa-facebook-square fa-lg'/> <span class='inv'/></span></i></a>
        <a href='http://plus.google.com/ID-GOOGLE' target='_blank'><i class='fa fa-google-plus-square fa-lg'/><span class='inv'/></span></i></a>
        <a href='https://instagram.com/ID-INSTAGRAM' target='_blank'><i class='fa fa-instagram fa-lg'/><span class='inv'/></span></i></a>
        <a href='http://linkedin.com/in/ID-LINKEDIN' target='_blank'><i class='fa fa-linkedin-square fa-lg'/><span class='inv'/></span></i></a>
        <a href='https://path.com/id/ID-PATH' target='_blank'><i class='fa fa-pinterest-square fa-lg'/> <span class='inv'/></span></i></a>
        <a href='http://twitter.com/ID-TWITTER' target='_blank'><i class='fa fa-twitter-square fa-lg'/><span class='inv'/></span></i></a>
        <br/>
        <br/>
        <p>DESKRIPSI TENTANG DIRI ANDA</p>
    </div>
    <hr/>
</div>
  • Ganti tulisan yang sudah saya Blok dan  saya beri warna Biru sesuai dengan diri anda
  • Jika sudah selesai, simpan
Gampang kan? :)

1 Response to "Cara Membuat Tampilan About Me Keren"