membuat kotak komentar ada foto komentatornya

berikut langkah-langkahnya:

• klik tata letak,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'>
akan terlihat seperti dibawah ini:




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



Sobat hapus semua kode diatas ganti dengan kode dibawah ini:



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










• cari




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




jika di lihat sampai kebawah, akan terlihat seperti ini:



/* Comments <br />----------------------------------------------- */ <br />#comments h4 { <br />margin:1em 0; <br />font-weight: bold; <br />line-height: 1.4em; <br />text-transform:uppercase; <br />letter-spacing:.2em; <br />color: $sidebarcolor; <br />} <br /> <br />#comments-block { <br />margin:1em 0 1.5em; <br />line-height:1.6em; <br />} <br />#comments-block .comment-author { <br />margin:.5em 0; <br />} <br />#comments-block .comment-body { <br />margin:.25em 0 0; <br />} <br />#comments-block .comment-footer { <br />margin:-.25em 0 2em; <br />line-height: 1.4em; <br />text-transform:uppercase; <br />letter-spacing:.1em; <br />} <br />#comments-block .comment-body p { <br />margin:0 0 .75em; <br />} <br />.deleted-comment { <br />font-style:italic; <br />color:gray; <br />}






hapus , dan ganti dengan kode dibawah ini, , jika tidak ketemu langsung saja kopi kode terakhir di atas ]]></b:skin>:




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

Tulisan Terkait : membagi/ menambah lagi sidebar menjadi 2Sign ke Blogger.Pilih tata Letak.Pilih Edit HTML.Back up dulu templat ... [ www.fabrie.blogspot.com] Buat banner kamu disiniBuat banner kamu di sini: ... [ www.fabrie.blogspot.com] Menambah Space Iklan di Dalam Posting BlogspotBanyak cara bagi para publisher untuk menampilkan iklan di blognya ag ... [ www.fabrie.blogspot.com] menambahkan name/url opsi profilAkhir-akhir ini saya bingung mengapa select profil pada form komen ... [ www.fabrie.blogspot.com] Cara Membuat Jump Link di Dalam PostingWah apaan tuh "Jump Link" ?? mungkin sobat bertanya-tanya apa sih mak ... [ www.fabrie.blogspot.com] cara menampilkan judul artikel / post di depan judul blog layout > Edit HTML Cari kode berikut :<title><data:blog.pag ... [ www.fabrie.blogspot.com] Tips menampilkan pesan pada jam tertentuKadang kita bingung bagaimana berkomunikasi dengan pengunjung karna k ... [ www.fabrie.blogspot.com] buku tamu tersembunyi 2 (gadget tersembunyi)Sebetulnya cara ini sama saja dengan , membuat buku tamu tersembunyi ... [ www.fabrie.blogspot.com] Online Image ( Gif,PNG.JPG) Optimizer : Image CompressorImgage optimzer yang satu ini disediakan secara online oleh dinamycdr ... [ www.fabrie.blogspot.com] Tips Menyimpan/ Save As File Flash dari Website! Saat kita browsing atau jalan-jalan di internet, sering kita meliha ... [ www.fabrie.blogspot.com] Cara Mudah Membuat Banner Online GratisLangkah-langkah gratis: 1. Kunjungi situs ini Bannerfans.com 2. Regis ... [ www.fabrie.blogspot.com] background dan layout bebeda pada setiap halaman blogMemasang background untuk halaman utamaDi halaman ini ditempatkan ber ... [ www.fabrie.blogspot.com] membuat daftar isi blogdaftar isi blog sangat membantu pengunjung untuk menjelajahi seluruh ... [ www.fabrie.blogspot.com] menambah elemen baru di atas footerSalam sobat , kali ini saya akan coba menjelaskan langkah-langkah unt ... [ www.fabrie.blogspot.com] Memasang Navigasi Halaman [ Page Navigation] di Blogspotenu navigasi halaman adalah fitur blog pengganti untuk tulisan "posti ... [ www.fabrie.blogspot.com] Membuat Floating Image Yang Bisa Ditutup (close) Pada BlogFloating image merupakan image mengambang yang biasanya berada di seb ... [ www.fabrie.blogspot.com] Menampilkan update status twitter di blog dengan javascriptHai Sobat!      Kali ini ada script yang sebetul ... [ www.fabrie.blogspot.com] Cara Mengganti Template BlogspotDi blogger atau blogspot, anda dapat dapat mengganti template blog an ... [ www.fabrie.blogspot.com] Cara Membuat Auto Hide pada Navbar BloggerCara Membuat Auto Hide pada Navbar Blogger adalah cara agar Navbar bl ... [ www.fabrie.blogspot.com] Cara Mudah Menambahkan Fitur Reply Pada Kolom Komentar BlogspotMembuat Fasilitas Reply pada Kotak Komentar ini akan membantu mempe ... [ www.fabrie.blogspot.com] menampilkan Avatar Mybloglog di Kotak KomentarLangsung saja, seperti biasa loginlah terlebih dahulu ke blogger. ... [ www.fabrie.blogspot.com] Membuat Title Bar Berjalan .fullpost{display:inline;} Agar dapat membuat title bar berjalan, ... [ www.fabrie.blogspot.com] Membuat Widget Pop Up Windows di Blogwidget yang tampil seperti mengambang di blog, biasanya sering untuk ... [ www.fabrie.blogspot.com] membuat tabview (3) Edit HTML.cari ]]></b:skin> kopi kode berikut di atas nya: ... [ www.fabrie.blogspot.com] Cara Mudah Membuat simbol trademark, registered , copyright dan simbol lainnyaUntuk membuat TradeMark alias TM TM adalah singkatan dari TradeMark. ... [ www.fabrie.blogspot.com] sahabat yang mau tukeran link silahkan komen disini Baca Peraturan terlebih dahulu sebelum barter link. Terimakasih tel ... [ www.fabrie.blogspot.com] Tablet PC Epad Android QWERTYHarga per 16/02/2011 kisaran Rp1.600.000. SUDAH SUPPORT 3G MODEM, QWE ... [ www.fabrie.blogspot.com] Cara Memodifikasi Komentar Blogspot Seperti WordpressHow to Enable Threaded Comments in blogspot - Cara memasang treaded c ... [ www.fabrie.blogspot.com] Fitur Baru Dashboard Posting BloggerFitur Baru Dashboard Posting Blogger. Hari ini saya agak merasa kikuk ... [ www.fabrie.blogspot.com] Cara Menganti Akun Login BlogpsotMisalkan anda ingin mengganti email login ke blog anda dari AkunLama ... [ www.fabrie.blogspot.com] Menyembunyikan gadget atau widget pada postingan tertentuLoading blog sobat lambat karena widget yang begitu banyak? supaya wi ... [ www.fabrie.blogspot.com] Menampilkan kode script pada posting blogMasuk Blogger>Klik Layout(tata letak).Pada Layout/tata letak klik ... [ www.fabrie.blogspot.com] Mempercepat Loading Page Pada BlogWidget yang terlalu banyak menbabkab loading blog tergannggu, seperti ... [ www.fabrie.blogspot.com] Cara Memasang Tombol Back to Top di BlogBlog sobat terlalu panjang kebawah karena posting yang panjang? tentu ... [ www.fabrie.blogspot.com] MEMASANG KOMENTAR TERBARUMasuk ke Blogger.Pilih Tata Letak.Pilih Edit HTML.Cari kode ini ]]> ... [ www.fabrie.blogspot.com] Cara Memasang Iklan Ditengah Posting BlogspotBerbeda dengan wordpress, blogspot tidak menggunakan plugins seperti ... [ www.fabrie.blogspot.com] cara membuat tabview 4Sobat, kali ini masih membahas cara membuat tabview. Kalo tidak salah ... [ www.fabrie.blogspot.com] menampilkan ym status di sudut blogmenampilkan ym status di sudut blog,,, kalo di tv posisinya kurang le ... [ www.fabrie.blogspot.com] Menampilkan User Agent Detector di BlogspotHai Sobat Blogger!         &n ... [ www.fabrie.blogspot.com] membuat buku tamu tersembunyi jilid 2langkahnya:Masuk ke account Blogger kamu, pilih "Layout" - "Page Elem ... [ www.fabrie.blogspot.com] membuat buku tamu tersembunyiingin menampilkan buku tamu tersembunyi di blog? Masuk ke account Blo ... [ www.fabrie.blogspot.com] Cara Memasang Page View Counter di BlogspotCara Memasang Page View Counter di Blogspot. Akhirnya Jasman dari ihs ... [ www.fabrie.blogspot.com] 1 Link Untuk Membuka 2 Halaman SekaligusSatu link akan membuka dua halaman sekaligus? waaaaahh menarik juga. ... [ www.fabrie.blogspot.com] membuat efek zoom pada image dan tulisanlogin ke blog, tata letak , html cari kode ]]></b:skin>, kop ... [ www.fabrie.blogspot.com] kursor di ikuti segerombolan teksingin kursor di ikuti teks? masuk ke Blog. Tata Letak, tambah widget ... [ www.fabrie.blogspot.com] Membuat Related Post Tanpa DuplikatPada tutorial sebelumnya tentang artikel terkait atau related post. P ... [ www.fabrie.blogspot.com] Memindahkan Tanggal Publikasi Dibawah Judul PostingBila kita menggunakan template default blogger, biasanya saat kita m ... [ www.fabrie.blogspot.com] Membuat Random BannerRandom Banner adalah sebutan untuk tampilan banner yang tampil secara ... [ www.fabrie.blogspot.com] Membuat Garis Lengkung Pada Border blogMenggunakan border ini adalah untuk meminimalkan memepercantik blog d ... [ www.fabrie.blogspot.com] Cara Menerbitkan Posting Di BlogspotPada saat kamu akan membuat tulisan baru di blogspot maka kamu akan d ... [ www.fabrie.blogspot.com]

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan