KliniKomputer

Membuat Author Post Detail Secara Otomatis - Kita akan membuat sebuah widget keren. Dimana dengan menggunakan wdget ini pengunjung dapat mengenali kita lebih dekat, dan pastinya kita juga bakalan terkenal. Author Post Detail merupakan sebuah widget yang sifatnya menampilkan pemilik/penulis sebuah blog. Adapun format yang ada pada widget ini adalah, Nama Penulis, Tanggal Postingan, Label Postingan, dan tweet menu yang dapat digunakan untuk menyebarluaskan artikel ke twitter tanpa ribet.

Author Post Detail

Selain itu, widget ini akan otomatis muncul dimasing-masing postingan kamu. Umumnya widget ini terletak dibawah judul postingan. Jadi buat yang mau mencoba silahkan ikuti langkah-langkah nya seperti berikut ini :

1. Login Blogger
2. Tuju ke Rancangan -> Edit HTML
3. Centang expand template widget, Cari ]]></b:skin>
4. Letakan CSS berikut diatasnya
.tweetmeme{ margin-left:10px; padding-top:17px; font-size:11px; float:left; }
4. Cari <data:post.body/>
5. Letkan kode di bawah ini di atas <data:post.body/>

<br/>
<div class='line-border'>
<div style='float: left; padding-top: 0px;'>
<img alt='i-om' height='48' src='http://img10.imageshack.us/img10/7945/tesym.jpg' title='4JIE' width='48'/>
</div>
<div class='profile-name'>
<a href='http://4-jie.blogspot.com' rel='dofollow' target='_blank' title='4JIE'><b>By 4JIE</b></a>
</div>
<div class='tags-name'>
Date
<span class='post-timestamp'>
&#8594;
<data:post.dateHeader/>

</span>
<br/>

<div class='labelpost'><b:if cond='data:post.labels'>Tags &#8594; <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>

</b:loop></b:if>
</div>

</div>
<div class='tweetmeme'>
<script type='text/javascript'>
tweetmeme_style = &#39;compact&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;freedown4u&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script>
</div>
<div class='spacer'/></div><br/>

Keterangan !
Teks Biru : Link gambar author post detail
Teks Orange : Ganti dengan alamat blog kamu
Teks Pink : Ubah menjadi nama author kamu