Make Author Box Below Each Post Blogger

Bissmillah ... Alhamdulillah akhirnya sempat juga menjawab pertanyaan sahabat blogger saya. Beliau mengirimkan satu pertanyaan mengenai cara membuat informasi penulis / author pada setiap postinngan blog. Mungkin klo dalam kamus keBloggeran ini biasa disebut Author Box.

asskum mas saya mau tnanya bgimana caranya Menambahkan Informasi Penulis/Author pada Artikel kita dtunggu mas postingannya ^___^

Untuk menjawab pertanyaan sahabat blogger, saya akan mencoba memberikan tiga contoh tampilan Author box untuk dipasang pada blog. Untuk Lebih lengkapnya silahkan kalian Login ke blogger Kalian, Kemudian Pilih Rancangan ---> EDIT HTML (centang template widget).

1. Tampilan Pertama



== Simpan CSS berikut diatas kode ]]></b:skin>

.azisinfo{
background:#f2f2f2;
border:1px solid #585858;
color:#000;
display:block;
float:left;
margin-bottom:10px;
margin-top:0px;
overflow:auto;
padding:5px;
text-decoration:none;
overflow: auto;
}
.azisinfo img{
float:left;
background:#171717;
border:1px solid #333;
height:62px;
margin:1px 5px 0 0;
padding:4px;width:62px
}

== Simpan kode berikut dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='azisinfo'>
<img alt='Azis Lamayuda' class='cmd-avatar' src='http://lh6.ggpht.com/_MvLBi88bM_I/TH3mza0bPDI/AAAAAAAABWY/KcrAtqe4i6o/Azis.jpg'/>
Penulis : &#160;Azis Lamayuda | BLOG : <a href='http://www.z33s.co.cc/'>Do The Best To Get The Best</a><br/>Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.
<p style='margin:-8px 0'><br/><center>
<a href='http://www.z33s.co.cc/2010/09/make-author-box-below-each-post-blogger.html' style='text-decoration:none;font-size:70%;'>Widget By Azis Lamayuda</a></center></p>
</div>
</b:if>

== Simpan Template Kalian


2. Tampilan Kedua



== Simpan CSS berikut diatas kode ]]></b:skin>

.azisinfo {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.azisinfo p {
margin: 0;
padding: 0;
}
.azisinfo img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

== Simpan kode berikut dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='azisinfo'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://lh6.ggpht.com/_MvLBi88bM_I/TH3mza0bPDI/AAAAAAAABWY/KcrAtqe4i6o/Azis.jpg' width='70'/><b>Tentang Penulis</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.<br/>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.z33s.co.cc/2010/09/make-author-box-below-each-post-blogger.html' style='text-decoration:none;font-size:70%;'>Widget By Azis Lamayuda</a></center></p>
</div></p>
</div>
</b:if>

== Simpan Template Kalian


3. Tampilan Ketiga



== Simpan CSS berikut diatas kode ]]></b:skin>

.azisinfo {
float: left;
overflow: auto;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 15px;
margin-top: 15px;
background: #eee;
}
.azisinfo h3 {
margin-bottom: 10px;
}
.azis_photo {
float: right;
margin: 0 0 0 10px;
}
.azis_photo img {
border: 1px solid #666;
}

== Simpan kode berikut dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='azisinfo'>
<div class='azis_photo'>
<img alt='author' src='http://lh6.ggpht.com/_MvLBi88bM_I/TH3mza0bPDI/AAAAAAAABWY/KcrAtqe4i6o/Azis.jpg'/></div>
<h3>Tentang Penulis :</h3>
<p><a href='http://www.z33s.co.cc/' title='Post By Azis Lamayuda'>Azis Lamayuda</a> - Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.</p>
<p>Follow saya di <a href='http://twitter.com/z33s'>Twitter</a> atau <a href='mailto:yudaz33s@gmail.com'>Email</a> ke saya.<br style='clear:both;'/></p>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.z33s.co.cc/2010/09/make-author-box-below-each-post-blogger.html' style='text-decoration:none;font-size:70%;'>Widget By Azis Lamayuda</a></center></p>
</div>
</b:if>

== Simpan Template Kalian

Catatan :

• Silahkan kalian ganti kata-kata atau tulisan pada author box dengan tulisan atau kata-kata kalian.
• Untuk pemasangannya silahkan kalian pilih salah satu tampilannya
• Untuk penempatan kode, kalian jangan terpaku dibawah <data:post.body/>, karena mungkin kebanyakan dari template kalian ada yang sudah ditempeli widget lain seperti kode untuk bookmark share dll. jadi silahkan sesuaikan.

Semoga bermanfaat dan semoga artikel diatas dapat menjawab pertanyaan sahabat blogger.