Sunday, October 30, 2011

Membuat Author Post Detail Secara Otomatis

Tags

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

6 comments

mantap tutorialnya...
pengen nyoba tapi takut nambah script..
blog q dah mulai gembrot masalahnya...
Okey aq Bookmark dech URL artikelnya ntar pas pengen pasang aq Visit kembali kesini
Thans Info nya Sobat
Happy Blogging

Thanks infonya kawand, aku bookmark dulu, soalnya blog aku udah banyak script nich :D

keren sob ...
kpn-kpn ta coba aah .. :)

keren nih widgetnya...ijin pake yaa pak..:)

1. Berkomentar lah dengan sopan dan santun
2. No Spam No Live link dan tidak ada Link Mati
3. Free Backlink (Dofollow) dari blog berPagerank 2 ini


EmoticonEmoticon