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 == "item"'>
<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 == "item"'>
<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>
</b:if>
Setelah diterapkan akan tampil seperti ini
<div class='post-info'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>
</b:if>
6. Simpan template dan lihat hasilnya.
3 komentar
terimakasih.. sudah saya terapkan di tipepedia.com
oke.. :D
oke.. :D
Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@