Menampilkan Avatar Komentar Untuk Template Non-Standart

Kini blogger telah berbenah lagi, dengan berusaha lebih baik lagi. Fitur yang diberikan yaitu kita bisa menampilakan avatar (foto) komentator blog kita. Sama dengan Wordpress yang lebih duluan memeberikan fitur ini, avatar yang komen pada postingan kita akan nampang di bawah postingan disamping tulisan komentarnya.

Untuk blogger yang masih memakai template klasik dari blogger.com akan bisa menikmatinya secara langsung. Tapi saat ini pastilah sangat sedikit yang memakai template klasik dari blogger.com karena memang tampilan kurang menarik dan pilahan yang sedikit. Banyak blogger yang mendowload atau menggantinya dengan yang baru dari pihak ketiga (diluar blogger.com). Dengan template baru, yang non standart dari blogger.com kini juga bisa menikmati fitur ini, yaitu Menampilkan Avatar komentator. Cek dulu di Settings – Comments kemudian periksa di samping “ Show profile images on comments? “ pilihanya pada “ Yes”

Cara Menampilkan Avatar Komentar Untuk Template Non-Standart
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari Kode <dl id='comments-block'> dan jika tidak ketemu, cari kode berikut ini <div id='comments-block'>
6. Setelah kode di atas ketemu kemudian ganti dengan kode berikut ini.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

7. Cari lagi kode berikut ini  
<a expr:name='data:comment.anchorName'/>
8. Taruh (copy-paste) kode berikut ini di atasnya.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

9. Simpan template jika sudah selesai.

selengkapnya>>

Menghilangkan Tulisan "Langgan: Entri (Atom)"

Kadang blog kita ingin terlihat rapi, tentu saja begitu bukan? Ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting adan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya gar lebih rapi.

Blog yang rapi, dengan tampilan yang sederhana, tidak terlau banyak tulisan atau lebar, mungkin sampai ke bawah banget :( Kita akan belajar bagaimana cara menghilangkan tulisan "Langgan: Entri (Atom)". Sehingga blog kita diharapkan bisa lebih rapi lagi, dan menarik pengunjung untuk berlama-lama di blog kita

Cara Menghilangkan Tulisan "Langgan: Entri (Atom)"
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

6. Hapus (delete) kode tersebut.
7. Simpan template jika sudah selesai.

selengkapnya>>

Membuat Artikel Terkait dengan Disertai Thumbnails

Salam blogger :) Sebelumnya kita sudah pernah membuat artkel terkait, yaitu menampilkan postingan-postingan yang berkaitan dengan berdasarkan label yang sama. Jika yang kita pelajari dulu adalah related articel yang hanya menampilkan judul-judul terkait di bawah postingan yang kita buka/lihat. Maka berbeda dengan sekarang. yaitu Artikel terkait (Related Post) kita tampilkan beserta dengan thumbnail (Mini Gambar) yang ada di postingan kita.

Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita. :D

Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=5;

Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle="Related Posts";

Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai.

selengkapnya>>

Menambahakan Botton Bookmarking Lokal

Masih ingat dengan tutorial yang dahulu, mengenai addthis? Itu lo widget yang kita gunakan untuk berbagi artikel atau postingan kita ke bookmark atau sosial network. Dengan menambahkannya di bawah postingan blog kita maka akan ada kemungkinan postingan itu bisa menybar ke berbagai sosial network atau bookmarking.


Sekarang jika addthis adalah untuk berbagi yang sifat bookmarkingnya mendunia, sekarang kita akan belajar menambahkan button yang akan bisa membagikan postingan kita ke bookmarking lokal, sperti Infogue atak Lintas Berita. Dengan demikan postingan kita menyebar pada tempat yang tepat. Karena Di Lintas Bertia atau Infogue, pembacanya adalah lokal, Indonesia.

Cara Menambahakan Botton Bookmarking Lokal
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <div class='post-footer'>
6. Setelah itu taruh kode berikut ini di bawahnya

<script type='text/javascript'>
var ig_url = '<data:post.url/>';
var ig_judul = '<data:post.title/>';
</script>
<script src='http://www.infogue.com/widgets/widget_sharegue.js'></script>

7. Simpan Template

selengkapnya>>