Cara Membuat Author Profile Responsive di Bawah Postingan Blogger

TongkolPedia - Author Profile merupakan salah satu widget di Blogger yang berfungsi untuk menampilkan penjelasan singkat mengenai pemilik atau penulis pada blog tersebut. Kini sudah banyak author blogger yang menggunakan widget author profile ini pada blog mereka masing-masing.

• Silahkan masuk ke akun Blogger kamu masing-masing.
• Klik Tata Letak - Blog Posts - Edit.

• Scroll kebawah hingga menemukan pilihan Tampilkan Profil Pengarang Di Bawah Post. Silahkan klik Centang pada kotak tersebut. Klik Simpan dan jangan lupa juga klik Simpan setelan.

• Masuk ke halaman Tentang Saya di Google+.
• Klik tombol Plus (+) pada pojok kanan bawah halaman tersebut. Kemudian, klik pilihan Cerita.

• Silahkan isi Semboyan dan Perkenalan kamu. Setelah itu klik Oke.

• Pada keadaan default, perkenalan yang sudah kamu tulis itu bersifat Pribadi. Silahkan klik icon gembok, kemudian pilih Publik. 

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

• Tempelkan kode ini tepat dibawah kode <data:post.body/>. Biasanya ada 1 hingga 3 kode yang seperti ini. Silahkan kamu tempelkan kode tadi pada <data:post.body/> yang pertama. Apabila belum muncul, tempelkan kode tadi ke <data:post.body/> yang terakhir. 

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

• Klik Simpan tema.
• Silahkan kamu ke halaman blog kamu. Apabila tanda centang biru tidak muncul, silahkan tambahkan kode Font Awesome ke Blog kamu. Caranya, salin kode dibawah ini dan tempelkan di atas </body>.

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

• Klik Simpan tema.
• Jika sudah, maka tampilannya akan menjadi seperti ini.

Penutup