Lompat ke konten Lompat ke sidebar Lompat ke footer

Menambahkan Author Box di Bawah Postingan

Menambahkan Author Box di Bawah Postingan
Siapa seh yang menulis tulisan ini? Untuk itu kita bisa menambahkan Author Box, yaitu profil singkat si penulis blog beserta photonya. Author box itu bisa menampilkan biografi singkat diri kita dan juga mungkin bisa menambahkan kontak kita. Dengan menambahkan author box di bawah komentar akan membuat tulisan kita itu jelas. Selain itu bisa juga untuk membangun personal branding.

Cara Menambahkan Author Box di Bawah Postingan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya;

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

6. Cari kode <div class='post-footer-line post-footer-line-1'> dan taruh kode berikut ini di bawahnya;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='author-box'>
    <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='URL avatar/photo kita' width='70'/><b>About Author</b><br/>
   Sekilas tentang diri kita<br/></p>
    </div>
    </b:if>

7. Sebelum menyimpan, ganti URL dengan URL photo kita, dan tulis sekilas tentang diri kita. Dan juga bisa menganti judul about author. Dan juga mengubah kode css yang disesuaikan dengan tampilan blog kita.
8. Simpan jika sudah selesai.

9 komentar untuk "Menambahkan Author Box di Bawah Postingan"

  1. Trimakasih bos... Bisa belajar banyak di sini saya sebagai pemula yang menggunakan blogspot....

    BalasHapus
  2. Makasih om buat infonya,...info seperti ini
    yang saya cari..

    BalasHapus
  3. makasi kak atas infonya
    bermanfaat banget
    langsungmeluncur dah

    BalasHapus
  4. Tahnxs y Tutorial.a
    moga tmbah maju :)

    BalasHapus
  5. Kenapa ya kalau di blog saya tidak ada kode yang dicari di halaman Edit HTML-nya ?

    BalasHapus
  6. thanks for the article, good....

    BalasHapus
  7. sukses terus mas..
    izin nyimak.. ;))

    BalasHapus

Berlangganan via Email