Cara Menampilkan Author Profile di Bawah 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.

Ada 2 macam widget author profile.

Yang pertama,

Sering di sebut dengan istilah author box atau kotak penulis.

Author box ini merupakan widget yang dibuat dengan cara manual, ada berbagai macam kode script yang bisa Anda gunakan untuk membuat widget author box.

Ciri lain dari widget ini biasanya dilengkapi dengan berbagai tombol media sosial seperti facebook, twitter, instagram, youtube, google+ dan sebagainya.

Untuk membuat widget author box silahkan baca artikel ini:

1. Cara Membuat Widget Author Box Mirip Google Badge
2. Cara Membuat Widget Author Box Sederhana di Sidebar Blog

Yang kedua,

Di sebut dengan author profile atau profil penulis.

Artikel yang sedang Anda baca ini merupakan tutorial untuk menampilkan author profile di bawah postingan blog.

Widget author profile biasanya lebih simpel dan memiliki integrasi dengan profil google+ Anda, sehingga status atau cerita yang Anda tulis di profil google+ akan tampil pada widget ini.

Cara Menampilkan Author Profile di Bawah Postingan Blogger

Cara Menampilkan Author Profile di Bawah Postingan Blogger

Jika Anda ingin menampilkan profil penulis di bawah postingan blog, silahkan ikuti langkah-langkahnya di bawah ini.

1. Masuk ke Blogger.com
2. Klik Tata Letak > klik Edit di bagian blog posts

Edit Blog Posts

3. Silahkan cetang kotak Tampilkan Profil Pengarang di Bawah Pos

Tampilkan Profil Pengarang di Bawah Pos

4. Klik Simpan

5. Kemudian masuk ke halaman About Me Google+ dengan mengklik URL berikut ini:
https://aboutme.google.com/?referer=gplus

6. Klik tombol plus (+) di bagian bawah seperti gambar di bawah ini:

Tombol Tambahkan Info

7. Lalu akan muncul beberapa pilihan, silahkan klik Cerita. Jika tidak ada kemungkinan Anda sudah pernah membuatnya silahkan di edit kembali bagian perkenalannya

Tambahkan Info Cerita

8. Silahkan tulis Semboyan dan Perkenalan Anda, jika sudah klik OKE

Menulis Semboyan dan Perkenalan

Catatan:
Hindari penggunaan link aktif pada bagian perkenalan, karena bagian ini akan tampil di semua halaman postingan blog Anda.

9. Dalam keadaan default perkenalan yang Anda tulis bersifat pribadi, silahkan ubah menjadi publik dengan cara mengklik ikon gembok seperti gambar di bawah ini:

Ubah Perkenalan Menjadi Publik

10. Kemudian klik Publik, lalu reload halaman maka gambar gembok akan berubah menjadi gambar dunia berwarna hijau

Sampai di atas seharusnya profil penulis sudah bisa muncul di bawah postingan blog, silahkan Anda cek terlebih dahulu.

Jika belum tampil, silahkan ikuti langkah-langkah di bawah ini untuk membuat widget author profile di bawah postingan blogspot dengan menambahkan beberapa baris kode HTML dan CSS.

Cara Membuat Author Profile di Bawah Postingan Blogger

Setelah menerapkan cara di atas tapi widget profil penulis belum juga muncul silahkan tambahkan kode ini di bagian template blog Anda.

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari kode <data:post.body/> biasanya ada 1 sampai 3 kode seperti ini
4. Copy kode HTML di bawah ini, kemudian Paste di bawah kode <data:post.body/> yang pertama

<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>

Catatan:
Jika di simpan di bawah kode <data:post.body/> yang pertama tidak berhasil silahkan simpan pada kode yang terakhir.

5. Agar tampilannya bagus silahkan tambahkan kode CSS di bawah ini, simpan di atas kode ]]></b:skin> atau </style>

/* 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;
}

6. Lalu klik Simpan tema

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

Author Post Profile Widget

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.

Related Posts

Berlangganan update artikel terbaru via email:

5 Responses to "Cara Menampilkan Author Profile di Bawah Postingan Blogger"

  1. terimakasih banyak kak.. sarannya berhasil

    ReplyDelete
  2. untuk template blogger yang versi widget 2 kok gak mau ya gan..

    ReplyDelete
    Replies
    1. Maksudnya 2 widget? mungkin 2 kolom.
      Blog ini juga termasuk 2 kolom yaitu kolom postingan dan kolom sidebar.

      Coba pastikan bagian "Perkenalan" di setting menjadi Publik.
      Atau coba perkecil nilai padding dan margin, kalau tetep tidak muncul penyebabnya mungkin karena template yang digunakan tidak support.

      Delete
  3. Kok centang biru nya tidak berhasil ya ?

    ReplyDelete

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel