2009-08-20

Memasang avatar profil di form komentar blogger


Sebelumnya kita sudah tahu layanan avatar dari mybloglog (MBL). Dan baru-baru ini blogger.com memunculkan fasilitas avatarnya, namun untuk menampilkan avatar tersebut kita harus mengupload foto kita saat ingin berkomentar. Sangat tidak praktis bukan?
Nah, untuk mengatasinya masalah tersebut, inilah solusinya
1.Masuk ke Layout - Edit HTML
2. Cari kode ini <dl id='comments-block'>
3. Kalau sudah ketemu ganti dengan kode ini
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

4. Lalu cari kode ini 
5. Tambahkan kode dibawah ini tepat setelah kode yang tadi


&lt;b:if cond='data:blog.enabledCommentProfileImages'&gt;<br>&lt;data:comment.authorAvatarImage/&gt;<br>&lt;/b:if&gt;


continue...

2009-08-16

Memasang auto read more pada blogger

Auto read more adalah read more yang otomatis memotong artikel kita tanpa harus memasang tag <div class="fullpost">..</div> ataupun <span id="fullpost">..</span> sangat praktis bukan? Nah, untuk membuatnya ikuti langkah berikut.
1. Login ke Blogger.com
2. Masuk ke Layouts -> Edit HTML jangan centang expand widget template.
3. Cari kode </head> bisa menggunakan F3, kalau sudah ketemu langsung copy paste kan script dibawah ini tepat di atas kode </head> tadi.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

5. Simpan pekerjaanmu
6. Masih pada Edit HTML centang Expand Widget Template
7. Cari kode seperti ini <data:post.body/> kemudian ganti dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
source:http://www.o-om.com/2009/04/cara-pasang-auto-read-more-terbaru-part.html continue...