Menambahkan Thumbnail Avatar Pada Post Info

2/27/2016
Menambahkan Thumbnail Avatar Pada Post Info

Menambahkan Thumbnail Avatar Pada Post Info - Berikut cara menambahkan thumbnail avatar  pada post info template Revoltify.

Thumbnail avatar ini nantinya akan muncul di halaman postingan blog, silahkan ikuti beberapa langkah penerapannya.

1. Buka Dashboard Blogger
2. Klik Template dan buka Edit HTML
3. Terapkan kode di bawah ini di dalam CSS khusus Item / Post

.post-info {background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none;}
.post-info a {display:inline;background:transparent;color:#666;padding:4px 6px 4px 6px;transition:all .3s ease-out;}
.post-info a:hover {color:#e76e66;}
.author-info, .time-info, .comment-info, .label-info, .review-info {
margin-right:8px!important;display:inline-block;color:#666;padding:10px;}
.post-info .avatar-author {float:left;border:0;padding:0;width:38px;height:38px;box-shadow:none;}
.post-info {font-size:small;text-align:center;background:#69bedd;padding:0;}
.author-info, .time-info, .comment-info, .label-info, .review-info, .post-info a,.post-info a:hover {color:#fff;}

4. Kemudian terapkan kode di bawah ini tepat sebelum </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s38$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
</b:if>

5. Untuk penerapan pada Markup

Cari kode di bawah ini

<b:includable id='post' var='post'>

Selanjutnya cari kode di bawah ini

<div class='post-info'>

Terapkan kode di bawah ini tepat setelah kode di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

Setelah diterapkan akan tampil seperti ini

<div class='post-info'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

6. Simpan template dan lihat hasilnya.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.