Menambahkan Author Box / Paraf di Bawah Postingan

Siapa seh yang menulis tulisan ini? Untuk itu kita bisa menambahkan Author Box, yaitu profil singkat si penulis atau juga bisa di ganti dengan tanda tangan si empunya blog ( seperti nampak pada gambar disamping) beserta photonya. Author box itu bisa menampilkan biografi singkat diri kita dan juga mungkin bisa menambahkan kontak kita atau terserah Anda akan di isi apa. Dengan menambahkan author box di bawah komentar akan membuat tulisan kita itu jelas. Selain itu bisa juga untuk membangun personal branding(Narsis hehehehe).

Cara Menambahkan Author Box di Bawah Postingan
  • Login ke Blogger.
  • Di halaman Dasbor, kita pilih Rancangan.
  • Kemudian pilih Edit HTML
  • Beri tanda centang pada Expand Template Widget
  • 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;
    }
  • 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='https://lh5.googleusercontent.com/-52kfBB7MjYA/TnmyYCDXJTI/AAAAAAAAAEg/ipz179fX6ls/parafku.png' width='70'/><b>Tentang Saya</b><br/>
    Sekilas tentang Profil Anda<br/></p>
    </div>
    </b:if>

  • Sebelum menyimpan, ganti https://lh5.googleusercontent.com/-52kfBB7MjYA/TnmyYCDXJTI/AAAAAAAAAEg/ipz179fX6ls/parafku.png 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.

  • Simpan jika sudah selesai.
Menambahkan Author Box / Paraf di Bawah Postingan

0 comments:

Post a Comment