Home » Blogger Trik

Membuat author gravatar pada blogspot


Banyak cara membuat modifikasi pada bagian komentar, seperti membuat mybloglog avatar, salah satu triknya suhu Jaloee dan lain-lain. Kali ini saya mencoba memberikan salah satu trik baru untuk modifikasi perwajahan bagian komentar dengan menampilkan author gravatar sehingga memberikan kesan seperti komentar themes wordpress. Trik ini memang ada beberapa kelemahan yaitu hanya owner blog yang bisa tampil beda sedangkan untuk komentar pengunjung gravatarnya sama semua.sedangkan keuntungannya adalah tidak memakai javascript sehingga loading pagenya cukup cepat.
Langkah-langkah yang perlu di siapkan adalah
  1. Login ke blogspot kemudian Layout > Edit HTML
  2. Taruh kode di bawah ini di atas ]]></b:skin> :
    3. .commentlistdiv { margin-top: 10px;padding:10px; background: #FFF;border: 1px dotted #ddd;font-size: 0.75em;color: #666;} .commentlistdiv h1 {font-size: 1.3em; color: #366799;border-bottom: 1px solid #eee; line-height: 1.5em;} .commentlist li {background: #fff; border-bottom: 1px dotted #ddd;padding: 20px;} .commentlist li.alt {background: #fff;} .pane_l {float: left;display: inline; width: 160px;min-width: 160px;max-width: 160px; border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;} .pane_r {display: block;line-height: 1.5em;margin-left: 201px;} .c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;} .gravatar {padding: 4px;float:right;border:2px solid #ccc;} .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;} .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; } .owner-Body {display: block;line-height: 1.5em;margin-left: 201px;} .owner-Body p { font-size:100%; margin:0 0 .2em 0; color:#FF0000; text-decoration:bold; }
  3. Kemudian save hasil pekerjaan sobat dan baru centang expand widget template
  4. Cari kode  <dl id='comments-block'>  dan cari sampai tag pentupnya </dl>
    5. Kemudian ganti dengan kode di bawah ini
    <ol class='commentlist'> <b:loop values='data:post.comments' var='comment'> <li> <div class='' expr:id='data:comment.id'> <div class='pane_l'> <p 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=''><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <br/> Said </p> </div> <b:if cond='data:comment.author == data:post.author'> <div class='owner-Body'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='YOUR URL PIC' width='55'/> </div> <p><data:comment.body/></p> <div class='c_date'><data:comment.timestamp/></div> <div class='c_approved'/> <b:include data='comment' name='commentDeleteIcon'/> </div> <b:else/> <div class='pane_r'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='YOUR URL NOPIC ' width='55'/> </div> <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> <b:include data='comment' name='commentDeleteIcon'/> </b:if> </div> </b:if></div> <div class=' clear'/></li> </b:loop> </ol>
    NB : - ganti YOUR URL PIC dengan alamat images photo sobat ukuran photo width=55px dan height=55px - ganti YOUR URL NOPIC dengan alamat images photo pengunjung ukuran photo width=55px dan height=55px
  5. Finally, simpan hasil pekerjaan sobat dan lihat hasilnya
Semoga trik sederhana ini bisa mempercantik bagian komentar sobat
Posted by at 61 comments:
Labels: ,

Membuat S3slider images show

Tutorial ringan ini akan membahas bagaimana cara membuat s3slider image show yang diaplikasikan ke dalam template blog terutama blogspot, feature ini dapat di gunakan sebagai pelengkap tambahan untuk model template dengan magazine style, proses instalasi ke dalam blog sangat mudah dan simple, untuk melihat sumber s3slider image silahakan ke situs resminya, jika sobat ingin melihat demonya bisa klik di sini atau kalau sudah tidak sabar ingin mengaplikasikan feature ini hal yang pertama siapkan bahan-bahan untuk membuat s3lider, terutama scrpit jquery dan s3slider; bisa sobat download di bawah ini :
Kalau sudah sobat download saya sarankan simpan di tempat hostingan sobat sendiri, jika sudah menyimpan kita mulai langkah-langkahnya :
  1. Login ke blogspot terlebih dahulu kemudian masuk ke blog sobat pilih Layout > Edit HTML
  2. Kemudian masukan kode CSS di bawah ini sebelum kode ]]></b:skin>
    3. /* Slider Control ----------------------------------------------- */ h2.slider { color: #000000; font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0px 0px 0px 0px; padding: 0px 0px 6px 0px; border-bottom: 1px solid #C0CCD3; } #s3slider { width: 570px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } html > body #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: -40px; /* important */ } #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0px; /* important */ margin-top:30px; } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 570px;height:50px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ }
  3. Selanjutnya masukkan kode di bawah ini setelah kode ]]></b:skin>
    4. <script src="http://subagya.googlepages.com/jquery.js" type="text/javascript"> <script src='http://betatemplates.co.cc/wp-content/project/js/s3Slider.js' type='text/javascript'/> <script type='text/javascript'>    $(document).ready(function() {    $(&#39;#s3slider&#39;).s3Slider({       timeOut: 4000    }); }); </script> 
    Nb : mohon ganti URL alamat JS dengan punya anda sendiri untuk menghindari bandwith limit
  4. Kemudian sobat masuk ke Layout > add page element > HTML/Javascript dan masukkan kode ini :
    5. <h2 class="slider"> My Gallery</h2> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" /> YOUR TEXT... </li> <div class="clear s3sliderImage"> </div> </ul>
  5. Simpan dan lihat hasilnya
Contoh di atas adalah hanya 2 images show kalau sobat ingin menambah image slide shownya yang perlu dilakukan adalah menambahkan format ini :
<li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li>

Semoga tutorial ringan ini bermanfaat buat sobat yang ingin menampilkan gaya magazine di template sobat.
Posted by at 36 comments:
Labels:

Membuat autoscroll dengan jquery

Membuat auto scroll ada banyak cara, di antaranya adalah dengan cara membuat link ke bagian div yang di inginkan atau juga dengan cara memasukkan script autoscroll dengan javascript, kali ini saya coba membahas bagamaimana cara membuat autoscroll dengan script jquery yang menurut saya auto scroll ini tampak lebih dinamis ketika kita melihat bagian header dari blog kita maka autoscroll tersebut tidak muncul dan ketik kita scroll menuju ke bawah blog baru autoscrollnya muncul (bingung ga sih-red), dan efeknyanya seperti accordion, sangat mulus ketika meluncur ke atas.
Cara membuatnya mudah sekali
1. Pertama masuk ke halamat edit HTML
2. Kemudian masukkan kode ini <a href='#' id='toTop'>^ Scroll to Top</a> sebelum kode </body>
3. Kemudian masukkan kode di bawah ini :
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
di atas kode  ]]></b:skin>
4. Setelah itu masukkan kode jquery ini :
<script src='http://subagya.googlepages.com/jquery-1.3.2.min.js' type='text/javascript'/>
  <script src='http://subagya.googlepages.com/jquery.scroll.pack.js' type='text/javascript'/>
  <script type='text/javascript'>
            $(function() {
                $(&quot;#toTop&quot;).scrollToTop();
            });
        </script>
sebelum kode </head>
5. Simpan dan lihat hasilnya.

Kalau mau lihat lebih detail lagi silahkan meluncur ke sini sekalian lihat demonya biar yakin xixixixi.
Posted by at 98 comments:
Labels:

Cara mengatur layout kolom di blogspot

Pada pembahasan sebelumnya sudah saya jelaskan bagaimana cara membuat kolom baru di blogspot, dan pada tutorial kali ini saya akan membahas bagaimana cara mengatur layout kolom yang sudah kita buat, dan pada dasarnya ini juga berlaku buat kolom yang sudah ada baik itu template dengan layout 2 kolom ataupun sudah menjadi 3 kolom. Trik ini sebenarnya tidak rumit karena kita hanya memindahkan kode div di bagian section 3 (HTML) dan sedikit mengubah margin dan paddingnya apabila tampilan layoutnya bertabrakan dengan element lainnya dan posisi floatnya. Seperti biasa saya masih menggunakan acuan contoh layout template minima dan pada dasarnya tutorial ini bisa berlaku juga pada template yang lainnya.
Perhatikan screenshoot di bawah ini
  • Posisi 2 kolom berada di sebelah kanan main post :



  • Posisi main post di tengah-tengah 2 kolom :

  • Posisi 2 kolom berada di sebelah kiri main post :
 


Untuk masing-masing posisi saya akan jelaskan satu persatu, dan dalam mengubah layout kolom template, sobat blogger tidak perlu mencentang expand widget.
  • Pada posisi 2 kolom di sebelah kanan main post kode pada bagian section 3 (HTML) :

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di bawah div main-wrapper dan akan memberikan tampilan 2 kolom berada di sebelah kanan main post.
  • Pada posisi main post berada di tengah-tengah 2 kolom maka kode pada section 3 (HTML):

 <div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
     <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
   <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 

Perhatikan posisi div main-wrapper di apit oleh kode yang berwarna merah dan akan memberikan tampilan main post berada di tengah 2 kolom.

  • Pada posisi 2 kolom di sebelah kiri main post kode pada bagian section 3 (HTML) : 

<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di atas div main-wrapper, tetapi hal ini belum cukup karena pada bagian section 2 (CSS) perlu di rubah posisi floatnya terutama yang kode sidebar-wrapper menjadi posisi float left karena defaultnya right ,baru akan memberikan tampilan 2 kolom berada di sebelah kiri main post.
Konsep dasar cara mengubah layout kolom adalah :
  1. Posisi div pada bagian section 3 (HTML)
  2. Posisi float, nilai margin dan padding apabila layout kolomnya bertabrakan dengan element lainnya
  3. Trial and error
Semoga dengan tutorial cara mengubah layout kolom sobat blogger akan bisa berkreativitas dengan stylenya masing-masing.
Posted by at 81 comments:
Labels: ,

Membuat kolom baru di blogspot

Bagaimana cara membuat atau menambahkan kolom baru di blogspot? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, baik itu membuat 2 kolom menjadi 3 kolom maupun 4 kolom atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan konsep dasar membuat kolom baru di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.Konsep dasar untuk membuat kolom baru :
  1. Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
  2. Membuat definisi kolom baru pada section 2 (CSS)
  3. Peletakan tag div baru pada section 3 (HTML)  yang sudah dideklarasikan di bagian section 2 (CSS)
  4. Simpan dan lihat hasilnya
Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya.


Mengubah  template 2 kolom menjadi 3 kolom
Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :


#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
 float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.

Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :

#outer-wrapper {
  width: 750px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 400px;
  margin-left: 20px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 150px;
 float: $endSide;  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper2 {
  width: 150px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}  


Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk margin dan padding agar nantinya tidak berdempetan masing-masing container. Sedangkan untuk container baru di tandai dengan warna biru. Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya.
NB : Biasanya saya mencopy kode  #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left

Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template  minima 2 kolom (no expand widget templates) :

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Kemudian kita akan memasukkan tag div sidebar baru ke dalam structur templatenya  :

<div id='sidebar-wrapper2'>
      <b:section class='sidebar' id='sidebar2'>
</b:section>
</div>
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Perhatikan text yang berwarna biru yang merupakan tag div sidebar barunya, sedangkan untuk yang di highlight hijau adalah nilai section class yang mempunyai arti  tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>, sedangkan untuk text yang di highlight merah merupakan id yang harus unik atau berbeda dengan id lainnya.
Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.

Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya. Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger menjadi 3 kolom atau lebih dengan konsep dasar di atas.
NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer
Posted by at 64 comments:
Labels: ,

Menampilkan real time di blogspot (2)

Buat sobat blogger yang tertarik dengan menampilkan realtime di blogspot bagian pertama , pasti akan lebih tertarik lagi dengan trik yang kedua ini karena kekurangan di bagian pertama tidak dapat menampilkan jam ketika mengakses blog sobat seperti kebanyakan sobat blogger yang menanyakan bagaimana cara menampilkan jamnya, maka di bagian kedua ini semua dapat di tampilkan dengan format tampilan : Sunday, May 14, 2009 9:22:58 PM yang terus update jamnya, sehingga tampilan blog sobat menjadi lebih dinamis lagi. Kalau mau lihat screenshotnya di bawah ini :


Langkah-langkah membuatnya :
  1. Login terlebih dahulu ke blogspot masuk ke Tata Letak > Edit HTML dan jangan lupa untuk membackup template sobat 
  2. Jangan centang  , cari kode <body> dan kemudian ganti dengan <body onLoad="goforit()">
  3. Setelah itu masukkan kode ini setelah kode <body onLoad="goforit()"> 
  4. Kemudian untuk menampilkan tampilan realtime ini taruh kode di bawah ini di bagian yang sobat kehendaki seperti bagian header, footer atau main :   
          <span id="clock"></span> 
     5.  Langkah terakhir adalah tinggal save hasil pekerjaan sobat
Posted by at 33 comments:
Labels:

Menampilkan real time di blogspot

Trik ini saya dapatkan dari melihat hasil karya template suhu Herro,  sangat menarik sekali menurut saya karena ketika kita membuka blog akan terlihat hari kita mengaksesnya yang saya sebut real time , sehingga tampilan blog menjadi dinamis. Pemakaian real time dapat sobat lihat di blog ini, atau lihat screenshootnya di bawah ini :


Cara menampilkan realtime ini sangat mudah sekali, hanya membutuhkan kode javascript dan penempatan real timenya bisa menurut selera sobat blogger.
Langkah-langkah menampilakan real time di blogspot:
1. Login terlebih dahulu ke blogspot masuk ke Tata Letak > Edit HTML dan jangan lupa untuk membackup template sobat
2.  Jangan centang  ,  letakan script ini di bawah </head>

<script src='http://subagya.googlepages.com/tampil_tanggal.js' type='text/javascript'/> 

3. Kemudian untuk penempatan real time ini bisa di sesuaikan dengan keinginan sobat dengan menaruh kode di bawah ini ke dalam struktur template:

Hari ini : <script>tampiltanggal();</script>   

 4. Pada contoh ini saya menaruh kode tersebut di dalam header-wrapper yang sebelumnya saya tulis untuk code cssnya :

.realtime {
margin:10px;
text-align: left;
color:#ffffff;
float:right;
font-weight: bold;
}

Taruh kode tersebut di atas ]]></b:skin>


5. Langkah selanjutnya masukkan kode yang berwarna merah ke dalam struktur header-wrapper :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thinking Out Of The Box (Header)' type='Header'/>
</b:section>
<div class='realtime'>
Hari ini : <script>tampiltanggal();</script>   
</div>
</div>

NB : Perhatikan kode header-wraper dan tag penutupnya </div>!!

6. Langkah terakhir adalah save hasil pekerjaan sobat
Posted by at 33 comments:
Labels:

Modifikasi perwajahan komentar

Kali ini saya hanya sedikit memodifikasi hasil kerja kang jaloee yaitu mengganti perwajahan komentar, di mana saya hanya ingin menambahkan author commentnya beda style atau istilahnya komentar pemilik blog berbeda style dengan komentar pengunjung, seperti yang sobat lihat screenshoot di bawah ini :



Menurut saya perwajahan komentar tersebut sangat menarik dan unik, kalau sobat tertarik ingin membuat perwajahan komentar seperti screenshoot di atas silahkan ikuti langkah-langkah berikut :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Centang Expand Widget Templates
3. Kemudian cari kode css untuk komentar :

/* 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; }

NB: setiap bagian code css komentar berbeda-beda pada setiap template

4. Ganti semua kode di atas dengan kode di bawah :

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}

.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px dotted #ddd;padding: 20px;}
.commentlist li.alt {background: #fff;}

.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}

.c_author {font-size: 0.9em;font-weight: bold;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 7px 0px;}
.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; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

5. Setelah itu cari bagian di bawah ini :

<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>

Kemudian sobat ganti semua kode di atas dengan kode di bawah ini :

<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'><li>
<div class='pane_l'>
<div class='c_author'>
<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/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='pane_r'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
 </ul>


6. Langkah terakhir adalah save template
Posted by at 39 comments:
Labels:
Subscribe to: Posts (Atom)