Cara buat Author Box simple bawah entry content

Cara buat Author Box simple bawah entry content posts anda. Tutorial cara buat Author Box minimal dan simple bawah entry content ini adalah request dari seorang blogger melalui artikel sebelumnya.

Screenshot Author Box ini di Tablet

---

Step 1

---

Copy dan edit code dibawah.

<div class='author_box left'>

<div class='image_author center'>
<a class='center link_author' href='http://www.thesisblogger.com/about' title='Permalink to About pages'><img alt='Shah Danial Profile' class='center pic_author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzXhqFLw-v14FPbeRDiFAdeedgh4pf450uGC5ImqI11VbBGARizA7_mEbqZiTSrFv1VEY8CW6mrFLb5flhAtOktiHds8SqUbiu7_8SbPmpSTsdKC7GFGCJYVysnvMezUC-xE6qUKqcxFf7/s100-c/Shah-Danial.jpg'/></a></div>

<div class='the_messages'>ada soalan yang memungkin saya perlu menjawabnya dengan beberapa code? ajukan di Technical Questions page.</div>

 <span class='signature'><a href='http://www.thesisblogger.com/about' target='_blank' title='Read about the author'>Shah Danial</a></span>
 </div>

• paste code diatas, ke dalam HOOK AFTER RELATED POSTS.
• Tip: saiz gambar profile picture sebaiknya 100x100 px (agar tidak berat loading). Lebih sikit tidak mengapa, jangan kurang.
• optional: jika upload gambar di Blogspot, sila pilih original size. Kemudian tukar s1600 kepada s100-c pada link gambar tersebut (untuk resize and crop).

---

Step 2

---

Kemudian copy CSS dibawah:

/* THESIS AUTHOR BOX
---------------------*/
.custom .hook .author_box{padding:50px 0 30px}.custom .hook .image_author a{width:100px;height:100px;display:inline-block;overflow:hidden;border-radius:100%;margin:-50px 10px 0;border:1px solid #eee;background:#fff}.custom .hook .image_author{overflow:VISIBLE;background:#fafafa;margin:0;border:solid #eee;border-width:0 1px 0;border-top:10px solid #85c15d}.custom .hook .author_box .pic_author{width:100%}.custom .hook .the_messages{font-size:15px;background:#fafafa;border:solid #eee;border-width:0 1px;margin:0 auto;padding:0 15px 10px}.custom .hook .author_box .signature{display:block;background:#fafafa;text-align:center;font-size:30px;padding:0 0 10px;border:#eee solid;border-width:0 1px 1px}.custom .hook .author_box .signature a{text-decoration:none;color:#8f7a66;font-family:'Cookie',cursive,ubuntu}.custom .hook .author_box .signature a:hover{opacity:.8}@font-face{font-family:'Cookie';font-style:normal;font-weight:400;src:local('Cookie-Regular'),url(https://fonts.gstatic.com/s/cookie/v7/crMuSvy3krjox1JAKfe7Ew.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}

Pastekan ianya ke CUSTOM CSS.

DONE!