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 == "item"'>
<div class='azisinfo'>
<img alt='Azis Lamayuda' class='cmd-avatar' src='http://lh6.ggpht.com/_MvLBi88bM_I/TH3mza0bPDI/AAAAAAAABWY/KcrAtqe4i6o/Azis.jpg'/>
Penulis :  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 == "item"'>
<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 == "item"'>
<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.
0komentar:
Leave a Reply