Cara Modifikasi Kotak Komentar

Send by -True Violet- 15 November 2009
rupanya banyak sekali yang menyukai tampilan dari kotak komentar yaitu kotak komentar yang seperti ini :

komentar


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, saya memakai kode template Minima.

  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>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <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>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <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 &#8220;<data:post.title/>&#8221;</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&#160;<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>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <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.

Selamat mencoba.

[kolom-tutorial]


Yang Lainnya:



0 komentar

Posting Komentar

Silahkan berikan komentar/saran sobat demi kemajuan blog kami ini... Terima Kasih

FORUM MUSIK LOKALICIOUS



2 Garis 8 Ball Acha Septriasa Ada Band Adhareza Adrian Martadinata Agrikulture Ajeng Intan Aladin Aleea Band Alka Almost D'va Amorphis Andez Andi Rif Andika Pratama Angelina Ruby Anima Anita Hara AOP Ares Ari Lasso Aril AF7 Armada Array Band Ashanti Aura Kasih Azura B'jah BCL Be3 Blackout Boomerang Brownies Cadenza dan Vanya Candu Band Canvas Capulet Cashback Charly ST12 Cinta Kuya Cinta Laura Clavia Club 80's Cosmic D_Option D'Bagindaz D'Magma D'Parfum D'Sixthsense D'Unique De Afternoon De'Time DEA Band Dewi Sandra Dhika Dimas Beck Dini Aditama Dissa Dj Dave Doddy Katamsi Donita Double B Drive Dublex Inc Elda and The Triggers Electron 45 Elvenskin EPISOD Evolet Exo Band Faby Fellas Five Minutes Flow R Fortuna Freaky Styley Free Frequency G2 Geisha Gilbert Pattiruhu Gita Gutawa Groovy Sadie Gruvi Guntur Hachi Happy Day Happy Salma Hardolino Harmonik Distorsi Hati Band Helios Hengky Supit Humania Ihsan Indra Brugman Innerlight Intan Nuraini Intan RJ Irsa Andrea J-Rocks Jahanam Jamrud Joker Juliette Kahitna Karla Karma Kastil Keyla Kiki Amelia Kill the DJ Knaan Kripik Peudeus Krisdayanti L'arc~en~Ciel Laba Laba Lafrosia Lagu Religi Lagu Sunda Lala Suwages Leeya Lensa Band Leo 15 Liberty Lifter Limosin Local Heroes Lucky Laki Lusy Rahmawati Magneto Malika Mandala Shoji Marsya Marvells Mass Romantic Maximus Mayoret Mbah Surip Meadow Melanie Putri Melly Goeslaw Mizta D MU Mulan Jameela Music For Sale Naff Namito Nania Nano Naura Netral New Folder New Sabila Nikki Nindy Nixoteen Not For Sale Nubhan Nuke Numero Nyawa Nyrwana O_On Olif Omelette One Blood Opick Oris Band Overload Romance Padi Paracoustic Parvume Phantom Pinkan Mambo PL4T Band Prambors Band Radja Rama Rayna Wine Repvblik Revalina S Temat Rio Febrian Riunk Robin Hood Rosewood Sabisana Sakura Santi Nova Saras Sarwana Saykoji Sembilan September Band Seven Dream Shafan Shamila Cahya Shinobi Shiver Sigit Wardana Sigma Smariduta Solitaire Addict ST12 Strive Rainbow Sweet Baby T Five T.R.I.A.D Tangga Tatz Taxi Teuku Yudhistira The Banery The Brantaz The Cash The Dance Company The Flam The Jalu The Law The Nolan The Potter's The Story The Sun The Tangkiwood The Titans The Vuluz Tinta Titi Dj Tompi Trio Libels Trio Macan Uncle Jesse Ungu Utopia Various Artist Vidi Aldiano Vienna Vote Wali Warteg Boyz Waterfall Widi Vierra Wings Band Zero Eighty Why Zetta Zigaz Zogut

Tempat Buat Kumpul/Nongkrong

dfacto-community on Facebook

Gabung Yuk Jadi Sahabat Kami!

Chat Box!

Ad by ProfiAdvert

Free Mp3 Albums

Directories