Cara Membuat Profil Blogger Seperti Facebook Dengan CSS
Hai, mungkin sebagian dari kamu ingin membuat tampilan sosial media sendiri di blog dengan CSS, nah berikut adalah tampilan profil utama PenggemarKoding yang dibuat sedemikian mungkin agar tampil bak sosial media. Oke, untuk membuat profil utama, kamu hanya memerlukan bantuan CSS dan tentunya kode pengoperasian di bagian <body>.
Namun mungkin position yang saya atur belum sama dengan keinginan kamu, maka silahkan kamu menggantikan positionnya / warna hover / width / dan Heightnya sesuka hati dan berdasarkan kebutuhan yang kamu inginkan.
Oke langkah pertama adalah silahkan Save code CSS berikut di bagian <style>.
/*PROFIL UTAMA*/
.sampul-utama{
margin-left: 0em;
}
.sampul-utama img{
height: 300px;
width: 800px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
}
.profil-utama{
margin-top: -5.40em;
margin-left: 2em;
}
.profil-utama img{
border-radius: 5em;
border: 5px solid white;
height: 120px;
width: 120px;
}
.profil-utama img:hover{
-webkit-transform: scale(1.10);
transform: scale(1.10);
border: 5px solid skyblue;
}
.link-utama{
width: 640px;
background: white;
margin-top: -2.20em;
margin-left: 0em;
padding-left: 10em;
padding-top: 1em;
padding-bottom:1em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.link-utama a{
font-size: 14px;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1.10em;
text-decoration: none;
color: black;
font-family: Century Gothic;
}
.link-utama a:hover{
background: skyblue;
color: white;
}
.nama-profil{
font-size: 25px;
margin-top: -2em;
margin-left: 7em;
font-family: Century Gothic;
color: White;
}
.nama-profil a{
color: white;
text-decoration: none;
}
.nama-profil a:hover{
color: skyblue;
}
.sampul-utama{
margin-left: 0em;
}
.sampul-utama img{
height: 300px;
width: 800px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
}
.profil-utama{
margin-top: -5.40em;
margin-left: 2em;
}
.profil-utama img{
border-radius: 5em;
border: 5px solid white;
height: 120px;
width: 120px;
}
.profil-utama img:hover{
-webkit-transform: scale(1.10);
transform: scale(1.10);
border: 5px solid skyblue;
}
.link-utama{
width: 640px;
background: white;
margin-top: -2.20em;
margin-left: 0em;
padding-left: 10em;
padding-top: 1em;
padding-bottom:1em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.link-utama a{
font-size: 14px;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1.10em;
text-decoration: none;
color: black;
font-family: Century Gothic;
}
.link-utama a:hover{
background: skyblue;
color: white;
}
.nama-profil{
font-size: 25px;
margin-top: -2em;
margin-left: 7em;
font-family: Century Gothic;
color: White;
}
.nama-profil a{
color: white;
text-decoration: none;
}
.nama-profil a:hover{
color: skyblue;
}
Nah ketika kamu telah selesai menyimpan code sebelumnya di bagian<style>, maka silahkan copied code berikut ini dan di save di bagian<body>. Jika mengingikan positionnya di bawah header, maka iya silahkan save di bagian setelah code header kamu masing masing.
<div class='sampul-utama' title='Foto Sampul'>
<img src='letakkan link sampul kamu disini'/>
</div>
<div class='nama-profil'>
<b>Buat nama kamu disini</b>
</div>
<div class='profil-utama' title='Foto Profil'>
<img src='tempelkan link foto profil kamu disini'/></div></div>
<div class='link-utama'>
<a href='href='letakkan linknya disini'>ABOUT ME</a>
<a href='letakkan linknya disini'>LINIMASA</a>
<a href='letakkan linknya disini'>GALERY</a>
<a href='letakkan linknya disini'>CONTACT ME</a>
</div>'
<img src='letakkan link sampul kamu disini'/>
</div>
<div class='nama-profil'>
<b>Buat nama kamu disini</b>
</div>
<div class='profil-utama' title='Foto Profil'>
<img src='tempelkan link foto profil kamu disini'/></div></div>
<div class='link-utama'>
<a href='href='letakkan linknya disini'>ABOUT ME</a>
<a href='letakkan linknya disini'>LINIMASA</a>
<a href='letakkan linknya disini'>GALERY</a>
<a href='letakkan linknya disini'>CONTACT ME</a>
</div>'
Itulah cara membuat profil utama seperti Facebook di blog dengan bantuan CSS versi PenggemarKoding. Semoga bermanfaat dan terima kasih telah membaca. ingin melihat Demo profil utama? silahkan tekan tombol dibawah ini yah.
Source: Penggemarkoding.blogspot.com
0 Response to "Cara Membuat Profil Blogger Seperti Facebook Dengan CSS"
Post a Comment