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
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 ~ by Icloudice (don't remove ok) */
.rah-author-profil{overflow:hidden;background:#fefefe;padding:15px;margin:30px 0;line-height:1.5}
.rah-follow-profil{float:left;margin-right:15px}.rah-follow-profil a{display:block;font-size:14px;text-align:center;}
.rah-author-profil .writer-rah-name{font-weight:bold;color:#f80000;font-size:18px}
.rah-author-profil .writer-rah-name:hover {color:#f80000;}
.writer-rah > span {display:block;margin-top:5px;font-size:15px;opacity:0.8;overflow:hidden}Ganti kode Author 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 Profile ~ by Icloudice.com -->
<b:if cond='data:post.authorAboutMe'>
<div class='rah-author-profil' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<div class='rah-follow-profil'>
<b:if cond='data:post.authorPhoto.url'> <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>
</b:if>
<a href='/' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>Hubungi</a> </div>
<div class='writer-rah'> <a class='writer-rah-name' href='/' 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='#f80000'/></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 😊