Cara membuat Kotak Author Box Responsif dibawah postingan otomatis

Daftar Isi [Tampil]

Hello sobat desain kali ini saya akan memberikan informsi seputar desain web dalam membahas mambuat atau mempercantik lagi tampilan author box Profile didalam sebuah blog di blogger

Nah sobat desain jika akmu tidak mengaktifkan fitur berbagi Profile pada pengaturan akun blogger kamu, maka meskipun kamu mmebuat kotak author box, Kotak author tersebut tidak akan muncul atau menampilkan fungsinya

Mengaktifkan Bagikan Profile

Jadi jika kamu ingin menampilkan kotak profil secara otomatis maka perhatikan beberapa langkah yang bisa kamu ikuti :

• Pergi keakun blogger kamu
• Kemudian centang bagikan Profile saya
• dan simpan

Didalam pengaturan akun blogger kamu bisa menyetel nama, deskripsi, Biodata kamu, photo kamu, hobi serta minat kamu, dan lain sebaginya untuk ditampilkan didalam blog

Tampilkan Profile dibawah postingan

Langkah berikutnya untuk menampilkan Author box Profile didalam postingan blog secara otomatis, kamu harus mengaktifksn salah satu fitur didalam Menu Tata letak :

• Pergi keakun Blogger kamu
• Kemudian pergi lagi ke menu Tata letak
• Kemudian lihat Widget Blog klik edit disamping (dibawah/diatas) nya
• Centang Tampilkan Profil saya dibawah postingan
• Kemudian Simpan

Cara penerapan

Setelah kamu mengaktifkan semua langkah diatas, kemudian kita bisa membuat Tampilan Author box profile nya, oke 👌

Untuk memulainya Salin dan tempelkan kode CSS berikut ini diatas kode ]]></b;skin> atau sebelum kode ]]></b;skin>

/* Author profil Box */

.authorDL-profile {

    overflow:hidden;

    background:#f4f4f4;

    padding:15px;

    margin:30px 0;

    line-height:1.5

}

.imgDL-follow {

    float:left;

    margin-right:15px

}

.imgDL-follow a {

    display:block;

    font-size:14px;

    text-align:center;

}

.authorDL-profile .writerDL-name {

    font-weight:bold;

    color:#000;

    font-size:18px

}

.authorDL-profile .writerDL-name:hover {

    color:#e8ad11;

}

.writerDL > span {

    display:block;

    margin-top:5px;

    font-size:15px;

    opacity:0.8;

    overflow:hidden

}

Ganti kode Author box Defeult

Kemudian kamu bisa mengganti kode HTML Author Box Defeult nya, maksudnya kode HTML Author box yang sudah ada didalam templatenya

⚠️ Setiap template memiliki Tata letak yang berbeda beda, cari saja kode html tersebut

Saya akan memberikan kode html author box sebagi contoh lihat kode berikut ini

<b:includable id='authorbox' var='post'> <!-- Sampai kode --> </b:includable>

Setelah ketemu ganti semua kode tersebut dengan kode HTML dibawah ini

<b:includable id='authorboxresponsif' var='post'>

<!--Author Box Desain limited-->

<b:if cond='data:post.authorAboutMe'>

  <div class='authorDL-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

  <div class='imgDL-follow'>

  <b:if cond='data:post.authorPhoto.url'>

    <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>

  </b:if>

  <a href='desain-limited.blogspot.com' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>Hubungi</a>

  </div>

  <div class='writerDL'>

    <a class='writerDL-name' href='desain-limited.blogspot.com' itemprop='url' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a>

    <svg style='width:16px;height:16px' viewBox='0 0 24 24'>

      <path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='#000'/>

    </svg>

    <span itemprop='description'><data:post.authorAboutMe/></span>

  </div>

  </div>

</b:if>

</b:includable>

Nah sobat bisa mengkreasikan sendiri tampilan Author box nya agar semakin keren dan menarik, tatapi dengan kode author box yang saya bagikan juga sudah keren dan responsif pastinya 😊

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini