Membuat Tampilan Komentar Blogger Seperti Friendster

2.15.2009
Setelah agak sehatan , akhirnya saya posting ini Membuat Tampilan Komentar Blogger Seperti Friendster ihikhik.
Sebenarnya ini request dari mbak Atca begini katanya:


mas...tolong dong bikin tutorial bikin kotak komentar yang kaya gini..
yah ...yahhhh..kutunggu.

Lihat Komentar ala friendsternya :
Weblog Indonesia

Sebelumnya tutorial ini saya dapat dari Kang Jaloe,
Apa mau tukang arsip yang ngasih tutornya, ok deh ikuti langkah-langkahnya :
  • Klik Tata Letak/Layout
  • Klik Edit HTML → Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
  • Kemudian Centang Expand Widget Template
  • Cari kode berikut :

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

    Atau secara lengkapnya begini :

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>

    Sobat hapus semua kode diatas ganti dengan kode dibawah ini:

    <ul class='commentlist'>
    <script type='text/javascript'>var CommentsCounter=0;</script>
    <b:loop values='data:post.comments' var='comment'><li>
    <div class='' expr:id='data:comment.id'>
    <div class='pane_l'>
    <div class='c_author'>
    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
    <a expr:name='&quot;comment-&quot; + data:comment.id'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <br/>
    Said
    </dt>
    </div>
    <div class='c_avatar'/>
    <div class='commentphoto' style='margin-top:.5em;'/>
    <a expr:href='&quot;#comment-&quot; + data:comment.id' style='font-size:14px;' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </div>
    <b:if cond='data:comment.author == data:post.author'>
    <div class='owner-Body'>
    <p><data:comment.body/></p>
    <div class='c_date'><data:comment.timestamp/></div>
    <div class='c_approved'/><br/>
    <b:include data='comment' name='commentDeleteIcon'/>
    </div>
    <b:else/>
    <div class='pane_r'>
    <p><data:comment.body/></p>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <div class='c_date'><data:comment.timestamp/></div>
    <div class='c_approved'/><br/>
    <b:include data='comment' name='commentDeleteIcon'/>
    </b:if>
    </div>
    </b:if></div>
    <div class=' clear'/></li> </b:loop>
    </ul>

  • Masukkan Syntax CSS ini :

    * {
    margin: 0px;
    padding: 0px;
    }

    diatas CSS ini :

    body {

  • Terus Sobat cari kode ini :

    /* Comments
    ----------------------------------------------- */

  • Kode asli Comments di minima template begini :

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    margin:1em 0;
    font-weight: bold;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: $sidebarcolor;
    }

    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    }
    #comments-block .comment-author {
    margin:.5em 0;
    }
    #comments-block .comment-body {
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }

  • Hapus semua kode diatas ganti dengan kode ini

    #comments{background:#EBF3FB; border:solid #ccc 1px; margin-bottom:10px}
    #comments h4{ margin:1em 0; padding:10px; font-weight:bold; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
    #comment-list {margin-top: 10px;padding:10px;
    background: transparent;border:
    1px dotted #ddd;font-size: 1.75em;color: #666;}
    .commentlistdiv {
    margin-top: 10px;padding:10px;
    background: #FFF;border:
    1px dotted #ddd;font-size: 1.75em;color: #666;}
    .commentlistdiv h1 {font-size: 1.3em;
    color: #366799;border-bottom: 1px solid #eee;
    line-height: 1.5em;}
    .commentlist li {background: transparent;
    border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
    .commentlist li.alt {background: #fff;}
    .pane_l {float: left;background:#fff;display: inline;
    width: 110px;min-width: 110px;max-width: 110px;
    border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
    * html .pane_l{margin-top:15px; }
    .pane_r {display: block;line-height: 1.5em;margin-left: 125px;
    padding:8px 15px 15px 15px;;background:#fff;
    border-left:1px dotted #CCCCCC;
    border-right:1px dotted #CCCCCC;
    border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
    .c_author {font-size: 13px;font-weight: normal;height:30px;
    overflow:hidden;margin: 0px 0px 7px 0px;}
    .c_avatar {display: block;margin: 0px 0px 7px 0px;}
    .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
    padding-top:20px;}
    .c_approved {color: #aaa;font-size: 0.9em;}
    .comment-form { background:#EFEFEF; border:5px solid #cccccc;
    margin:0 10px 20px 10px; padding:10px 0 0 15px;width:92%;}
    * html .comment-form { width:87%; }
    .owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
    background:#EFEBE0;padding:8px 15px 15px 15px;
    border-left:1px dotted #fff;border-right:1px dotted #fff;
    border-top:3px double #fff;border-bottom:3px double #fff;}
    .owner-Body p {
    font-size:100%;margin:0 0 0 0;color:#FF0000;
    text-decoration:bold;
    }
    .deleted-comment {
    font-style:italic; color:gray;
    }

  • Bila tidak menemukan kode /* Comments bisa diatasi dengan menaruh kode diatas diatas tag ]]></b:skin>
  • Selesai deh.
Bila Ingin Menambahkan/Memunculkan Foto di area komentar ikutin langkah-langkah di bawah ini :

Menambah Gambar di Area Komentar.

  • Masukkan Script di bawah ini di atas kode </head>

    <script src='http://www.geocities.com/ridwanox/blogger_comment_photos.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
    BloggerProfiles.imageWidth = 50;
    BloggerProfiles.imageHeight = 60;
    addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
    //]]> </script>


Keterangan :
  • Warna merah merupakan alamat dari JS sebaiknya , sobat upload sendiri di tempat hostingan punya sobat seperti googlepages,ripway dan sebagainya.
  • Warna biru merupakan Foto yang akan muncul di area komentar,bila yang berkomentar tidak menggunakan id blogger atau biasa disebut annonymous.
  • Warna hijau : 50 merupakan lebar foto dan 60 merupakan tinggi foto.
Membuat Tampilan Komentar Blogger Seperti Friendster.Selesai jugapenatdeh.
Bila mengalami kegagalan di coba terus,terus dan terus.
Saya juga sering mengalami kegagalan
Insya Allah bila berusaha maka akan berhasil.sengihnampakgigi

41 komentar:

  • Unknown

    hem.. bener" manteb tutornya,coba" ahh..

  • DavidMIqbal

    Ridwan Semakin Hebat aja.salut mas..Sukses selalu buatmu;;)

  • Wah... Panjang dan melelahkan juga yah jalannya...

  • BLOGGOA

    kang kalo buat buku tamu pengganti shoutmix gimana kang......

  • :x Wah,lumayan nie klw d cobhaaa..

  • wahhh...soryyyy nih, baru pulang dari berenang hehehehe...

  • langsung di praktekkan nihhh..
    makasih banget ya mas...:s

    Nanti kalo ada yang perlu ditanyain boleh ya hehehehe

  • aalil Belajar SEO

    mantaabb mas..hehe..

    oh ya,, cara bikin kotak posting terpisah2 kayak punya mas gmn ya?

    thanks mas..

  • mantab brooo... kereen,....!!!!

  • kEREN...EUUYYY....
    Salam..
    Apa Kabar bro?

  • Syamsul Alam

    Wah.... kotak komennya di kasih copyright nih harusnya...... wkwkwkkwkwk....... ga matching bgt warnanya... ampe ngakak aku.... hihihi......

  • ata

    eh brow..
    tuh script yg tambah gambar kok di katakan script tidak di tutup dengan benar? masalahnya dimna neh?

  • keren deh,.,.,buat template lama yg diperbaharui,.,.,selamat ya,.,.,.,

  • mantabB nie infone
    makin hebat ae temen ku satu ini *ngaku2*

    oia uda pernah mbahas setting njawab komentar orang, langsung di bawah komentar orang tsb ndak?
    bukan njawab komentar rombongan seperti ini :
    @ar_eros: bla bla bla
    @ridwanox: bla bla bla
    @cebong: bla bla bla

  • Opa

    iya tuh wan, bener kata ar_eros...
    opa minta tulung diberikan tutornya...;)

  • Mr. SEAC

    ide-idenya makin keren aja

  • Baka Kelana

    Sip...keren Bos
    ntar mau coba juga:D

  • wah..... aku gak nemu tuh kode2 itu... udah aku utak atik...gak nemu2 juga...gimana neh...???

  • thengkyu3x...
    hebat banget bro.
    belumdi coba seh, sukses atau tidak nanti saya kabari lagi.
    sekali lagi, thanks infonya bro...

  • coba dulu yah.....

  • Dimana pun, kapan pun, teteup Narsis... Hidup Narsis!!!!!

    Wkwkkwkw,,, kirain mudah,,, ternyata kode yang harus d ganti banyak dan panjang2 juga yah....
    hehehehehe....

  • midel

    bos, aku kok ga bisa ya terus ya? katanya:"Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: sidebarcolor".

    salahnya dimana ya? apa ini berlaku untuk semua templatenya blogger.com?
    tolongin donk...

  • bos, aku kok ga bisa ya terus ya? katanya:"Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: sidebarcolor".

    salahnya dimana ya? apa ini berlaku untuk semua templatenya blogger.com?
    tolongin donk...

  • Cuma satu kata
    Blog anda luar biasa
    sukses ......
    and thank' atas ilmunya

  • doel_gemoekzz

    boh, panjang, ampe mls bcanya, tapi salut mas hebad bgt

    http://doel-gemoekzz.blogspot.com <---promosi wkwkwkw

  • TEAM 13

    gak berhasil bro..laporannya :
    Invalid variable declaration in page skin: Variable is used but not defined. Input: sidebarcolor
    bete..:(

  • zava

    mas biar pos koomenya bisa kayak punya mas gimana longsung terlihat di bawah tolong bantuannya ya

  • AWS ngofa Tidore

    Boz Ridwan, Kok , q g bisa ketemu Kode yg pertama diatas, mwnya ngikutin tahap2 pmbuatan dengan tartil tapi kode pertamax gak ketemu, gmana ne? ada solusi g??

  • mampir sambil cari inspirasi sob!

  • Wafi

    kok aku nyoba nggak bisa2 yak ...????:a:

  • gina

    gimana nih....:k:, gagal terusss.....semua udah q masukan n ganti ko masi eror,....bantuin dong...

  • KotaTahuku

    Foto ku koq gak keluar ya....?

  • Ferry

    kok blog gue gak bs keluar ya menu comment nya?
    padahal semua petunjuknya udh di jalankan walaupun sempat trouble "Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: sidebarcolor"
    tapi pas udh diganti sidebarcolornya jadi kode color akhirnya bisa.
    tp kok tetap tdk mau ya ngeluarin tampilan comment. apa ada kode yg kurang?
    trims

  • Blog Informasi

    mas scriptnya g bisa boleh minta g jadi ntar saya upload sendiri...

  • Masrizal

    mas , cara upload ccs warna merah dari geocities gimana mas? kok gak bisa?

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)