Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Cara Modifikasi Kotak Komentar

Hiks… setelah membaca beberapa pesan yang masuk ke kotak shoutbox, kotak komentar serta kiriman email, rupanya banyak sekali yang menyukai tampilan dari kotak komentar yang kang rohman pakai yaitu kotak komentar yang seperti ini :

 

komentar

Seperti biasanya, kalau banyak yang suka pasti kang rohman di berondong oleh permintaan agar di buatkan tutorial cara membuat kotak komentar yang seperti gambar di atas. Nah, untuk memenuhi hasrat beliau-beliau ini maka kang rohman menyempatkan diri untuk membuatkan tentang bagaimana membuat kotak komentar ini.

Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Sebagai contoh, kang rohman memakai kode template Minima.

Agar tidak terlalu ngalor ngidul karena sekarang kang rohman punya penyakit males ngetik banyak-banyak, maka langsung saja kepada langkah bagaimana cara memodifikasi kotak komentar ala blog kang rohman.

 

  1. Login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
  5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.

     

    expand widget template

     

  6. Tunggu beberapa saat ketika proses sedang berlangsung.

  7. Cari kode pada bagian CSS yang seperti ini :

     

    #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;
      }

     

     

  8. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

     

    #comments h4 {
      margin:0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: #000;
      }

    #bg_commentblock {
        width: 548px;
        background: #ffffff;
        float: left;
        padding:20px;
        margin:0 0 10px 0;
        border:1px solid #C0C0C0;
        }

    #commentblock {
        width: 510px;
        background: #E8E8E8;
        text-align:left;
        padding: 20px 20px 10px 20px;
        margin: 10px 0px 0px 0px;
        border-top: 2px solid #333333;
        border-bottom: 1px solid #333333;
        }
    #commentblock ol {
        list-style-type: square;
        margin: 0px 0px 0px 10px;
        padding: 0px 0px 10px 0px;
        }
    .commentdate {
        font-size: 12px;
        padding-left: 0px;
        }
    #commentlist li p {
        margin-bottom: 8px;
        line-height: 20px;
        padding: 0px;
        }

    .commentname {
        color: #333333;
        margin: 0px;
        padding: 5px 5px 5px 0px;
        }

    .commentinfo{
        clear: both;
        }

    .commenttext {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(http://3.bp.blogspot.com/_pt7i0nbIOCY/SKr0-3xHq9I/AAAAAAAAAMw/F-3qMZZGo8M/s320-R/comment.gif) no-repeat top left;
        }

    .commenttext-admin {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(http://3.bp.blogspot.com/_pt7i0nbIOCY/SKr0-3xHq9I/AAAAAAAAAMw/F-3qMZZGo8M/s320-R/comment.gif) no-repeat top left;
        }

     

     

  9. Lihat Ke bagian bawah, dan cari kode yang seperti ini :

     

    <b:includable id='comments' var='post'> 
    <div class='comments' id='comments'> 
    <a name='comments'/> 
    <b:if cond='data:post.allowComments'> 
    <h4> 
    <b:if cond='data:post.numComments == 1'> 
              1<data:commentLabel/>:
            <b:else/>
              <data:post.numComments/> <data:commentLabelPlural/>:
            </b:if>
          </h4>

          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
               
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
               
              <data:post.commentRangeText/>
               
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
               
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
            </span>
          </b:if>

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

          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
               
              <data:post.commentRangeText/>
               
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>

          <p class='comment-footer'>

            <b:if cond='data:post.embedCommentForm'>
              <b:include data='post' name='comment-form'/>
            <b:else/>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
              </b:if>
            </b:if>

          </p>
        </b:if>

     

  10. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

     

    <b:includable id='comments' var='post'>

      <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>

    <div id='bg_commentblock'>

    <h4>

    Komentar :

       </h4>

       <div id='commentblock'><!--commentblock-->

    <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
            <b:else/>
               <strong><data:post.numComments/> <data:commentLabelPlural/> ke “<data:post.title/>”</strong>
            </b:if>

          <dl class='commentlist'>
            <b:loop values='data:post.comments' var='comment'>
              <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
                <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>pada hari <dd class='comment-footer' style='display:inline; margin:0px'>
                <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></span>
              <dd class='commenttext'>
                <b:if cond='data:comment.isDeleted'>
                  <span class='deleted-comment'><data:comment.body/></span>
                <b:else/>
                  <p><data:comment.body/></p>
                </b:if>
              </dd>
            </b:loop>
          </dl>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
               
              <data:post.commentRangeText/>
               
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>

          <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='comment-form'/>

    <b:else/>

    <b:if cond='data:post.allowComments'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

    </b:if>

    </p>
        </div><!--end commentblock-->

    </div>
        </b:if>

     

     

  11. Klik tombol Simpan Template.

  12. Selesai. Silahkan lihat hasilnya.

      

Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.

Nah itulah tutorial singkat yang anda tunggu-tunggu selama berbulan-bulan, semoga dapat mengobati rasa kesal yang selama ini mengganjal di hati anda.

 

Selamat mencoba.

20 Agustus 2008 - Posted by | blog tutorial, blogspot tutorial, kotak komentar

43 Komentar »

  1. Wah enggak percuma aku bolak-balik sini,ada tutorial mantap nih aku coba dulu ya kang dan makasih

    Komentar oleh Tutorial Joomla | 20 Agustus 2008 | Balas

  2. ntar deh dicoba semoga aja langsung jadi,thanks kang rohman

    Komentar oleh Agung | 20 Agustus 2008 | Balas

  3. Itu namanya END-USER RULES!!

    Maklum kang, situkan udah punya banyak pengikut, mau gak mau harus ngikutin harapan2 umat, termasuk ane yg dari kemaren juga turut berpartisipasi memenuhi shoutbox, comment, dan inbox kang rohman dengan permintaan tutorial yg ini…hehehe makasih kang, orang yang menyebarkan ilmu yang baik pahalanya banyak lho..

    Komentar oleh Hamba | 20 Agustus 2008 | Balas

  4. BERHASIL…BERHASIL…BERHASIL…

    cuma masalahnya kang…blom ada yg mau ngasih komentar hehehe

    Komentar oleh Hamba | 20 Agustus 2008 | Balas

  5. Asyik..! akhirnya datang juga..

    Komentar oleh Anas | 20 Agustus 2008 | Balas

  6. Manntap ini postingan euy, Thanks KANG

    Komentar oleh kapanpun | 20 Agustus 2008 | Balas

  7. nguliknya asyikk tuh, MAKSIH KANG infonya

    Komentar oleh belajar autocad | 20 Agustus 2008 | Balas

  8. thanks ilmunya kang Rohman, dari kemarin ane memang nongkrong terus disini, tp msh mo nanya kang, ane dah nyoba bikin read more di template baru kok ga bisa2? padahal dah ane ikutin tu tutorialnya? begitu juga download template baru yg bukan bawaan blogger…blm bisa jg, gimana ya kang? bantuin dong…!

    Komentar oleh Ahmed Farisy | 20 Agustus 2008 | Balas

  9. Berhasil tapi gak cocok kang di template khu

    Komentar oleh Tutorial Joomla | 20 Agustus 2008 | Balas

  10. berhasil tapi ga warna warni ??

    Komentar oleh Tony | 20 Agustus 2008 | Balas

  11. yukkk…mari kita bereksperimen… moga aja berhasil…. 🙂

    Komentar oleh ugiQ | 20 Agustus 2008 | Balas

  12. Mantap kang ini yang banyak di tanya, untung dah dibahas sama kang rohman jadi gak pusing lagi nulisnya 🙂

    Komentar oleh OOM | 20 Agustus 2008 | Balas

  13. wah begini kalo master sudah ngeluarin ilmunya… mantabs sangadh kang…

    Komentar oleh hakimtea | 20 Agustus 2008 | Balas

  14. hehe,,,, sebenarnya dari dulu mo tanya tapi ga enak hati ckckck,,

    Komentar oleh Shedtya | 20 Agustus 2008 | Balas

  15. wah wah tambah keren aja neh tampilan blognya
    hebat kang

    Komentar oleh ristianb | 20 Agustus 2008 | Balas

  16. mantabbbbbbb, langsung coba ah….

    Komentar oleh alief | 20 Agustus 2008 | Balas

  17. makasih kang rohman akhir mas menulis juga apa yang saya inginkan sekali lagi maksih langsung di coba nih… 😀

    Komentar oleh pencuri kode | 20 Agustus 2008 | Balas

  18. lsg praktek

    Komentar oleh Billah | 20 Agustus 2008 | Balas

  19. BERHASILLLLLL

    wakakakakkkkkkk

    makasih banget banggggg….!!!!

    Komentar oleh Anonymous | 20 Agustus 2008 | Balas

  20. To: OOM

    Oom keduluan sama kang rohman <= dinyanyikan dgn nada lagu 'Kamu Ketauan'

    Dari kemaren banyak yg nanya ke saya gimana bikin element d header, trus saya jawab "Semua tampilan di blog saya ini, dari A sampe Z, saya bikin dgn tutorial dari kang rohman, silahkan pelajari aja sendiri d sana." Dia bilang, "Tutorial d kang rohman, kadang kurang detail dan suka gak berhasil." Menurut saya, justru apa yang dilakukan kang rohman itu bagus sekali, kita ini selalu saja hanya mau menelan bulat-bulat segala hal, tanpa ada proses belajar. Toh semua tutorialnya kang rohman–alhamdilillah–selalu berhasil. Hanya saja kita memang harus lebih kreatif ngutak-ngutik atau memodifikasi lagi dari tutorial2 tersebut, dan ini bagus buat pembelajaran, dari kita yang sama sekali gak pernah kenal html atau css itu apa, tapi kalau berani dicoba (praktek) dgn segala trial and error-nya, lama kelamaan pasti akan berhasil.

    Saya pun yakin kang rohman tidak ingin semua orang menelan mentah-mentah semua tutorialnya, beberapa komplain mungkin belum sepatutnya di lontarkan, mungkin belum terucap kata dr mulut kang rohman, tapi saya yakin, yang berusaha dibuat kang rohman adalah sebuah proses pembelajaran untuk sobat2 blogger semua. Semua blog kan punya karakteristik sendiri2, kang rohman hanya memberi garis besar tutorialnya saja, sisanya ya kita yg ngerjain sendiri.

    Lagian gak mungkin juga kang rohman, bikin tutorial yg bisa matching sm semua elemen warna, kolom, ukuran, tema dr semua blog2 kita yg notabene-nya sedang 'berguru' di sini.

    Ketika tutorial dr kang rohman tidak sesuai dgn bentuk/karakter dari blog kita, itu bukanlah suatu keterbatasan atau kekurangan dr tutorial tersebut, tapi memang merupakan intinya saja.

    Happy blogging buat semuanya, mudah2an kita ngeblog bukan cm atas dasar ngikutin trend atau komersil belaka, tapi bs ada manfaatnya buat Indonesia, syukur2 buat dunia.

    Komentar panjang ini cm karna saya kasian sm kang rohman yg lebih sering dapet komplain daripada ucapan terima kasih dr kita2. Sampai detik ini saya belom pernah ketemu buku tutorial ngeblog yg selengkap ilmu di sini..Hebatnya lagi kang rohman mau ngasih ilmunya GRATIS!!!

    Komentar oleh Hamba | 20 Agustus 2008 | Balas

  21. Thx kang… akhirnya jadi juga

    Komentar oleh mr-mung | 20 Agustus 2008 | Balas

  22. kang, tanya kotak comment yang lama masih muncul we… si gimana??? muncule sebentar tok si.. terus ilang lagi.. kira2 yang perlu dihapus apanya?

    Komentar oleh mr-mung | 20 Agustus 2008 | Balas

  23. MO coba ahhh…moga2 bisa….

    Komentar oleh ihsan | 20 Agustus 2008 | Balas

  24. aduh kang pohara euy,, panjang !! tapi krent sih …

    Komentar oleh vbnozzer | 20 Agustus 2008 | Balas

  25. thanks kang infonya

    Komentar oleh Ateonsoft | 21 Agustus 2008 | Balas

  26. terima kasih atas info nya, kok pertanyaan ku ngga di jawab sie…

    Komentar oleh SaSuKe UcHiHa | 21 Agustus 2008 | Balas

  27. Mantabs!!!
    Btw, how to appear Google ads in Unsupport-language Blog like this one?

    Komentar oleh Mizake | 21 Agustus 2008 | Balas

  28. ok, bisa dicoba

    Komentar oleh YUDO | 21 Agustus 2008 | Balas

  29. Terima kasih kepada semuanya yang telah memberi komentar untuk posting ini.

    Komentar oleh Kang Rohman | 21 Agustus 2008 | Balas

  30. waduh kang napa ga bisa ya coba di cek kang punyaku d mana salah nya? trus aku juga mo ilangin navbar nya tapi kagak tau naruh kodenya d mana soalnya aku udah modif templatenya…

    Komentar oleh shippuden | 22 Agustus 2008 | Balas

  31. thank mas, keren kali tutorialnya

    http://moneyferry.blogspot.com

    Komentar oleh Leo | 23 Agustus 2008 | Balas

  32. Kang saya dah berhasil nampilin kotak komentarnya tapi gimana cara seting supaya pas dengan template saya, saya udah coba ubah ubah with nya tapi hasilnya masi kurang simetris antara sisi kanan san sisi kiri.. mohon bantuanya

    Komentar oleh ramkur | 23 Agustus 2008 | Balas

  33. Lupa Kang saya blom ngucapin terima kasih. makasih banyak kang Rohman, Saya jadi tau Ilmu nge blog dari kang Rohman.

    Pokona Kang rohman Guru sayah yang hebat

    Komentar oleh ramkur | 23 Agustus 2008 | Balas

  34. Mau dicoba nih kang rohman, tapi masalahnya blogku pake kotak komentar dari Intense debate. Terus yang jadi masalah menghapusnya ituh lho kok sulit sih, saat dari Menu Uninsstal di Intensedebate, kemudian dibalikkan kode templatenya ke Blogger, lha kok error…, gimana dong kang, bantuin please!!
    Thx thx

    Komentar oleh chandra | 24 Agustus 2008 | Balas

  35. Gitu dong kang kasih tahu jurus2 ampe dalem,,, thx…

    Komentar oleh indo-trans | 25 Agustus 2008 | Balas

  36. wah keren banget… q mau coba dulu

    http://www.space-article.blogspot.com

    Komentar oleh space article | 30 Agustus 2008 | Balas

  37. thank kyu ya kang
    Hatur nuhun…
    “Marhaban Ya Ramadhan”

    Komentar oleh rizal | 30 Agustus 2008 | Balas

  38. kang rohman, saya udah coba dan berhasil…. tapi kepotong. Gimana cara menyesuaikannya dengan tempelate saya?

    Komentar oleh Nena Fatimah | 31 Agustus 2008 | Balas

  39. atuh akang, bantosan abdi teh. meni puyeng…!

    Komentar oleh Nena Fatimah | 1 September 2008 | Balas

  40. saya bnyk yg gk ktemu kodenya

    Komentar oleh Flourishian | 2 September 2008 | Balas

  41. wah bagus sungguh blog ini saya baru saja datang melawat..pastinya saya akan selalu datang melawat..banyak ilmu berguna saya perolehi..saya masih juga baru dalam dunia blog ini..blog saya simple je banya lagi yang perlu dibaiki..terima kasih kang rahman

    by:http://rmduit.blogspot.com/

    Komentar oleh duit oh duit | 3 September 2008 | Balas

  42. makasih om, tipsnya maknyus!

    Komentar oleh h4rIsS | 5 September 2008 | Balas

  43. Mantabs.,,, langsung praktek dan langsung bisa. Terimakasih atas infonya Kang.

    Komentar oleh achmad | 6 Maret 2010 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: