Membuat Author Tampil disetiap Postingan - Asrizal Wahdan Wilsa Sharing Media Membuat Author Tampil disetiap Postingan

Post Top Ad

Membuat Author Tampil disetiap Postingan

Share This

Sobat blogger semua, mungkin pada template yang digunakan kebanyakan yang tampil hanya authornya saja tidak disertai dengan foto dan bahkan hanya tampil satu baris saja. tampilan ini dapat dimodifikasi menjadi sedemikian rupa, untuk itu pada tutorial kali ini saya akan memaparkan bagaimana cara membuat author image tampil di setiap postingan.penasaran bagaimana cara membuatnya?ok mari kita ke TKP blogger untuk tutorialnya
nah berikut adalah contoh gambarnya:

Berikut adalah cara membuatnya:
  1. Login ke account blogger milik anda
  2. klik menu rancangan lalu klik edit html
  3. expand widget templates
  4. cari kode ]]></b:skin> dan tambahkan kode css dibawah ini diatas kode tadi .tweetmeme{ margin-left:10px; padding-top:17px; font-size:11px; float:left; }
  5. cari <data:post.body/>
  6. letakan kode dibawah ini diatas <data:post.body/> :
<br/>
<div class='line-border'>
<div style='float: left; padding-top: 0px;'>
<img alt='izal' height='48' src='http://i726.photobucket.com/albums/ww267/asrizalwahdanwilsa/C-OM%20Blogz/Admin.jpg' title='izal' width='48'/>
</div>
<div class='profile-name'>
<a href='http://ALAMATBLOGANDA.blogspot.com' rel='dofollow' target='_blank' title='izal'><b>By izal</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: Yang berwarna Hijau adallah lokasi foto sobat
Teks yang bercetak Merah adallah nama sobat silahkan di ganti
Yang berwarna Biru adallah alamat blog sobat

Simpan hasil kerja anda, dan lihat hasilnya, semoga berhasil....

4 komentar:

  1. nice info Gan..!!
    kpn2 ane praktekkan deh.. ^_^d

    BalasHapus
  2. mas ... kok ga ada garis pembatasnya sich..
    dah ku coba...
    kasih tau ya mas...
    http://kiri-jalan-terus.blogspot.com/

    BalasHapus
  3. MAkasih mas...
    udah saya coba... sekarang masih proses nich...
    eh klo labelnya tuch ga bisa ilang walaupun udah diatur di lemen halaman-nya gimana..???
    masih tetap aja muncul....

    BalasHapus
  4. @ Blog Progress
    ya sob, silahkan docpba..
    untuk labeljuga bisa dihapus, coba aja browsing "cara menghapus label dalam postingan"

    BalasHapus

Post Bottom Ad

Pages