Cara Menampilkan Author Profile (Tentang Penulis) Pada Postingan Blogger

Author porfile merupakan salah satu widget blogger yang berfungsi untuk menampilkan ringkasan profil penulis artikel di suatu blog. Di antara banyak pengguna blogspot ada beberapa yang menampilkan widget author profile atau profil penulis di bawah postingan blog mereka. Menampilkan profil author di setiap postingan blog memiliki nilai yang sangat baik untuk pembaca atau pengunjung situs Anda.

Mengapa?
Pembaca artikel yang berada di blog Anda akan mengetahui siapa penulis artikel tersebut, sehingga mereka bisa mengenal diri Anda.Di beberapa situs luar negeri yang pernah saya kunjungi, hampir semuanya menggunakan atau menampilkan profil penulis di bawah postingan maupun di samping blog mereka.

Cara Membuat Author Profile di Bawah Postingan Blogger

1. Login ke Blogger
2. Kemudian buka tautan ini https://www.blogger.com/edit-profile.do
3. Pada bagian Privasi silahkan centang Bagikan Profile Saya lalu scroll ke bawah pada bagian Informasi Tambahan silahkan isi atau tambahkan pesan di kotak Perkenalkan Diri Anda jika sudah klik Simpan Profile
4. Klik Tema > Edit HTML
5. Cari kode <data:post.body/> Biasanya ada 1 sampai 3 kode seperti ini
6. Salin kode HTML di bawah ini, kemudian Paste pada kode <data:post.body/> Yang terakhir

<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author profile' expr:src='data:post.authorPhoto.url' itemprop='image' title='author profile' width='90px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>

• Agar tampilannya bagus, silahkan tambahkan kode CSS di bawah ini, salin dan simpan di atas kode ]]></b:skin>

/* Author Profile */
.author-profile {
    overflow: hidden;
    margin: 30px 0;
    line-height: 1.5;
}
.author-profile img {
    border: none;
    float: left;
    margin-right: 15px;
    border-radius: 46px;
}
.author-profile > span {
    font-size: 14px;
    color: #888;
}
.author-profile a.g-profile {
    font-weight: 500;
    color: #444444;
    font-size: 18px;
    margin-bottom: 5px;
    display: inline-block;
}
.author-profile a.g-profile:hover {
    color: #49ACE1;
}
.author-profile a.g-profile:after {
    content: "f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 4px;
    color: #49ACE1;
}

• Lalu klik Simpan Tema 

Jika berhasil dan sukses maka hasilnya akan seperti pada gambar di bawah ini:

Catatan:

Jika tanda centang biru tidak muncul, silahkan tambahkan kode Font Awesome ke template blog Anda. Silahkan Copy kode di bawah ini lalu Paste di atas kode </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Itulah artikel mengenai cara menampilkan author profile di bawah postingan blogger, selamat mencoba. Semoga bermanfaat.

✖

Bagikan:

• Bagikan melalui Facebook Bagikan melalui Twitter Bagikan melalui Pinterest Bagikan melalui Whatsapp Bagikan melalui Linkedin Bagikan melalui Telegram

Subscribe Our Newsletter