AlhamdulILLAH.. akhirnya bisa juga ganti template blog ini setelah 2 hari 2 malam berkutat dengan editor template dan beberapa cangkir kopi pahit, hehehe... OK deh, langsung aja. Pada postingan kali ini a2i3s akan mencoba berbagi tips bagaimana cara mengedit tampilan dan tata letak avatar MyBlogLog pada kotak komentar. Untuk memasang avatar MyBlogLog di komentar a2i3s rasa ga perlu dibahas lagi, karena telah banyak yang mempostingnya, misal saja postingan dari OOM. Namun ternyata hasilnya agak sedikit ganjil jika kita lihat blank avatar default yang muncul berukuran kecil. Seperti gambar di bawah ini.

Nah, bagaimana cara mengubah ukuran default avatar sesuai dengan yang kita inginkan? Yuk kita bahas bareng-bareng.

1. Masuk ke Editor Template, lalu cari kode </head>

2. Paste kode di bawah ini tepat di atasnya, lalu Save.

<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)
edited by a2i3s (http://a2i3s-c0ol.blogspot.com)

version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/

if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}

//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

//metto tutto minuscolo perchè indexOf è case sensitive

if (autore != ""){
alt="MyBlogLog: " + autore;

myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img style=\"width:25px; height:25px;border-right:2px solid #663300;border-bottom:2px solid #660000;\"  src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>

3. Aktifkan mode Expand Widget Templates, lalu cari kode berikut:

<b:loop values='data:post.comments' var='comment'>

Lalu letakkan kode berikut di bawahnya:

<div style='border:0;float:right;margin: 5px 5px 5px 5px;'>
<script>
myBlogAvatar(&#39;<data:comment.id/>&#39;,&#39;<data:comment.authorUrl/>&#39;);
</script>
</div>

Nah, beres deh, silahkan dicek hasilnya.

Catatan: Kode yang saya beri warna biru dapat anda edit untuk menyesuaikan dengan tampilan template sobat masing-masing.

Hasilnya akan terlihat seperti tampilan avatar di blog ini, coba aja posting komentar, hehehehe... met mencoba...

Related Posts