Cara Membuat Widget Author Box Di Bawah Posting Blog

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.


Cara Membuat Widget Author Box Di Bawah Posting Blog

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.
Bagikan Ke
7 Komentar untuk "Cara Membuat Widget Author Box Di Bawah Posting Blog"

wah keren gan tutorialnya, blognya juga bagus.
tukeran link tuk gan. minat hub gunawanbintang08@gmail.com

Keren keren Tolong Ilmunya. naelulsmart.blogspot.co.id

Thank sudah berbagi caranya, sangat bermanfaat. . .

sip gan..semoga bermanfaat..

wah terimakasi admin telah share ilmunya :)

salam dari www.imammustofa.com

wah.. ini yang saya cari2.. makasih banyak tutorialnya mas. great job!

Terima kasih atas tutornya master, semoga berkah :)