Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Home → Semua Post

Memasang Total Komentar dan Total Posts

Fp037 Untuk memudahkan kita melihat jumlah makhluk yang sudah berkomentar di blog kita, sobat bisa pasang script untuk total komentar di blog sobat, script ini termasuk yang banyak di gunakan oleh blogger, selain script total post / artikel yang ada di blog kita.

 

Kalau total posts sendiri sebenarnya sobat bisa melihat di halaman dashboard blogger, namun jika sobat tertarik untuk memasangnya sekedar untuk mempelihatkan jumlah postingan yang sudah sobat buat, ya monggo disini juga ada scriptnya. Script total komentar ini ada bagusnya sobat letakkan dibawah recent comments, itu pun jika sobat telah memasangnya.

 

Dan begitupun untuk total posts sebaiknya dipasang dibawah recent posts, karena selain terlihat bagus juga agar tidak berantakkan. Coba saja jika total komentar sobat letakkan di atas header blog, kan lucu atuh, masa total komentar ada di header..pamer nih blog saya ada 10.000 komentar, huh cape� dehh. Whew

 

Langsung praktek, berikut kode script total komentar dan total posts nya :

 

  Kode script untuk total komentar :

 

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +'</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

 

  Kode script untuk total posts :

 

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

 

Yang harus diganti hanya tulisan dengan warna merah saja, ganti dengan alamat blog sobat.  Untuk meletakkannya sudah tau kan ? bagi yang masih awam, silahkan ikuti langkah � langkahnya berikut ini :

 

  1. Login ke blogger dengan ID sobat.

     

  2. Klik Tata Letak.

     

  3. Klik Elemen Halaman.

     

  4. kemudian klik Tambah Gadget.

     

  5. Pilih yang HTML / Javascript, kemudian masukkan salah satu kode script diatas.

     

  6. Setelah itu Simpan.

     

Mudah kan, silahkan di coba aja biar tau.Happy
Write a comment √ Read More... »

Memasang Widget Recent Post Dari Blogger

contoh Postingan terbaru atau biasa disebut recent posts merupakan informasi singkat yang menampilkan judul postingan terakhir / terbaru secara berurutan untuk memudahkan pengunjung melihat postingan terbaru kita.

 

Pada postingan saya terdahulu, sudah pernah saya bahas tentang membuat recent post dengan menggunakan feeds url kita. kalau cara seperti itu sangat mudah , namun hasil yang di dapat kurang sempurna karena tidak di tampilkannya gambar / thumbnails dan comment count (total komentar) dari postingan kita.

 

Sebenarnya jika sobat jeli, widget recent posts ini ada didalam fasilitas yang disediakan oleh blogger. Tidak usah panjang lebar, langsung saja kita menuju lokasi.

 

  1. Seperti biasa sobat login dahulu ke blogger.

     

  2. Kemudian pada Elemen Halaman klik Tambah Gadget.

     

  3. Pilih Featured.

     

    featured

     

  4. Lalu pilih Recent Posts Advanced.

     

    recent post

     

  5. Pada halaman pengaturan, silahkan sobat ganti Blog Url dengan alamat blog sobat.

     

    pengaturan

     

    Untuk Height merupakan tinggi dari widget, Number of posts to display adalah jumlah postingan yang akan ditampilkan, Summary length adalah panjang karakter isi postingan yang akan ditampilkan. Untuk yang lain � lain sobat contreng saja semua.

     

  6. Dibawahnya ada preview recent posts untuk memudahkan sobat melihat seperti apa hasilnya nanti.

     

    Preview

     

  7. Setelah itu jangan lupa Simpan.

Silahkan lihat hasilnya, mudah kan. Open-mouthed
Write a comment √ Read More... »

Cara Membuat Read More Otomatis

RMO Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.

 

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down. 

 

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

 

Berikut langkah � langkah dalam membuat read more otomatis :

  1. Silahkan login ke blogger terlebih dahulu.
  2. Klik Tata Letak. 
  3. Kemudian klik Edit HTML.
  4. Centang Expand Template Widget. 
  5. Letakkan kode berikut ini tepat diatas kode </head> :

    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>

  6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :
    <div class='post-header-line-1'/>
    <div class='post-body'>
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'>Readmore</a>
    </b:if>
    <div style='clear: both;'/>    
    sehingga sekarang hanya ada satu <data:post.body/>
  7. Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>

  8. Ganti kode tersebut dengan kode berikut 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>

     

  9. Kemudian Simpan Template.

 

Keterangan :

  • summary_noimg = 450 �-> untuk tinggi postingan tanpa gambar.
  • summary_img = 360 �-> untuk tinggi postingan dengan gambar.
  • img_thumb_height = 120 �> tinggi gambar.
  • img_thumb_width = 150 �> lebar gambar.
  • Read More� �> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

 

Silahkan sobat atur sesuai template sobat. Selamat berkreasi. Happy
Write a comment √ Read More... »

Cara Membuat Multi Kolom

kolom Tutorial kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa sobat buat untuk mempercantik kolom � kolom ini.

 

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus � putus dibawah tulisan dan icon cantik yang mengawali tulisan.

 

Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

 

  1. Seperti biasa login dulu ke blogger.

     

  2. Klik Tata Letak.

     

  3. Pilih Edit HTML dan centang Expand Template Widget. 

     

  4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> :

     

    #bottom {
    width: 990px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#000;
    float: center;
    background:transparent;
    padding: 15px 0 15px 0; }

     

    #bottom h2 {
    padding-left: 5px;
    margin: 0 0 10px 0;
    background:#0B3B0B;
    color:#fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-bottom: 1px solid #000; }

     

    #bottom ul{padding:0; margin:0; color:#333}

     

    #bottom ul li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmFGkICDbBgU4Gc8S74xPakXax9ODd7BZ87A7p4EY9Lzd8OpZ2gb86-baabw69Mrp_bP316EuBg8fkFTk_XXiOUPUoUq6n_m-C9ax3OZ0fdoVj_pO1ktv2WiHl3J5fD1rP75dk9LFVtXi/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

     

    #bottom li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmFGkICDbBgU4Gc8S74xPakXax9ODd7BZ87A7p4EY9Lzd8OpZ2gb86-baabw69Mrp_bP316EuBg8fkFTk_XXiOUPUoUq6n_m-C9ax3OZ0fdoVj_pO1ktv2WiHl3J5fD1rP75dk9LFVtXi/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

     
    #bottom ul li a:hover {
    background: #B1ACB1;}

     

    #left-bottom { /* kolom kiri */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;     }

     

    #center-bottom { /* kolom tengah */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;     }

     

    #right-bottom { /* kolom kanan */
    background:#ffffff; width: 300px;
    float: left;
    margin: 0 5px 0 10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px    }

     

  5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :

     

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

     

  6. Copas kode berikut ini tepat sebelum kode diatas :

     

    <div id='bottom'>

    <b:section class='bottom' id='left-bottom'/>

    <b:section class='bottom' id='center-bottom'/>

    <b:section class='bottom' id='right-bottom'/>

    </div>

     

  7. Kemudian Simpan Template sobat.

Sekarang sobat bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

 

Keterangan :

  • #bottom { width: 990px

     

    --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

     

  • background:#0B3B0B

     

    --> latar belakang (background kolom).

     

  • color:#fff

     

    --> warna tulisan judul

     

  • #left-bottom { /* kolom kiri */ width: 300px

     

    --> lebar kolom kiri.

     

  • -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;

     

    --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode �moz-border-radius tersebut.

     

  • Border-top: 2px solid #1B2A0A
    Border-bottom: 2px solid #1B2A0A
    Border-left: 2px solid #1B2A0A
    Border-right: 2px solid #1B2A0A

     

    --> untuk ketebalan garis pinggir masing � masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini. 

     

  • Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkKyhnQvyY27jTU4wkEDKvMD7-II2Z41qzlo18IQ_UAL7ubByrVuRKW0ay1fjPi7IjO999JyH3o_vkeIfUXxI-0FT1cR-N_XJ8RC9f1qIEwAxmXjeljhpmvf2ZffoKHNq_MsIYZPjTPxB/s320/z3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMqeFhEUHY-M3Gib8_BYI1jK4SqJBKvFWTaLDA0NVSZqCh3icaBDFMD7B9VlI4Yyjju0PUs_Qpoardos4BFA0GP_OVwam_lAwGSKCYmqBWETuZBkdJ70rkr96PfUyhpArdVEwTue7aY0B/s320/z2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75S3TuTuyu-Gk5QFE_PM-Z59DwVsf0hkOJHvFVMWwDl0F4MQGo9Pv6iQf2kUWGJ7EQ-qZqsF7NpCXo4xYSUCo8XYbUHp4RAyaDI3X-iK9yej3EUfm42EsQk0vVaOAxRt2M0vUB1BYD22V/s320/z1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4knts7a02t_13sPIlZ_J9HK42d27zsbtolQLbfEgLlnV-i1zU7Y-7vHgfX7mEO3f0t-DImFIFmT4kyKyxsnnZ8u8WTK6ucXEIRVgD2ZiW1qYyrEw8c4IR4dfG1EDK4TKxUXRlSAgdbLCB/s320/d1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4a1ALHjFYEw5IBFr-_QJOf5AvJPC6EUhpl8HvxVsAIGE2WiwsiKRxWDPsrfGx5SCVVFIfrdQ-LSmEEPc8anJTQmlyv-kjorRiq15Qlo8lb20vxoCRfEhX6y-IBvbJSFbj7kID462oh7h1/s320/d2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmFGkICDbBgU4Gc8S74xPakXax9ODd7BZ87A7p4EY9Lzd8OpZ2gb86-baabw69Mrp_bP316EuBg8fkFTk_XXiOUPUoUq6n_m-C9ax3OZ0fdoVj_pO1ktv2WiHl3J5fD1rP75dk9LFVtXi/s320/d3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsb4xbm17Ymya2XpGBVZ19KshCBQpKMsEzSgukGnEi8g5o3wlMO1BKXx_JJibPwr7ODqnvjDTEYv-NWtAqKeuMBZNmu6qDvjx1qCLNGsESHL4Q8-2u5LPZwdJ1ZynQeUx9WtVoakvCAIx/s320/c1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPcIDYxe372T3PIWrIohUCQ31xmqkKYxGpIsFUuqqex6cRERAj06sYRQBFflowIlgjZnOcX0a6978R0QYH7x8D1MIcxsaCI0paeaQ67ZLsxzZKRGs2y2XjXcb-F3B4dO1ZyfA3ubWUv7Kf/s320/c2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAxhCPjZyQJSpqqdswbtu7npsn_CusI3PxOHLmYRp-qy2vcsyVyfgBTQTXyLrxxYqHwIDRlRPo07WY-V2IVbp6pPw0imxl1oTVNcKD2X94Ei30sY3mMLK9DbFd8XdcJzt4f6xFalvMQRb/s320/c3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2y0zUPaBViKsnR8fCtJPSOL1JUkDFwjJdmzzmTZcG2wrJHRiL4p3g7nYiVw09WnebsZDJQm7g23sPJdpoa3WFNnL_5u4UGtNxvfIUyIu9n6dtxDVnikV-j0uIqWg27k034aZoPlqimRj/s320/a1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_6Gb0QSOQCZJDuZipOwpzWXg3F-SCPia5wzpni9k9kee2i4PPIIaq7_Hr37C8epcJZMGoK9UWuh7BPMFSerZGBjM9pkaTDh68wB-n1bSs4D0-_29fxlcvG9UXBbxFnp4IQjScqrehhg6/s320/a2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4QSonusp3jDoRrIWmh8u1uP2Pkk2nchCp1MGtpTYU49XS9q9HjUu5rQVpxixtExiYKTP89MnhfKpeweh67clXmJdM3Ol4nB67_YylB8uzSAZcUawNVXglgstAHu-Yom-OKssBDs86nZ6/s320/a3.gif

 

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat. Lihat contoh yang sudah jadi disini.

Selamat berkreasi !smile_wink
Write a comment √ Read More... »

Pasang Avatar Mybloglog di Kotak Komentar

Avatar Tutorial cara memasang avatar mybloglog di kotak komentar sebenarnya sudah lama, tapi dari beberapa kali saya berkunjung ke beberapa blog sobat, jarang sekali yang mengaplikasikannya.

 

Padahal menurut saya, tutorial memasang avatar di kotak komentar yang di populerkan oleh Amanda ini sangat bagus, karena kita bs melihat wajah yang memberi komentar dengan syarat telah menjadi member mybloglog. Saran saya buat sobat yang sudah ikutan mybloglog, sebelum komentar di blog saya sebaiknya ganti dulu foto yang lama dengan foto terbaik milik sobat. Laughing

 

Langsung saja, seperti biasa loginlah terlebih dahulu ke blogger.

  1. Buat yang belum mendaftar, jangan lupa untuk daftar dulu di mybloglog.

     

  2. Kemudian pada halaman blogger, klik Tata Letak.

     

  3. Pilih Edit HTML.

     

  4. Klik Download Template Lengkap, untuk jaga � jaga !

     

  5. Lalu Centang Expand Widget Template.

     

  6. Kemudian letakkan kode berikut diatas kode </head>

     

    <script type='text/javascript'>
    //<![CDATA[
    /*
    Merlinox and Napolux MyBlogLog Avatar Creator
    created by Merlinox (blog.merlinox.com)
    helped by Napolux (www.napolux.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 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>

     

  7. Setelah itu cari kode seperti dibawah ini :

     

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

     

  8. Kemudian letakkan kode berikut tepat setelah kode <b:loop values='data:post.comments' var='comment'> :

     

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

     

  9. Untuk kode yang berwarna ungu adalah jarak gambar dengan garis pinggir template, silahkan di otak-atik sendiri.

 

Untuk melihat hasilnya silahkan lihat komentar sobat blogger disini. Oke sob, selamat mencoba. Happy
Write a comment √ Read More... »