Cara Membuat Widget Author Box di Bawah Posting

Cara Membuat Widget Author Box di Bawah Posting. Hallo sobat blogger, kali ini saya ingin membagikan sebuah tutorial lagi, tutorial apa sih? yapz membuat tutorial cara membuat sebuah widget author box dibawah posting blog, widget author box adalah sebuah widget yang berisi tentang deskripsi singkat about author dan dipasang juga foto author berikut deskripsi singkatnya, kurang lebih tampilannya seperti gambar dibawah ini.

Widget author box ini dikaitkan langsung dengan akun google plus sobat, jadi untuk pengisian deskripsi singkatnya, sobat bisa mengeditnya di bagian profil google+ atau akun google plus, nanti diakhir artikel, saya akan beritahu cara mengisi deskripsi singkat yang nantinya dihubungkan ke widget author box tersebut.

Tak lain widget author ini sebagai penghias blog atau bisa dibilang agar admin blog bisa tetap eksis di blog dengan adanya widget author tersebut, untuk mempercantik blog, ya kenapa tidak..hehehe

Bagi sobat yang tertarik dan ingin memasang widget ini, sobat bisa ikuti tutorialnya, silahkan sobat simak baik-baik saja.

Cara Membuat Widget Author Box di Bawah Posting

1. Buka akun blogger sobat.

2. Klik menu template >> klik edit HTML.

3. Letakan kode dibawah ini diatas kode ]]></b:skin> atau </style>

/* CSS Multi Author Box */
.authorboxwrap{margin:0 auto 20px;padding:0 15px;overflow:hidden}
.avatar-container {float:left;margin-right:10px;}
.avatar-container img{background:#eee;width:70px;height:auto}
.author_description_container h4{font-weight:600;font-size:16px;display:block;margin-bottom:10px}
.author_description_container h4 a{color:#222}
.author_description_container h4 a:hover{color:#111;text-decoration:underline}
.author_description_container p{margin:0 0 10px;color:#222;font-size:95%}

4. Selanjutnya letakan kode dibawah ini tepat di bawah kode </article>

<b:if cond='data:blog.pageType == "item"'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>
</p>
</div>
</div>
</div>
</b:if>

5. Jika sudah silahkan save template blog sobat.

Cara Mengisi deskripsi singkat di widget author box

1. Buka halaman google+ sobat https://plus.google.com/

2. Selanjutnya pilih icon Profil.

3. Klik pada icon "Edit Profil"

4. Klik lagi pada icon about atau tentang saya.

5. Selanjutnya isi kan deskripsi singkat sobat di kolom perkenalan atau bio yang nantinya muncul di deskripsi widget author box tersebut.

6. Klik simpan dan selesai.