![]() |
nicoleisthenewblack.com |
Pada kesempatan kali ini saya akan membagikan informasi tentang cara membuat Widget About Me yang Keren dan tentunya Responsive, sehingga cocok digunakan dalam segala device. Baiklah saya akan memberitahukan langkah-langkahnya,
ABOUT ME 1
![]() |
Widget About Me 1 ~ Rojamz |
- 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
saya akan buatkan model tampilan tentang saya di lain waktu dan di postingan yang sama. Mungkin cukup sekian untuk postingan ini, semoga bermanfaat bagi anda sekalian.
Penulis: Unknown
0 komentar untuk Cara Membuat Tampilan Tentang Saya ( About Me ) Keren