Cara Membuat Widget Author Box Di Bawah Posting Blog

Membuat Widget Author Box Di Bawah Posting Blog. Widget author box adalah sebuah widget yang berisi tampilan informasi kecil tentang author / admin pemilik blog yang bisa anda terapkan dibawah posting blog anda dengan berisi kata-kata yang diselipkan di widget tersebut, selain itu widget author ini juga sudah terpasang foto yang ada pada akun Google+ anda, karena widget ini sudah akan tersambung dengan akun google+ secara otomatis.

Bagi anda yang suka menghias tampilan blog, maka widget author box ini perlu anda coba karena selain bisa lebih exsis untuk author, kita juga bisa menyelipkan sebuah kata-kata motivasi atau yang lainnya sesuka anda.

Baca Juga : Cara Memasang Jam Di Blog Keren

Bagi yang berminat untuk membuat widge author box ini, silahkan ikuti tutorialnya yang sangat mudah.

Cara Membuat Widget Author Box

1. Buka akun blogger.

2. Pilih menu template dan klik edit HTML

3. Silahkan letakan kode dibawah ini tepat diatas kode </style> atau ]]></b:skin>

/* Author Box */
.authorboxwrap{background:#fafafa;padding:15px;overflow:hidden;margin-left:-20px;margin-right:-20px;margin-bottom:-21px;border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6}
.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:#333}
.author_description_container h4 a:hover{color:#111;text-decoration:underline}
.author_description_container p{margin:0 0 10px;color:#333;line-height:normal;font-size:95%}

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<div style='clear:both'/>
 </b:if>

5. Terakhir save template anda dan lihat hasilnya.

Sekian untuk tutorial "Cara Membuat Widget Author Box Di Bawah Posting Blog" lebih dan kurangnya saya mohon maaf. sukses selalu.