Cara Membuat Author Profile di Blogger Seperti Blog Andrie Kristianto
Andrie Kristianto - Cara Membuat Author Profile di Blogger Seperti Blog Andrie Kristianto. Beberapa waktu yang lalu ada yang menanyakan terkait bagaimana cara membuat widget author profile seperti yang ada di blog andrie.id ?


" Mas kok widget author profille nya beda dari yang lain ya ? ", dan saya jawab: ya memang. Saya tidak ingin sama seperti yang lain, dan tampilan widget author profile ini saya suka karena untuk tampilan mobile-nya dia bisa menyesuaikan atau responsif  gitu lah.

Widget Author Profile Mobile Version
Nah bagi kalian yang ingin memasang juga, simak tutorialnya pemasangannya dibawah ini, dan jangan khawatir apakah widget ini memberatkan blog atau tidak. Karena widget ini hanya menggunakan CSS dan HTML saja, tidak ada javascript atau source code yang diambil dari pihak lain.

1. Langkah Pertama, siapkan foto atau logo untuk widget author profile ini.
2. Langkah Kedua, buka akun blogger Anda, lalu ke dashboard menu ⤍ Tema / Template  ⤍  EDIT HTML.
3. Langkah Ketiga, setelah itu cari kode </style> lalu tempelkan kode CSS ini diatas kode </style> tadi. ( Agar pencarian kode lebih cepat, tekan CTRL + F pada editor HTML Anda ).
.site {
    padding-bottom: 5px
}

.profile-card {
    display: grid;
    grid-template-areas: &quot;
    pc-user pc-user pc-user pc-user-buttons&quot;
    ;
    background: #fff;
    border-radius: 8px
}

.pc-user {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-area: pc-user
}

.pc-user-image {
    padding: 18px 26px 18px 18px;
    position: relative
}

.pc-user-image:before {
    content: &#39;
    &#39;
    ;
    position: absolute;
    top: 25px;
    left: 76px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fc6a8;
    border: 4px solid #fff
}

.pc-user-image img {
    border-radius: 25%;
    width: 100%
}

.pc-user-info {
    padding: 20px 20px 20px 0
}

.pc-user-info&gt;
h3 {
    font-size: 24px;
    line-height: 1.3em;
    margin-bottom: 6px
}

.pc-user-info&gt;
h3 a {
    color: #241943;
    text-decoration: none;
    transition: color .3s ease-in-out
}

.pc-user-info&gt;
h3 a:hover {
    color: #432f7a
}

.pc-user-title {
    margin-bottom: 3px
}

.pc-user-location {
    margin-bottom: 20px
}

.pc-user-location svg {
    width: 9px;
    margin-right: 5px;
    opacity: .4
}

.pc-social {
    list-style-type: none;
    display: flex
}

.pc-user-buttons {
    grid-area: pc-user-buttons;
    padding: 18px
}

.pc-user-buttons .pc-btn {
    display: block;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    border: 1px solid #e5dfef;
    color: #231a3b;
    transition: background .2s ease-in-out
}

.pc-user-buttons .pc-btn:hover {
    background: #e5dfef
}

.pc-user-buttons .pc-btn.accent {
    border-color: #4f3ff1;
    background: #4f3ff1;
    color: #fff;
    box-shadow: 0 4px 10px rgba(80, 60, 240, .2)
}

.pc-user-buttons .pc-btn.accent:hover {
    background: #483ad7
}

.pc-user-buttons .pc-btn+.pc-btn {
    margin-top: 12px
}

@media only screen and (max-width:1024px) {
    .site {
        padding-bottom: 5px
    }
}

@media only screen and (max-width:767px) {
    .site {
        padding-bottom: 5px
    }
    .profile-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(auto, 4);
        grid-template-areas: &quot;
        pc-user pc-user&quot;
        &quot;
        pc-user-buttons pc-user-buttons&quot;
    }
    .pc-user-image {
        padding: 18px 10px
    }
    .pc-user-image img {
        border-radius: 5%;
        width: 100%;
        ;
        height: 100%
    }
    .pc-user-info {
        padding: 18px 18px 18px 0
    }
    .pc-user-buttons {
        padding: 0 18px 18px
    }
}

4. Langkah Keempat, selanjutnya tempelkan kode HTML dibawah ini tepat dibawah kode </article>.
<div class='site'>
  <div class='profile-card'>
  <div class='pc-user'>
      <div class='pc-user-image'>
        <a expr:href='data:blog.homepageUrl' target='_blank'>
          <img border='0' data-original-height='500' src='https://1.bp.blogspot.com/-uNckHdiKWZ4/Xp3240JsNrI/AAAAAAAABdU/SCy4y6ou-Hs8u3Hr4xe8AgAxmA9aR9mhACNcBGAsYHQ/s320/andrie.png' width='320'/>
        </a>
      </div>
      <div class='pc-user-info'>
        <h3><a expr:href='data:blog.homepageUrl' target='_blank'><data:blog.title/></a></h3>
        <div class='pc-user-title'>
          <p>Content Creative <span class='love' style='color:#222'>&#10084;</span></p> 
        </div>
        <div class='pc-user-location'>
          <p>
            <svg viewBox='0 0 17.932 23.909' xmlns='http://www.w3.org/2000/svg'>
              <path d='M8.044,23.427C1.259,13.59,0,12.581,0,8.966a8.966,8.966,0,0,1,17.932,0c0,3.615-1.259,4.624-8.044,14.461a1.121,1.121,0,0,1-1.843,0ZM8.966,12.7A3.736,3.736,0,1,0,5.23,8.966,3.736,3.736,0,0,0,8.966,12.7Z' fill='#6c6577' id='map-marker-alt'/>
            </svg>
            Yogyakarta, Indonesia
          </p>
        </div>
        <ul class='pc-social'>
          <p><b>#TopikBlog:</b> Tutorial, Tip, Trik mulai dari blogspot, aplikasi, media sosial, dan teknologi.  </p>
  </ul>
      </div>
    </div>
    <div class='pc-user-buttons'>
      <a class='pc-btn accent' href='https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=3754329624019661428'>Follow</a>
      <a class='pc-btn' href='https://www.andrie.id/p/contact.html'>Contact me</a>
    </div>
  </div>
</div>

KETERANGAN :
- Warna yang saya tandain warna  BIRU  itu sudah otomatis mengikuti Nama blog dan URL blog Anda.
- Warna yang saya tandain warna  MERAH  itu silahkan ubah sesuai informasi Anda.

5. Terakhir, jangan lupa ubah informasi kode HTML nya seperti nama, gambar, tombol, lokasi, deskripsi, dan lain sebagainya. Lalu simpan template Anda, tekan tombol SAVE TEMPLATE.

Baiklah, cukup sekian terkait Cara Membuat Author Profile di Blogger Seperti Blog Andrie Kristianto (andrie.id). Semoga bisa bermanfaat.




Related Posts

Postingan Lebih Baru Postingan Lama

Komentar

Postingan Lebih Baru Postingan Lama