Cara Membuat Profil Card di Halaman Statis Blogger

Posting Komentar
Fernn.id - Pada kesempatan kali ini admin lagi-lagi ingin membahas seputar blogging apakah itu? ya sesuai pada judul, yaitu Cara Membuat Profil Card di Halaman Statis Blogger yang dimana semua website harus mempunyai halaman seperti ini.

Tahukah kalian kenapa? alasan yang paling utama ialah karena agar pengunjung bisa mengetahui biodata dari si penulis dan juga mengetahui blog dengan niche apakah yang mereka sedang kunjungi. Adanya halaman seperti ini tentunya bisa memberikan kesempatan pengunjung mengenal lebih dekat dari sosok sang penulis.

Lalu bagaimana jika pada situs web penyedia jasa atau online shop, apakah penting juga? Tentu saja, contohnya untuk memperkenalkan barang dan jasa ke pengunjung atau calon pembeli. Tidak perlu dijabarkan, pasti kalian sudah mengerti maksudnya admin.

Oke, langsung saja ke tutorialnya. Jika masih penasaran dengan desain yang dihasilkan, silahkan lihat demo nya melalui tombol dibawah ini.
Live Preview

Cara Membuat Profil Card di Halaman Statis Blogger

Yang harus kalian lakukan sebelum menerapkan tutorial ini, sebaiknya lakukan backup template terlebih dahulu untuk mencegah terjadinya kerusakan atau error.
  1. Silahkan masuk ke dashboard blogger.
  2. Lalu pilih menu Halaman > buat Halaman Baru.
  3. Kemudian pilih metode penulisan HTML bukan Compose.
  4. Masukkan kode HTML dan CSS berikut ini ke dalam teks area yang tersedia.
    <style type="text/css">
    /*Created By www.fernn.id*/
    #card{
        background-color: #fff;
        height: auto;
        width: 350px;
        max-width: 100%;
        margin: 15px auto;
        border-radius: 25px;
        padding-bottom: 1px;
        box-shadow:5px 5px 10px rgba(0, 0, 0, 0.5);
    }
    #card:hover{
        box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
    }
    .card-head{
        background: linear-gradient(to right, #3ec2f2,#0067b0);
        text-align: center;
        width: 100%;
        background-color: #E6EBEE;
        border-radius: 25px 25px 0 0;
        color: #393B45;
        height: 130px;
        font-weight: 800;
        margin: 0;
    }
    h1 {
        text-align: center;
        width: 100%;
        color: #038CCF;
        font-weight: 800;
    }
    
    .image-crop {
        display: block;
        position: relative;
        background-color: #E6EBEE;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        margin-top: -80px;
        overflow: hidden;
        border-radius: 50%;
        box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
        border:3px solid #fff;
    }
    #avatar {
        display: inline;
        height: 230px;
        width: auto;
        margin-left: -34px;
    }
    #bio {
        margin: 30px 15px;
        height: auto;
        display: block;
    }
    #bio p {
        color: #222;
        font-weight: lighter;
        font-size: 14px;
        text-align: justify;
    }
    #stats {
        display: flex;
        flex-direction: row;
        height: auto;
        width: 280px;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        font-weight: 500;
    }
    .col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: auto;
    }
    .stat {
        font-size: 25px;
        margin: 0;
    }
    
    .label {
        margin: 0;
    }
    #buttons {
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        width: 280px;
    }
    .button {
        position: relative;
        padding: 10px 0;
        width: 130px;
        margin: 30px 0;
        border-radius: 25px;
        border: none;
        letter-spacing: 0.2px;
        font-weight: 500;
        background-color: #038ccf;
        color: #E6EBEE;
        text-align: center;
        display:inline-block;
        font-family:'Open Sans',sans-serif;
        text-decoration:none;
        box-shadow:inset 0 0 0 #22313F;
        font-size:16px;
        text-transform:uppercase;
        transition:all 0.3s ease-out;
    }
    .button:focus {
        display: none;
    }
    .button:hover {
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        box-shadow:inset 0 -50px 0 #22313F;
    }
    #msg{
        background-color: #E6EBEE;
        color: #393B45;
        border: 1px solid #393B45;
    }
    #msg:hover{
        color: #fff;
    }
    </style>
    <div id="card">
        <div class="card-head">
        </div>
        <div class="image-crop">
            <img id="avatar" src="https://1.bp.blogspot.com/-iuC_rH-GGnI/XxUwcL9v23I/AAAAAAAAAuc/Vc8L79xT5jIirXiDqyx4_H_-YclvrGRMQCLcBGAsYHQ/s1600/IMG_20180801_170615.jpg"></img>
        </div>
        <h1>Fernn.id</h1>
        <div id="bio">
            <p>Hai, nama saya Fernand saya adalah seseorang yang menyukai design, baik web design atau-pun graphic design yang mencoba menjadi sosok yang lebih baik dan bermanfaat untuk orang lain.</p>
        </div>
        <div id="stats">
            <div class="col">
                <p class="stat">1K</p>
                <p class="label">Posts</p>
            </div>
                    <div class="col">
                <p class="stat">2K</p>
                <p class="label">Followers</p>
            </div>
                    <div class="col">
                <p class="stat">10K</p>
                <p class="label">Following</p>
            </div>
        </div>
        <div id="buttons">
            <a class="button" href="" >Follow</a>
            <a class="button" href="" id="msg">Message</a>
        </div>
    </div>
    Keterangan:
    • Sesuaikan ukuran dengan mengubah tulisan yang di block, ganti ke 100% jika ingin tampilan full.
    • Sesuaikan gambar profil dengan cara mengubah tulisan berwarna merah.
  5. Simpan, dan lihat hasilnya.

Mungkin sekian dulu artikel yang bisa kami berikan, jika ada pertanyaan silahkan ajukan melalui kolom komentar dibawah artikel ini. Sebisa mungkin akan kami tanggapi jika tidak ada kesibukan diluar kegiatan blogging.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding

Related Posts

Posting Komentar

Dapatkan artikel terbaru!