Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Buat Tampilan Beda Komentar dan Jawaban (Autor Comments) dengan CSS3

Untuk Template Lama (Template Tata Letak/Layout Templates) dan New Blogger Template).

Salah satu cara memberikan "servis terbaik" kepada pembaca atau pengunjung blog adalah dengan memberikan ciri khusus pada jawaban komentar yang dibuat autor. Dengan cara ini maka komentar pengunjung dan jawaban yang berupa komentar dari author akan terlihat dengan sangat jelas. Beberapa cara bisa dilakukan misalnya dengan membuat bentuk teks berbeda atau dengan cara memberi background pada box yang berisikan komentar pengunjung atau sebaliknya pada komentar autor (jawaban komentar). Untuk membuat bentuk kolom komentar yang sangat menarik ini, tidak boleh tidak kita harus membongkar template guna menyimpan kode CSS dan xHTML pada bagian header dan body. Untuk penyimpanan xHTML dengan amat terpaksa juga harus kita lakukan melalui Expand Widget Template, karena tanpa melalui proses ini tidak mungkin apa yang kita rencanakan bisa terwujud. Heh ... heh ..., tapi jangan kuatir! Kita akan berikan panduan sedetail mungkin hingga semua sobat blogger, terutama yang masih dalam tahap belajar memahami isi dalamnya template juga bisa belajar dan menyelesaikan desain baru ini dengan tanpa kesulitan. Iya, toh! Lhoh ..., buat apa buat tutorial klo nggak bisa dicerna dengan baik. Heh ...heh ... berkali-kali sudah banyak yang mengalami. Akibat terlalu banyak makan (tutorial atau makanan?) yang susah atau sulit dicerna di perut akhirnya masuk rumah sakit. Heh ... heh ... Usus buntunya kena! Ho ... ho... apa nggak repot jadinya?

Bentuk baru kolom komentar ini pastinya tidak hanya menguntungkan buat pengunjung, tetapi akan banyak manfaatnya juga buat tampilan blog. Yah..., jika mau sampeyan bisa utak-atik sendiri nantinya. Baik ganti bentuk dan warna teksnya atau mungkin cari-cari atau buat background lain yang "pas" dengan background blog sampeyan. Hoo... Asyik, toh! Heh ... heh ..., banyak ngomong, jadinya repot juga. Yok, kita mulai saja!

Ho ... hoo ... demo? Silahkan klik link demo di bawah dan lihat bentuk sebenarnya dari perubahan di kolom komentar. Silahkan sampeyan gerakkan mouse di kolom komentar setelah demo terlihat!


Kode CSS

.comment-body {
margin:0 0 10px;
padding:0 0 0 10px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin: 5px 0 10px;
padding: 5px;
}
.blog-author-comment p {
margin: 0 0 8px;
padding: 10px;
color: #c6e1fb; /* http://gubhugreyot.blogspot.com */
background: #777 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);
text-shadow: 1px 1px 1px #000;
border: 1px solid #666;
border-radius: 4px 12px 4px 12px;
-moz-border-radius: 4px 12px 4px 12px;
-webkit-border-radius: 4px 12px 4px 12px;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.blog-author-comment p:hover {
-o-transform:scale(1.2) translate(0, 10px);
-moz-transform:scale(1.2) translate(0, 10px);
-webkit-transform:scale(1.2) translate(0, 10px);
}

  • Login : Login kee Blogger.
    • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
    • Tuliskan "Password (Sandi)".
    • KLIK "Login".
  • Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)".
  • KLIK link "Design (Rancangan)"..
  • Bagian Design (Rancangan) yang akan terlihat setelah anda klik tadi adalah "Page Elements (Element Laman)", yang ditandai debngan terlihatnya beberapa box dengan beberapa diantaranya bergaris putus-putus yang merupakan pola dasar bentuk halaman blog sampeyan. Lewati saja halamman ini dengan klik link Edit HTML.
  • Edit HTML-1 : Lakukan back-up Template terlebih dahulu.
    • KLIK Download Template Lengkap (download Full Templates).
    • Simpan file template di "Folder PC". Berikan nama untuk memudahkan pencarian saat dibutuhkan kembali nantinya. File template ini berekstensi .xml.
    • Kembali ke "Edit HTML".
  • Edit HTML-2 : KLIK Expand Widget Templates.
  • Cari kode ]]></b:skin>, kemudian copy dan pastekan "kode CSS" di atas ]]></b:skin>.
  • Cari kode seperti yang terlihat di bawh ini:


  • <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

  • Kode seperti di atas hanya ada 1 (satu) sehingga mencarinya tak akan sulit. Di bawah kode ini akan terdapat sederet kode seperti yang terlihat di bawah.
  •         <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>
    <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <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>
    </div>

    <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'>
  • Ganti kode di atas dengan kode berikut:
  •          <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>
    <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>
    <!-- ======================S T A R T========================= Author Comment ========-->

    <b:if cond='data:comment.author == data:post.author'>
    <dd class='blog-author-comment'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>

    <!-- ==========START==gubhugreyot.blogspot.com== Author Comment ============ -->

    <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p>
    <data:comment.body/>
    </p>
    </b:if>
    </dd>
    <!-- ===================== E N D ====================== Author Comment =========-->

    </b:if>
    <!-- ===================== E N D ====================== Author Comment ============= -->

    <dd class='comment-footer'>
  • KLIK SAVE Templates/Simpan Template.
  • Buka blog yang berisi komentar untuk melihat hasilnya.

Catatan:

  • Kode yang berwarna kuning adalah kode baru yang harus ditambahkan di template.
  • Kode yang berwarna merah merupakan tanda/kode batas dimana kode berwarna kuning harus di tempatkan.
  • Jika menginginkan background box komentar author yang berbeda, silahkan ganti background yang terdapat di kode CSS.
  • Gunakan Ctrl+F saat mencari kode html.
  • Bila masih ada yang merasa bingung untuk melakukan pengamanan/back-up templates berikut cara mencari kode di template, silahkan buka Special Tutorial di sebelah kiri atas (menu). Disana tersedia beberapa tutorial penting termasuk cara cepat mencari kode HTML, CSS dan javascript.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «


9 komentar:

  1. thankz boz untuk informasinya,,,,
    bos da gedget ya q comot ne,,,
    blh g???

    BalasHapus
  2. Mantap Sob,dulu pernah pasang tp agak kurang pas dng template blog sy, jd sy lepas lg, jng lupa sob, follow balik, Thank U.

    BalasHapus
  3. gx bs gan
    malah muncul tulisan gni
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:loop" must be terminated by the matching end-tag "".

    solusi'a dunk
    komen d blog ane y buat solusinya

    BalasHapus
  4. kok ngga bisa ya om, malah muncul tuisan gini :


    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "dd" must be terminated by the matching end-tag "".


    tolong dong om pencerhannya

    BalasHapus
  5. gan mau tanya ini kok ga bisa ya muncul tulisan gini

    Kesalahan saat mengurai XML, baris 2303, kolom 9: The element type "dd" must be terminated by the matching end-tag "".

    BalasHapus
  6. bang mau tanya kalau modifikasi komentar seperti di blog ini bgmana tutornya bang??

    BalasHapus

 
GR | Edited by | gubhug reyot